Livewire（Laravel）とは？v4対応の使い方とコンポーネント作成・Blade連携の手順

Livewireは、LaravelアプリケーションにJavaScriptをほとんど書かずに動的なUIを組み込むためのフルスタックフレームワークです。フォームの即時反映、リアルタイム検索、ページ遷移なしの画面更新を、PHPとBladeだけで実装できます。2026年1月14日にメジャーアップデートのv4.0.0が公開され、本記事執筆時点の最新は2026年6月27日リリースのv4.3.3です。v4では単一ファイルコンポーネントが標準になり、旧v2の書き方はそのままでは動きません。この記事では、Livewireの仕組みから最新v4でのインストール・コンポーネント作成・Blade連携・データバインディング、そしてVueやReactとの使い分けまでを、公式ドキュメントの仕様に沿って解説します。

まとめ：Livewire（Laravel）v4の要点

先に結論を整理します。

• 最新はv4.3.3（2026年6月27日）。v4.0.0は2026年1月14日公開で、動作要件はPHP 8.1以上・Laravel 10以上。
• 導入はcomposer require livewire/livewireのみ。CSSとJavaScriptは自動で読み込まれ、v2で必須だった@livewireStyles・@livewireScriptsの手動記述は不要。
• v4ではmake:livewireで作る単一ファイルコンポーネント（SFC）が標準。従来のクラスベース（名前空間App\Livewire）も併用できる。
• Bladeへは<livewire:名前 />タグで埋め込む。
• wire:modelはv3以降「入力時は送信しない（遅延）」が既定。入力と同時に反映したいときはwire:model.liveを使う（v2から挙動が反転）。
• 管理画面やCRUDなどLaravel中心の開発に向く。高頻度なクライアント操作が主役の画面はVue/Reactが適する。

以下、仕組みからv4での実装手順までを順に解説します。

LivewireがLaravelで動的UIを実現する仕組みとJavaScriptフレームワークとの違い

Livewireの中心にあるのは、コンポーネントの状態をサーバー側で保持し、ユーザー操作のたびにサーバーへリクエストを送って、返ってきたHTMLの差分だけを画面へ反映するという動きです。ブラウザ側の細かいDOM操作はLivewireに同梱されたAlpine.jsが担うため、開発者はPHPのクラスとBladeテンプレートを書くだけで動的な画面を組めます。

サーバーサイドレンダリングで画面を更新する内部動作

ボタンを押すと、Livewireは現在の状態と操作内容をAjaxでサーバーに送ります。サーバーはコンポーネントを再構築してrenderメソッドでHTMLを生成し、Livewireが前回との差分を計算して必要な部分だけ書き換えます。ページ全体はリロードされません。この往復が発生するため、通信のたびにサーバー処理とネットワークのレイテンシが乗る点は、設計時に意識すべき制約です。

Vue・ReactやInertiaとの使い分け

LivewireはPHP側に状態を置くのに対し、VueやReactはブラウザ側で状態を持ちクライアントで描画します。数十ミリ秒単位の応答が求められる操作や、オフラインでも動くUIはクライアント側フレームワークが有利です。一方、LaravelのモデルやバリデーションをそのままUIに繋ぎたい管理画面・業務フォームでは、APIを別途設計せずに済むLivewireのほうが速く書けます。なお、Inertiaは「Vue/Reactを表示層に使いつつLaravelのルーティングで繋ぐ」仕組みで、フロントに本物のSPAを置く点がLivewireと異なります。React連携を具体的に比較したいときはLaravelとReactの連携ガイド、スターターキットでの選択はBreeze・Jetstreamの非推奨とスターターキットへの移行も参照してください。

Livewire 4の新機能とv2・v3からの変更点（2026年最新）

v4.0.0は2026年1月14日に公開されました。旧バージョンで書かれた記事やコードは動作前提が変わっているため、まず何が変わったかを押さえます。

Livewire 4で加わった単一ファイルコンポーネント・Blazeコンパイラ・Islands

v4の目玉は、1つの.blade.phpにクラスとテンプレートをまとめる単一ファイルコンポーネント（SFC）が標準になったことです。加えて、レンダリングを高速化する新コンパイラ「Blaze」、コンポーネント内の一部だけを独立して再描画するIslands、外部ライブラリなしで並べ替えを実装できるwire:sort、クライアント側で即座に反応を返すオプティミスティックUI（wire:show・wire:text）などが加わりました。画面更新のアニメーションは、ブラウザ標準のView Transitions APIを使うwire:transitionに置き換わっています。

v2から移行する際に必ず直す3つの破壊的変更

旧v2の記述はv3以降そのままでは動きません。特に次の3点は、既存の解説記事でも誤りが残りやすい箇所です。

