Laravel Livewireの基本と導入手順を実例つきで解説

Livewireとは — JavaScriptを書かずに動的UIを作るLaravel定番ライブラリ

LivewireはCaleb Porzio氏が開発するライブラリで、Laravel公式のスターターキットに採用され、ドキュメントもlivewire.laravel.comでホストされている“事実上の標準”です。PHPとBladeテンプレート（LaravelのHTMLテンプレート）だけで、検索フォームやカウンターのような動的なUIを作れます。ボタンを押したら数値が増える、入力に応じて一覧が絞り込まれる、といった画面の反応を、JavaScriptをほとんど書かずに組み立てられます。

うれしいのは、VueやReactのようなフロントエンドフレームワークを別途導入したりビルド環境を整えたりせずに済む点です。画面の状態やロジックはすべてサーバー側のPHPに集約されるため、扱う言語がPHPひとつにまとまり、Laravelに慣れた開発者ならそのままの知識で動的UIへ踏み込めます。

向いているのは、管理画面やフォームを中心とした小〜中規模のUIです。逆に、画面遷移をすべてブラウザ側で完結させるSPA（ページ全体を1つのJavaScriptアプリとして動かす作り）全体を担うような用途には向きません。部分的なリアクティブUIを手早く足したいときの選択肢と考えるとよいでしょう。

なお2026年1月には次期メジャーのLivewire 4がリリースされています（単一ファイルコンポーネントの導入など、書き方が大きく変わる過去最大級の更新です）。本記事は現在も利用の多いv3系を前提としているため、これから新規に始める場合はv4のドキュメントも合わせて確認してください。

Laravel Livewireの導入からコンポーネント作成までの手順

Livewire 3系の動作要件はPHP 8.1以上・Laravel 10以上です。本記事はこのv3系を前提に、導入から実装、本番で踏みやすい落とし穴までを扱います。

Laravelの下地がまだなら、先に環境構築からルーティングまでの基礎を通しておくと迷いません。

composerでのインストールとレイアウトへの組み込み

導入はComposerで一行です。Livewire 3ではスクリプトとスタイルが自動注入されるため、v2で必須だった@livewireScriptsの手書きは基本不要になりました。ただし自動注入は<head>と</body>を持つレイアウトが前提です。どちらかが欠けると注入されず、エラーも出ないまま何も動かないため気づきにくいので注意してください。

composer require livewire/livewire
php artisan make:livewire Counter

生成された<livewire:counter />を任意のBladeに置けば描画されます。

カウンター機能で理解するプロパティとアクションの実装例

publicプロパティが状態、publicメソッドがアクションです。プロパティは自動でビューに共有され、メソッドが呼ばれるたびにrenderが走って差分が返ります。

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

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

    public function render()
    {
        return view('livewire.counter');
    }
}

ビュー側は<button wire:click="increment">+</button>と{{ $count }}だけ。クリックが即座に数値へ反映されれば成功です。

本番運用で陥りやすいwire:model遅延と再レンダリング過多の対処法

Livewireで最初にハマるのが、入力が反映されない、あるいは逆にリクエストが飛びすぎる問題です。原因の多くはv2とv3の仕様変更にあります。

wire:model.liveによる過剰なリクエストが発生する原因と防ぎ方

Livewire 3のwire:modelは既定でdeferred、つまり送信や次のアクション時にまとめて同期します。v2の感覚で置くと「入力しても画面が変わらない」と焦りますが、これは仕様どおりです。逆に一文字ごと反映したくてwire:model.liveを付けると、キーストロークのたびにサーバーへPOSTが飛び、検索ボックスでは負荷が一気に跳ね上がります。リアルタイム表示が要る場面だけwire:model.live.debounce.500msで間引くのが実務の落としどころです。

ネットワークタブで確認するLivewireリクエストの検証方法

本当に減ったかは推測せず、目で確かめます。ブラウザの開発者ツールでネットワークタブを開き、Fetch/XHRで絞り込むとlivewire/updateへのリクエストが並びます。

  • 1文字ごとにlivewire/updateが積み上がる → .liveの付けすぎ
  • debounce適用後は、入力停止から一拍おいて1件だけ飛ぶ

レスポンスのJSONには更新後のプロパティとHTML差分が入っています。どのプロパティが同期対象になっているかまで追えるので、意図しない再レンダリングの切り分けに直結します。

カスタマイズに関するお問い合わせはこちら