Livewire Development

適用タイミング

以下の場合にこのスキルを有効にします:

• Livewire コンポーネントを作成または変更する場合
• wire: ディレクティブ (model、click、loading、sort、intersect) を使用する場合
• islands または async アクションを実装する場合
• Livewire コンポーネントテストを書く場合

ドキュメント

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

基本的な使用方法

コンポーネントの作成

<code-snippet name="Component Creation Commands" lang="bash">

Single-file component (v4 での既定値)

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

Multi-file component

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

Class-based component (v3 スタイル)

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

名前空間付き

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

</code-snippet>

フォーマット間の変換

php artisan livewire:convert create-post を使用して、single-file、multi-file、class-based フォーマット間で変換します。

コンポーネントフォーマットリファレンス

フォーマット	フラグ	構造
Single-file (SFC)	既定値	PHP + Blade を 1 つのファイルに
Multi-file (MFC)	--mfc	分離された PHP クラス、Blade、JS、テスト
Class-based	--class	従来の v3 スタイルのクラス
View-based	⚡ プレフィックス	機能的状態を持つ Blade のみ

Single-File コンポーネント例

<code-snippet name="Single-File Component Example" lang="php"> <?php use Livewire\Component; new class extends Component { public int $count = 0; public function increment(): void { $this->count++; } } ?> <div> <button wire:click="increment">Count: @{{ $count }}</button> </div> </code-snippet>

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()。

新機能

• コンポーネントフォーマット: single-file (SFC)、multi-file (MFC)、view-based コンポーネント。
• Islands (@island) 分離された更新の場合。async アクション (wire:click.async、#[Async]) 並列実行の場合。
• 遅延/バンドル読み込み: defer、lazy.bundle 最適化されたコンポーネント読み込みの場合。

機能	使用方法	目的
Islands	@island(name: 'stats')	分離された更新領域
Async	wire:click.async または #[Async]	ノンブロッキングアクション
Deferred	defer 属性	ページレンダー後に読み込み
Bundled	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 を参照してください。

テスト

<code-snippet name="Testing Example" lang="php">

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

</code-snippet>

検証

1. ブラウザコンソール: JS エラーをチェック
2. ネットワークタブ: Livewire リクエストが 200 を返すことを確認
3. すべての @foreach ループで wire:key を確認

よくある落とし穴

• ループ内で wire:key がない → 予期しない再レンダリング
• wire:model がリアルタイムであることを期待する → wire:model.live を使用してください
• コンポーネントタグが閉じられていない → v4 の構文エラー
• 非推奨の設定キーまたは JS フックを使用している
• Alpine.js を個別にインクルードしている (すでに Livewire 4 にバンドルされています)