livewire-development

Livewire 開発

ドキュメント

Livewire 3 の詳細なパターンとドキュメントについては、search-docs を使用してください。

基本的な使い方

コンポーネントの作成

php artisan make:livewire [Posts\CreatePost] Artisan コマンドを使用して、新しいコンポーネントを作成してください。

基本概念

• 状態はサーバー上に置き、UI に反映させてください。
• Livewire のリクエストはすべて Laravel バックエンドに届き、通常の HTTP リクエストと同様に扱われます。Livewire のアクションでは、フォームデータを必ず検証し、認可チェックを行ってください。

Livewire 3 固有の情報

Livewire 2 からの主な変更点

Livewire 3 では以下の点が変更されていますが、このアプリケーションには反映されていない可能性があります。既存の規約に従えるよう、このアプリケーションの設定を確認してください。

• リアルタイム更新には wire:model.live を使用してください。wire:model はデフォルトで遅延更新されるようになりました。
• コンポーネントでは App\Http\Livewire ではなく、App\Livewire 名前空間を使用するようになりました。
• イベントのディスパッチには emit や dispatchBrowserEvent ではなく、$this->dispatch() を使用してください。
• 一般的なレイアウトのパスとして、layouts.app ではなく components.layouts.app ビューを使用してください。

新しいディレクティブ

• wire:show、wire:transition、wire:cloak、wire:offline、wire:target を使用できます。

Alpine との連携

• Alpine は Livewire に含まれるようになりました。Alpine.js を手動で追加しないでください。
• Alpine に含まれるプラグインは、persist、intersect、collapse、focus です。

ベストプラクティス

コンポーネントの構成

• Livewire コンポーネントには、単一のルート要素が必要です。
• 快適な読み込み状態を実現するには、wire:loading と wire:dirty を使用してください。

ループ内でのキーの使用

@foreach ($items as $item)
    <div wire:key="item-{{ $item->id }}">
        {{ $item->name }}
    </div>
@endforeach

ライフサイクルフック

初期化やリアクティブな副作用には、mount()、updatedFoo() などのライフサイクルフックを優先して使用してください。

public function mount(User $user) { $this->user = $user; }
public function updatedSearch() { $this->resetPage(); }

JavaScript フック

livewire:init をリッスンして、Livewire の初期化にフックできます。

document.addEventListener('livewire:init', function () {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 419) {
                preventDefault();
                alert('Your session expired');
            }
        });
    });

    Livewire.hook('commit', ({ fail }) => {
        fail(() => console.error('Livewire commit failed'));
    });
});

テスト

Livewire::test(Counter::class)
    ->assertSet('count', 0)
    ->call('increment')
    ->assertSet('count', 1)
    ->assertSee(1)
    ->assertStatus(200);

$this->get('/posts/create')
    ->assertSeeLivewire(CreatePost::class);

よくある落とし穴

• ループ内で wire:key を忘れると、項目の変更時に予期しない動作が発生します
• リアルタイム更新を期待して wire:model を使用すること（v3 では代わりに wire:model.live を使用してください）
• Livewire のアクションで検証や認可を行わないこと（HTTP リクエストと同様に扱ってください）
• Alpine.js がすでに Livewire 3 にバンドルされているのに、別途追加すること