Laravel Livewireを始める

もしあなたがLaravelアプリケーションでリアクティブで動的なインターフェースを構築したいと考えているが、Vue、React、または大量のカスタムJavaScriptに手を伸ばしたくない場合、Laravel Livewireは注目に値します。Livewireを使えば、ステートフルなUIコンポーネントを完全にPHPとBladeで記述でき、ブラウザ側の更新はLivewireが自動的に処理します。

このガイドでは、Livewireの仕組み、最初のコンポーネントの構築方法、そしてLivewire 4における最新の開発体験について説明します。

Laravel Livewireとは?

Livewireは、動的なUIの構築を通常のPHPを書くような感覚で行えるようにする、Laravel向けのフルスタックフレームワークです。パブリックプロパティとメソッドを持つコンポーネントクラスを定義し、それをBladeテンプレートと組み合わせると、Livewireが裏側で軽量なAJAXリクエストを使用してサーバーとブラウザ間の状態同期を処理します。

WebSocketは不要です。別途APIも不要です。設定が必要なJavaScriptフレームワークもありません。

Laravelのエコシステムに自然に溶け込み、特に以下のような用途に適しています:

• リアルタイムバリデーション付きのフォーム処理
• ライブデータを表示するダッシュボード
• 検索フィルター、モーダル、マルチステップフローなどのインタラクティブなウィジェット

最新のLivewireアプリケーションは、Livewireベースのワークフローを中心に構築された最近のLaravel starter kitsとも綺麗に統合できるため、最小限のセットアップで本番環境に対応した雛形を入手できます。

Livewireリアクティブコンポーネントの仕組み

ユーザーがLivewireコンポーネントとインタラクション(ボタンのクリック、フィールドへの入力など)を行うと、Livewireは現在のコンポーネントの状態と共にサーバーへリクエストを送信します。サーバーはアクションを処理し、状態を更新して、新しいレンダリング結果を返します。その後、Livewireは変更された部分のDOMのみをインテリジェントにパッチします。

開発者の視点からは、PHPメソッドを書いてパブリックプロパティを読み取るだけです。リアクティブな動作は自動的に発生します。

最初のLivewire単一ファイルコンポーネントの構築

最新のLivewireアプリケーションでは、PHPクラスとBladeテンプレートが1つの.blade.phpファイルに共存する単一ファイルコンポーネントがよく使用されます。これにより関連するロジックがまとまり、最新のLivewireにおける一般的なパターンとなっています。

コアとなる考え方を示す簡単なカウンターの例を示します:

<?php

use Livewire\Component;

new class extends Component {
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function decrement(): void
    {
        $this->count--;
    }
};

?>

<div>
    <button wire:click="decrement">-</button>
    <span>{{ $count }}</span>
    <button wire:click="increment">+</button>
</div>

ここで何が起きているか:

• public int $countはコンポーネントのリアクティブな状態です
• increment()とdecrement()はブラウザからトリガーされるサーバー側のメソッドです
• wire:clickはボタンがクリックされた時にどのメソッドを呼び出すかをLivewireに伝えます
• {{ $count }}の表示は各インタラクション後に自動的に更新されます — ページのリロードは不要です

注意: すべてのLivewireコンポーネントは単一のルートHTML要素を持つ必要があります。複数のルート要素はエラーの原因となります。

より実用的な例として、投稿作成フォームでは双方向データバインディングにwire:modelを使用し、wire:submitで組み込みバリデーション付きのフォーム送信を処理します — JavaScriptを一行も書く必要はありません。

Alpine.jsの代わりにLivewireを使用すべき場合

Alpine.jsはLivewireと共に提供され、軽量で純粋にクライアント側のインタラクション(ドロップダウンの切り替え、ツールチップの表示など)を処理します。インタラクションがサーバー側のロジック(データベースのクエリ、バリデーションの実行、データの保存、複雑な状態管理など)を必要とする場合は、Livewireが適切な選択です。

UIの洗練にはAlpineを使用してください。Laravelバックエンドが必要なリアクティブコンポーネントにはLivewireを使用してください。

重要: プロジェクトにAlpineが既に別途インストールされている場合は、二重に読み込まれていないことを確認してください。LivewireはAlpineを内部的にバンドルしており、Alpineインスタンスの重複は競合を引き起こす可能性があります。

次に探求すべきこと

基本に慣れたら、最も価値のある次の領域は以下の通りです:

• wire:model修飾子 — リアルタイム更新用の.live、フィールドのblur時に同期する.blur
• wire:loading — サーバーがリクエストを処理している間のローディング状態の表示
• バリデーション — LivewireはLaravelのバリデーターと直接統合されます
• コンポーネント間の通信 — dispatch()を使用してコンポーネント間でイベントを送信

まとめ

Livewireの真の強みは、複雑なJavaScriptで実装していたものを直感的なPHPに置き換え始めた時に現れます。Laravelの規約に従いながら、最新のWebアプリケーションに期待されるリアクティブな体験を提供します。既存のLaravelアプリで1つのインタラクティブフォームから始めれば、そのパターンはすぐに明確になります。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.