ともすたmedia
Laravel Livewireとは、PHPのフレームワークである「Laravel」に組み込んで利用できる、フロントエンドライブラリと呼ばれるものです。
通常、Webシステムを開発するときはサーバーサイドとクライアントサイドという両側を開発する必要があります。この時、PHPというプログラミング言語はサーバーサイド専用の言語であるため、フロントエンドには別のプログラミング言語である、JavaScriptやTypeScriptなどを利用する必要がありました。
しかし、このLivewireを利用すればPHPのみでフロントエンドもサーバーサイドも開発することができるようになります。開発作業が非常に効率的になるこのライブラリを、是非使いこなしていきましょう。
Laravelをインストールしよう
Livewireを利用するには、まずはLaravelをインストールする必要があります。次のページにアクセスしましょう。
少し下にスクロールすると、図のようなコマンドが環境別に提供されています。これをコピーしましょう。
これを「ターミナル」に貼り付けます。macOSの場合は、「Launchpad→その他→ターミナル」で起動、Windowsの場合はスタートボタンを右クリックして「ターミナル」などを起動しましょう。
コピーしておいたコマンドを貼り付けて実行すると、Laravelの動作に必要なPHPやComposerと呼ばれるツールがインストールされます。
それぞれ、正しくインストールされたかを確認しておきましょう。次のコマンドを入力します。
php -v
composer --version
laravel --versionいずれもバージョン番号が表示されれば、インストールできています。コマンドが見つからないなどの場合は、インストールし直しましょう。
Laravelのプロジェクトを作成しよう
続いて、Laravelのプロジェクトを作成しましょう。次のコマンドを実行します。
cd Desktop
laravel newインストールプログラムが起動し、プロジェクト名を聞かれるので例えばここでは、「livewire」などと入力します。
続いて「スターターキット」を選択できます。実はここで、「Livewire」を選択すると、あらかじめLivewireが組み込まれた状態でプロジェクトを作成できるのですが、ここでは後で手動でインストールするため、一旦「None」を選んでおきます。
続いて、データベースの選択ができますが、ここではDBを利用しないので、「SQLite」を選んでおきましょう。「npmのインストール」は進めてしまって良いでしょう。
インストール作業が終わったら、作成したフォルダ（ここではデスクトップ上）にフォルダができあがるので、これをCursorやVSCodeなどで開いておきましょう。
開発サーバーを起動して、動作を確認してみます。
composer run dev次のようなアドレスで起動するので、ここにアクセスします。
http://127.0.0.1:8000/スタート画面が表示されれば、開発が始められます。
Livewireを組み込もう
それでは、ここで作成したLaravelプロジェクトに、Livewireを組み込みましょう。「composer」を利用します。これは、先にLaravelをインストールしたときに一緒にインストールされるので、次のようなコマンドで利用できます。
エディタのターミナルに、次のように入力しましょう。
composer require livewire/livewireこれで、Livewireが利用できるようになります。
コンポーネントを作成しよう
Livewireを利用するには「コンポーネント」を作成します。手でファイルを作成することもできますが、Laravelのコマンドである「artisan」というツールを利用すると便利です。ターミナルに、次のように入力しましょう。
php artisan make:livewire Counter
すると、次の2つのファイルが生成されます。
- app/Livewire/Counter.php
- resources/views/livewire/counter.blade.php
それぞれ見ていきましょう。
コンポーネントファイルを確認しよう
まずは、コンポーネントファイルの内容から確認しましょう。「app/Livewire/Counter.php」ファイルを開きます。
ここに、処理の内容を記述します。現在は表示のための「render」メソッドで、ビューファイルを読み込んで表示するだけの処理が記述されています。
public function render()
{
return view('livewire.counter');
}ビューファイルを確認しよう
続いて、ビューファイルを確認してみましょう。次のファイルを開きます。
resources/views/livewire/counter.blade.phpLaravelの「Blade」というテンプレートエンジンを利用したファイルになります。HTMLをベースに、プログラムなどを埋め込むことができますが、現状では「<div>」タグのみが記載されています。
このファイルは、HTMLだけが記述されているファイルです。また、コンポーネントは他のページに埋め込まれて利用されることが多いため、「body」タグなどは不要で「div」タグなどから始まります。
ここでは、次のように内容を変更しておきましょう。
<div>
<h2>カウンター</h2>
</div>コンポーネントを組み込もう
こうして作成したコンポーネントは、他のページに埋め込むことができます。先ほど、開発サーバーを起動したときに表示された画面のビューファイルを編集してみましょう。次のファイルを編集しましょう。
resources/views/welcome.blade.php一旦、ページの内容をすべて削除するため、「body」タグを探して（22行目付近）内容をすべて削除し、次のようにからのページにしておきましょう。
<body class="p-6">
</body>そして、代わりに次のように入力します。
<body class="p-6">
<h1>Livewire</h1>
<livewire:counter />
</body>
これで、先ほどの画面を再度表示してみましょう。Webブラウザが開いた状態であれば、自動的に再読み込みされて更新されます。画面には「カウンター」という見出しが表示されていて、コンポーネントが読み込まれていることが分かります。
なお、Laravelでは「Tailwind CSS」というCSSフレームワークが組み込まれているため、通常ではHTMLタグのスタイルがリセットされてしまいます。ページ内容を装飾したい場合は、Tailwind CSSのクラスを記述しましょう。ここでは詳細は省略します。興味があれば、「Tailwind CSS」を学んでみてください。
コンポーネントを開発しよう
では、続きを開発していきましょう。まずは、コンポーネントのファイルを編集しましょう。次のファイルを編集します。
app/Livewire/Counter.phpこのファイルに、まずは、「プロパティ」を追加します。プロパティを利用すると、ビューファイルにそれを表示して、値を変化させることなどができます。次のように追加しましょう。
class Counter extends Component
{
public $count = 0; // 追加
public function render()
{
...続いて、ビューファイル（app/resources/
<div class="text-center">
<h2>カウンター</h2>
<p>{{ $count }}</p>
</div>ビューファイルは、Laravelで一般的に利用されている「Blade」テンプレートになっているため、「{{ プログラム }}」という記述が利用できます。ここでは、プロパティ名を記述することで、内容を画面に表示できます。
これを再度読み込むと、「0」と表示されます。こうして、処理した結果などを表示することができます。
mountメソッドで初期化しよう
コンポーネントが読み込まれるときに、「mount」というメソッドが呼び出されます。そのため、この中でプロパティの値などを初期化することができます。次のように書き換えてみましょう。
public $count;
public function mount()
{
$this->count = 0;
}カウントアップしよう
それではいよいよ、カウントアップのプログラムを作成してみましょう。まずは、「button」要素を追加します。ビューファイルを編集しましょう。
<div><button class="bg-blue-500 text-white px-4 rounded-sm cursor-pointer">+</button></div>Tailwindを使って、少し装飾を加えました。すると、図のような青いボタンが表示されます。
このボタンがクリックされたら、上の数字をカウントアップしていきたいと思います。それには、ボタンがクリックされたことを反応して、プログラムを動作させる必要があります。これを「イベント」といい、Livewireでは次のような特別な属性を追加することで、イベントに反応することができるようになります。
<button class="..." wire:click="increment">+</button>ここでは、このボタンがクリックされたときに、どのような処理を行うかを定義できます。ここでは、この後定義する「increment」というメソッドというものを呼び出しています。
なお、今の段階でクリックすると、図のように未定義のエラーが発生します。
そこで、この処理を実装していきましょう。
プログラムを実装しよう
プログラムの内容は、コンポーネントファイル（app/Livewire/Counter.php）に実装します。次のように追加しましょう。
public function increment()
{
$this->count++;
}先ほど定義したプロパティの値に、1を加えています（++）。これで準備完了です。
再度画面を表示してボタンをクリックしてみましょう。すると、画面上の数字が実際に変化していることが分かります。しかもこの時、画面の再読み込みが発生していません。
通常、PHPなどのサーバーサイドプログラムでは、ボタンをクリックした場合などに画面が再読み込みして、全体が再描画されますが、LivewireによってJavaScriptのプログラムが動的に生成されるため、実際の処理はJavaScriptで行われるというわけです。
プログラマー自身はJavaScriptを一切書いておらず、Laravelのコーディングルールに従ってプログラムを実装していくだけで、LivewireがJavaScriptを生成してくれるというのが、Livewireの魅力と言えます。
withメソッドでプロパティを渡そう
ここまでのプログラムでは、プロパティを「public」で宣言しました。
public $count;PHPでは、プロパティを定義するときに「public」の他に「protected」や「private」という宣言もあります。詳細は省略しますが、クラス定義の時のアクセス制御が行えます。この時、「public」以外で宣言をすると、ビューファイルからは参照ができなくなります。
private $count;
もし、「private」で宣言されたプロパティをビューファイルに渡したい場合は、「render」メソッドないの「view」メソッドに「with」メソッドをつないでプロパティを渡して上げます。
return view('livewire.counter')->with('count', $this->count);すると、これでもプロパティを渡すことができます。
コンポーネントの呼び出し時に値を渡そう
コンポーネントを埋め込んでいるページ側から、コンポーネントに値を受け渡すこともできます。例えばここでは、コンポーネントのタイトルを受け渡しましょう。「resouces/views/welcome.blade.php」を編集し、次のように「title」属性を追加します。
<livewire:counter title="カウントアップ！" />これを受け取る場合、同じ名前でプロパティを定義しておきましょう。
public $title;こうして、ビューファイルでも利用することができます。
<h2 class="...">{{ $title }}</h2>
