Livewireのインストール
まず、PHPでパッケージ取得します。
composer require livewire/livewire
Livewireを使用する全ページで、JavaScriptを取り込みます。
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
コンポーネントの作成
以下のコマンドを実行すると、counterという名前の新しいLivewireコンポーネントが生成されます。
php artisan make:livewire counter
このコマンドの実行により、以下の２ファイルが生成されます。
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}
app/Http/Livewire/Counter.php
<div>
...
</div>
resources/views/livewire/counter.blade.php
ブラウザで具体的なものを確認するため、ビューにテキストを追加してみましょう。
{tip}
Livewireコンポーネントは、単一のルート要素を持たなければなりません。
<div>
<h1>Hello World!</h1>
</div>
resources/views/livewire/counter.blade.php
コンポーネントの取り込み
Livewireのコンポーネントは、Bladeの取り込みと同様と考えてください。Bladeビューのどこにでも<livewire:some-component />を挿入でき、レンダーされます。
<head>
...
@livewireStyles
</head>
<body>
<livewire:counter />
...
@livewireScripts
</body>
</html>
ブラウザで閲覧する
Livewireを取り込んだページをブラウザでロードしてください。"Hello
World!"を確認できるでしょう。
"counter"機能を追加する
生成したcounterコンポーネントクラスとビューの内容を以下のように置き換えます。
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
app/Http/Livewire/Counter.php
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
resources/views/livewire/counter.blade.php
ブラウザで確認する
ブラウザでこのページをリロードしてみましょう。counterコンポーネントがレンダーされたのを確認できるでしょう。+ボタンをクリックするとリロードせずに、自動でページが更新されます。魔法のようです。
{note}
一般にこの"counter"のような些細なコードは、AlpineJSなどにより適していますが、Livewireの動作方法を簡単に理解するためも最良の方法でしょう。