ほかにも、イベント送信がemitからdispatchに変わり、Alpine.jsが標準同梱になりました。v2時代のサンプルをコピーして名前空間やwire:modelがそのままだと、「コンポーネントが見つからない」「入力しても表示が変わらない」といった不具合の原因になります。

Livewireのインストールと動作要件（PHP・Laravelバージョン）

既存のLaravelプロジェクトにComposerで追加します。v4の動作要件はPHP 8.1以上・Laravel 10以上で、Laravel 11〜13でも動作します。

composer require livewire/livewire

パッケージのオートディスカバリが効くため、追加設定なしで使えます。CSSとJavaScriptはLivewireがページへ自動で挿入するので、v2で必要だった@livewireStylesと@livewireScriptsの手動記述は不要です。読み込み位置を明示的に制御したいときだけ、これらのディレクティブを任意で置きます。レイアウトを用意する場合はphp artisan livewire:layoutでresources/views/layouts/app.blade.phpを生成できます。アセットのビルドをViteで管理している場合はLaravelでViteを使う理由と利点も合わせて確認してください。

make:livewireコマンドによるコンポーネント作成とファイル構成

コンポーネントはartisanコマンドで生成します。

php artisan make:livewire counter

単一ファイルコンポーネント（v4既定）の生成と中身

v4ではこのコマンドで単一ファイルコンポーネントが作られ、resources/views/components配下に.blade.phpが1つ生成されます（ファイル名の先頭には⚡が付き、通常のBladeコンポーネントと区別されます）。ファイルの冒頭にクラスを、その下にテンプレートを書きます。

<?php
use Livewire\Component;

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

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

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

publicプロパティが画面と同期する状態、publicメソッドがボタンなどから呼べるアクションです。

クラスベースコンポーネントとの使い分けとディレクトリ配置

従来のクラスベース構成も引き続き使えます。この場合、クラスはapp/Livewire（名前空間App\Livewire）に、ビューはresources/views/livewireに分かれて置かれます。1画面で完結する小さなUIはSFC、ロジックが大きくテストを厚く書くコンポーネントはクラスベース、と分けると管理しやすくなります。v2から引き継いだコードはApp\Http\Livewireのままだとv4で解決されないため、名前空間の移動が必要です。

Bladeビューへの適用と全ページコンポーネントのルーティング

作ったコンポーネントは、Bladeテンプレート内にタグで埋め込みます。

<livewire:counter />

従来の@livewire('counter')という書き方も使えますが、v4のドキュメントはタグ形式を基本としています。v4ではタグを必ず閉じる必要があり、閉じ忘れは描画エラーになります。

Route::livewireとlayout属性による全ページ表示

コンポーネントを1つの画面としてURLに割り当てることもできます。v4では全ページ用のコンポーネントをresources/views/pagesに置き、pages::名前空間を付けてRoute::livewireでルーティングします。

Route::livewire('/posts/create', 'pages::post.create');

レイアウトはコンポーネントに#[Layout('layouts::app')]属性を付けて指定します（既定のレイアウトはresources/views/layouts/app.blade.php）。レイアウト側の{{ $slot }}に、コンポーネントの本文が差し込まれます。

データバインディングと主要ディレクティブ（wire:model.live・wire:submit・wire:poll）

Livewireの動的な挙動は、Bladeに書くwire:から始まるディレクティブで指定します。

wire:modelは既定で遅延、リアルタイムは.liveを付ける

v3以降、wire:modelを付けた入力は、そのままではサーバーへ送信されません。フォーム送信などのアクションが起きたときにまとめて反映される「遅延」が既定です。入力と同時に画面へ反映したいときはwire:model.liveを使います。ここはv2から挙動が反転した部分で、旧記事のwire:modelをコピーすると「入力しても表示が変わらない」原因になります。

wire:clickからのアクション呼び出しとmount・renderのライフサイクル

publicメソッドはwire:clickやwire:submitから呼び出せます。コンポーネントの初期化はコンストラクタではなくmountメソッドで行います（リクエストのたびにインスタンスが作り直されるためです）。renderメソッドが返すBladeが画面になります。wire:pollを付けると一定間隔で自動更新（例：wire:poll.5sで5秒ごと）、wire:loadingで通信中の表示切り替え、wire:navigateでページ遷移をSPA風に高速化できます。

#[Validate]属性による入力バリデーション

入力値の検証は、publicプロパティに#[Validate]属性を付けて宣言します。

use Livewire\Attributes\Validate;

#[Validate('required|min:3')]
public string $title = '';

