> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# ⚡Livewire 4入門 — JavaScriptなしでリアクティブなUIを作る
> LaravelのファーストパーティパッケージLivewire 4を使って、JavaScriptを書かずにインタラクティブなUIを構築する方法を、インストールから実践的なコード例まで解説します。
## Livewireとは
Laravelで動的なUIを作ろうとすると、以前はVue.jsやReactなどのJavaScriptフレームワークを組み合わせるか、自分でAJAXリクエストを書くしかありませんでした。
**Livewire**はその問題を解決するLaravel用パッケージです。PHPとBladeだけでリアクティブなUIを構築できます。フォームのリアルタイムバリデーション、ライブ検索、カウンターなど、従来であればJavaScriptが必要だった機能を、すべてPHPで実装できます。
Livewire 4はLaravel 10以降、PHP 8.1以降で動作します。現在の最新バージョンはLivewire 4です。
### 仕組みの概要
Livewireコンポーネントはサーバー上のPHPクラスとBladeテンプレートの組み合わせです。ユーザーがボタンをクリックしたりフォームに入力したりすると、Livewireは裏側でAJAXリクエストを送り、PHPを実行し、変更された部分だけをページに反映します。開発者はこの仕組みを意識することなく、PHPのみで記述できます。
***
## インストール
Laravelアプリケーションのルートディレクトリで以下のコマンドを実行します。
```shell theme={null}
composer require livewire/livewire
```
Laravelのパッケージ自動検出が有効なので、追加の設定は不要です。
### レイアウトファイルの作成
フルページコンポーネントとして使う場合はレイアウトファイルが必要です。以下のArtisanコマンドで生成できます。
```shell theme={null}
php artisan livewire:layout
```
`resources/views/layouts/app.blade.php` が生成されます。
```blade theme={null}
{{ $title ?? config('app.name') }}
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
{{ $slot }}
@livewireScripts
```
`@livewireStyles` と `@livewireScripts` が、LiverwireとAlpine.jsのアセットを自動で読み込みます。
***
## 最初のコンポーネント
Livewireコンポーネントを生成するArtisanコマンドが用意されています。シンプルなカウンターを作ってみましょう。
```shell theme={null}
php artisan make:livewire Counter
```
このコマンドで `resources/views/components/⚡counter.blade.php` という単一ファイルコンポーネントが生成されます。
ファイル名の ⚡ はLivewireコンポーネントをひと目で識別するためのものです。エディタでの視認性が上がります。不要であれば設定で無効にできます。
生成されたファイルを次のように編集します。
```blade theme={null}
count++;
}
public function decrement(): void
{
$this->count--;
}
};
?>
カウント: {{ $count }}
```
Bladeテンプレートにこのコンポーネントを埋め込むには、通常のBladeコンポーネント構文を使います。
```blade theme={null}
```
ボタンをクリックするたびにページリロードなしでカウントが更新されます。`wire:click` がJavaScriptの代わりにPHPメソッドを呼び出す仕組みです。
***
## プロパティとアクション
### プロパティ — `wire:model`
`wire:model` ディレクティブで、入力要素とコンポーネントのプロパティを双方向バインドできます。
```blade theme={null}
```
デフォルトでは `wire:model` はアクション（フォーム送信など）が実行されたときにのみサーバーと同期します。入力のたびに同期させたい場合は `.live` 修飾子を追加します。
| 記法 | 挙動 |
| ---------------------- | ------------------------------ |
| `wire:model` | アクション実行時（フォーム送信など）にのみ同期（デフォルト） |
| `wire:model.live` | 入力のたびにリクエストを送信 |
| `wire:model.blur` | フォーカスを外れたときに同期（リクエストは発生しない） |
| `wire:model.live.blur` | フォーカスを外れたときにリクエストを送信 |
### アクション — `wire:click`、`wire:submit`
`wire:click` はクリックイベント、`wire:submit` はフォームの送信イベントにメソッドを紐付けます。
```blade theme={null}
$this->taskName]);
$this->taskName = '';
}
public function render()
{
return $this->view([
'tasks' => Task::latest()->get(),
]);
}
};
?>
@foreach ($tasks as $task)
- {{ $task->name }}
@endforeach
```
***
## リアルタイムバリデーション
Livewire 4では `#[Validate]` アトリビュートでプロパティにバリデーションルールを直接定義できます。
```blade theme={null}
validate();
Post::create([
'title' => $this->title,
'content' => $this->content,
]);
$this->reset(['title', 'content']);
session()->flash('message', '記事を保存しました。');
}
};
?>
@if (session('message'))
{{ session('message') }}
@endif
名前: {{ $name }}
メール: {{ $email }}
```
### `updated()` — プロパティ変更後の処理
プロパティが更新されたあとに処理を挟みたい場合は `updated()` を使います。特定のプロパティに絞る場合はメソッド名に含めます。
```blade theme={null}
username = strtolower($this->username);
}
};
?>
```
入力するたびに自動的に小文字へ変換されます。
***
## Laravelとの統合
### Eloquentモデルの活用
Livewireはプロパティに直接Eloquentモデルを保持できます。
```blade theme={null}
user = $user;
}
#[Validate('required|min:2')]
public string $name = '';
public function save(): void
{
$this->validate();
$this->user->update(['name' => $this->name]);
session()->flash('message', 'プロフィールを更新しました。');
}
public function render()
{
return $this->view();
}
};
?>
@if (session('message'))
{{ session('message') }}
@endif
```
***
## まとめ
Livewireが特に向いているユースケースをまとめます。
| ユースケース | Livewireで実現できること |
| ---------- | --------------------- |
| フォーム処理 | リアルタイムバリデーション、エラー表示 |
| データ一覧 | ライブ検索、ソート、ページネーション |
| カウンターやトグル | ページリロードなしのUI更新 |
| 管理画面 | Eloquentとの直接連携でCRUD操作 |
| ウィザード型フォーム | ステップ管理をPHPで実装 |
Livewireは「Bladeを使ったことがある」Laravelエンジニアなら今日から使い始められます。JavaScriptフレームワークの学習コストなしで、インタラクティブなUIを実現できるのが最大の強みです。
SPA並みの高度なインタラクションが必要な場面ではInertia.jsが向いていますが、フォームや管理画面、データテーブルのような用途であればLivewireの方がシンプルに実装できることが多いです。まず小さなコンポーネント一つから試してみてください。
Livewireの全機能（ファイルアップロード、ページネーション、テストなど）については公式ドキュメントを参照してください。