livewire-development

Livewire 開発

適用するタイミング

次の場合にこのスキルを有効にします。

• Livewire コンポーネントを作成または変更するとき
• wire: ディレクティブ（model、click、loading、sort、intersect）を使用するとき
• islands または非同期アクションを実装するとき
• Livewire コンポーネントのテストを作成するとき

ドキュメント

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

基本的な使い方

コンポーネントの作成

単一ファイルコンポーネント（v4 のデフォルト）

{{ $assist->artisanCommand('make:livewire create-post') }}

複数ファイルコンポーネント

{{ $assist->artisanCommand('make:livewire create-post --mfc') }}

クラスベースコンポーネント（v3 スタイル）

{{ $assist->artisanCommand('make:livewire create-post --class') }}

名前空間を指定

{{ $assist->artisanCommand('make:livewire Posts/CreatePost') }}

形式間の変換

php artisan livewire:convert create-post を使用して、単一ファイル、複数ファイル、クラスベースの形式間で変換できます。

コンポーネント形式のリファレンス

形式	フラグ	構成
単一ファイル（SFC）	デフォルト	1 つのファイルに PHP と Blade を記述
複数ファイル（MFC）	--mfc	PHP クラス、Blade、JS、テストを別々に配置
クラスベース	--class	従来の v3 スタイルのクラス
ビューベース	⚡ プレフィックス	関数型の状態を持つ Blade のみのコンポーネント

単一ファイルコンポーネントの例

count++; } } ?>

Livewire 4 固有の仕様

Livewire 3 からの主な変更点

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

• フルページコンポーネントには Route::livewire() を使用します。設定キーは layout → component_layout、lazy_placeholder → component_placeholder に変更されました。
• wire:model はデフォルトで子要素のイベントを無視するようになりました（以前の動作を使うには wire:model.deep を使用します）。wire:scroll は wire:navigate:scroll に名前が変更されました。
• コンポーネントタグは適切に閉じる必要があります。wire:transition は View Transitions API を使用するようになり、修飾子は削除されました。
• JavaScript：$wire.$js('name', fn) → $wire.$js.name = fn、commit／request フック → interceptMessage()／interceptRequest()。

新機能

• コンポーネント形式：単一ファイル（SFC）、複数ファイル（MFC）、ビューベースのコンポーネント。
• 分離して更新するための Islands（@island）、並列実行するための非同期アクション（wire:click.async、#[Async]）。
• 遅延／バンドル読み込み：コンポーネントの読み込みを最適化する defer、lazy.bundle。

機能	使用方法	目的
Islands	@island(name: 'stats')	更新領域の分離
非同期	wire:click.async または #[Async]	ノンブロッキングアクション
遅延	defer 属性	ページのレンダリング後に読み込む
バンドル	lazy.bundle	複数をまとめて読み込む

新しいディレクティブ

• wire:sort、wire:intersect、wire:ref、.renderless、.preserve-scroll を使用できます。
• ネットワークリクエストを発生させる要素には、data-loading 属性が自動的に追加されます。

ディレクティブ	目的
wire:sort	ドラッグ＆ドロップによる並べ替え
wire:intersect	ビューポートとの交差を検出
wire:ref	JS 用の要素参照
.renderless	レンダリングを行わないコンポーネント
.preserve-scroll	スクロール位置を保持

ベストプラクティス

• ループでは必ず wire:key を使用します
• 読み込み状態には wire:loading を使用します
• 即時更新には wire:model.live を使用します（デフォルトはデバウンス）
• アクション内で検証と認可を行います（HTTP リクエストと同様に扱います）

設定

• smart_wire_keys のデフォルトは true です。新しい設定項目は component_locations、component_namespaces、make_command、csp_safe です。

Alpine と JavaScript

• wire:transition はブラウザーの View Transitions API を使用します。$errors と $intercept のマジックプロパティを利用できます。
• ノンブロッキングの wire:poll と並列の wire:model.live 更新により、パフォーマンスが向上します。

インターセプターとフックについては、reference/javascript-hooks.md を参照してください。

テスト

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

検証

1. ブラウザーコンソール：JS エラーがないか確認します
2. ネットワークタブ：Livewire リクエストが 200 を返すことを確認します
3. すべての @foreach ループに wire:key があることを確認します

よくある落とし穴

• ループ内で wire:key がない → 予期しない再レンダリングが発生します
• wire:model でリアルタイム更新されると期待する → wire:model.live を使用します
• コンポーネントタグが閉じられていない → v4 では構文エラーになります
• 非推奨の設定キーや JS フックを使用する
• Alpine.js を別途含める（Livewire 4 にすでにバンドルされています）