アクション内で$this->validate()を呼ぶと検証が走り、失敗時はBladeの@error('title')にメッセージが渡ります。実行時に条件を変えたい検証は、rulesメソッドに書く方法もあります。

リアルタイム検索機能をLivewireで実装する手順

入力に応じて一覧を絞り込むリアルタイム検索は、Livewireが得意な典型例です。検索キーワードのプロパティにwire:model.liveを繋ぎ、renderで絞り込み結果を返すだけで実装できます。ここではロジックを持つクラスベースで示します。

namespace App\Livewire;

use Livewire\Component;
use App\Models\Post;

class SearchPosts extends Component
{
    public string $search = '';

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::where('title', 'like', "%{$this->search}%")->get(),
        ]);
    }
}

<div>
    <input type="text" wire:model.live.debounce.300ms="search">
    <ul>
        @foreach ($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>

wire:model.live.debounce.300msとしているのは、1文字打つごとにサーバーへ問い合わせるのを避け、入力が止まって300ミリ秒後にまとめて検索するためです。件数が多いテーブルでは、この間引きが体感速度とサーバー負荷の両方に効きます。WebSocketで複数ユーザー間のリアルタイム更新まで踏み込むなら、Laravel×Pusherの使い方のようなブロードキャストの仕組みと組み合わせます。

Livewireを採用すべき場面と避けるべき場面

Livewireは万能ではありません。向く場面とそうでない場面を、条件付きで整理します。

採用すべきなのは、Laravelを主軸に開発していて、管理画面・業務フォーム・CRUD中心のアプリを少人数で速く作りたい場合です。バックエンドのモデルやバリデーションをそのままUIに繋げるため、別APIとフロント用の状態管理を用意する手間が省けます。表示するデータがサーバー側にあり、更新頻度がユーザー操作単位で足りるなら、Livewireが最短距離です。

避けたほうがよいのは、ドラッグ操作やアニメーションが主役の高頻度なクライアント操作、オフライン動作が必須のアプリ、そしてサーバーとの往復レイテンシが体感を損なう場面です。すべての操作でサーバー往復が発生するLivewireの構造上、通信が不安定な環境や、1秒間に何度も状態が変わるUIには不向きです。この領域はブラウザ側で完結するVue・Reactが適します。「とりあえずLivewire」で始めると後から作り直しになりやすい判断ポイントなので、画面の操作頻度を先に見積もってから選んでください。

よくある質問

Livewireの読み方は？

「ライブワイヤー」と読みます。英語で通電した電線を指す言葉で、Laravel向けのフルスタックフレームワークの名称です。検索では「livewire laravel」「laravel livewire」の両方の語順で使われます。

Livewireは無料で使えますか？

はい。LivewireはMITライセンスのオープンソースソフトウェアで、無料で商用利用できます。作者はAlpine.jsも手がけるCaleb Porzio氏で、Laravelエコシステムの中で開発が続けられています。Tailwind CSS・Alpine.js・Laravelと組み合わせた構成はTALLスタックと呼ばれます。

Livewire 2から3・4へ移行するときの主な注意点は？

特に次の点です。コンポーネントの名前空間をApp\Http\LivewireからApp\Livewireへ移すこと、wire:modelは既定が遅延に変わったため即時反映が必要な箇所にwire:model.liveを付けること、イベント送信をemitからdispatchへ書き換えることです。CSS/JSは自動注入になったため、@livewireStyles・@livewireScriptsの手動記述は削除できます。

LivewireとVue.js・Reactはどちらを選ぶべきですか？

Laravel中心で管理画面や業務系フォームを作るならLivewire、ブラウザ側で完結する高頻度な操作やオフライン対応が要るならVue・Reactが向きます。判断軸は、状態をサーバーとブラウザのどちらに置きたいかです。両者を繋ぐInertiaという選択肢もあり、Vue/Reactの画面をLaravelのルーティングでそのまま扱えます。

wire:modelで入力と同時に画面へ反映するには？

wire:model.liveを使います。v3以降のwire:modelは既定で遅延（アクション実行時に反映）になったため、リアルタイムに同期したい入力欄にはwire:model.liveを指定します。1文字ごとの通信を抑えたい場合はwire:model.live.debounce.500msのように遅延時間を付けます。

関連記事

• LaravelとReactの連携ガイド｜環境構築・SPA・認証・デプロイと選び方
• Laravel Breeze・Jetstreamはなぜ非推奨に？スターターキット（React/Vue/Livewire）への移行と代替案
• LaravelでViteを使用する理由とその利点について詳しく解説
• Laravel 13で正式安定版になったAI SDKの全体像と導入判断の前提知識
• Laravel×Pusherの使い方｜Laravel 13対応の設定手順とReverbとの使い分け