ねぇねぇ、おじさ～ん♡ Livewire 4 がマジでヤバいんだけど？！
3 行でわかる Livewire 4
- 超高速描画エンジン Blaze でページ表示がビュンビュン💨
- デフォルトが SFC（単一ファイルコンポーネント） に変わってスッキリ✨
Livewire::visit()とか@islandとか、開発体験がド級に盛れてる♡
そもそも何が起きたの？
Caleb 兄貴が Laracon US 2025 で Livewire 4 をドーンと発表。
「速さと DX、どっちも盛っちゃうぞ☆」って感じで会場ざわざわだったんだよね。
新機能をサクッと覗き見しよっか？
✨ Blaze：レンダリングが爆速化
「Vue？React？ いやいや、Blaze だろ？」ってノリ。
DOM 差分をギュッと最適化して、Livewire 3 より体感で数倍速いらしいわよ、おじさ～ん♡
📂 SFC がデフォルト化
| artisan コマンド | 生成される構成 | どんな時に使う？ |
|---|---|---|
php artisan make:livewire Post/Show |
SFC：Blade+PHP+JS が 1 ファイルに集合☆ | さくっと作りたい時 |
php artisan make:livewire Post/Show --mfc |
MFC：Blade/ PHP/ JS が分割 | デカめの UI とか JS ゴリゴリ書く時 |
| 略語 | フルネーム | ざっくり言うと | 生成コマンド例 |
|---|---|---|---|
| SFC | Single File Component | Blade・PHP クラス・（必要なら）JS が 1 ファイルに全部入り！ 軽めの UI をサクッと作りたい時に最適♡ |
php artisan make:livewire Post/Show |
| MFC | Multi-File Component | Blade ビュー、PHP クラス、JS モジュールを分割して同じフォルダに配置。 ロジックや UI が大きくなるならこっちが安心◎ |
php artisan make:livewire Post/Show --mfc |
分割派も安心！
--mfc付ければいつでも逃げられるぞ♡
豆知識♡
Livewire 4 で php artisan make:livewire Xxx を叩くと出てくる SFC は、Livewire 3 時代の
php artisan make:volt Xxx --class で生成されていた クラス付き Volt ファイル とほぼ同じ構成だよ。
──Blade・PHP クラス・必要なら JS が 1 ファイルにギュッと詰まってるタイプだから、「Volt (--class) 相当」と覚えておけば OK！
🧪 Livewire::visit() でブラウザテストがチョロい
it('カウンター増える？', function () {
Livewire::visit(Counter::class)
->assertSee(0)
->click('@increment-btn')
->assertSee(1);
});
Playwright ＆ Pest 4 と組み合わせて UI テストが爆誕。
「E2E ツライ…」とか泣いてたヤツ、これで黙らせよ♪
🏝️ @island ディレクティブ
重たいところだけ Island Architecture で隔離！
<div>
@island(lazy: true, poll: '5s')
<expensive-chart :data="$metrics" />
@endisland
</div>
-
lazy: trueで後から読み込み💤 -
poll: '5s'で 5 秒おきに最新化🚀
🎛️ Component Slots
{{ $slot }} が Livewire でも解禁！
もう Blade レイアウトと同じノリでパーツ挿げ替え放題っしょ？
移行コスト？ ビビんないで！
Caleb 兄貴いわく
「破壊的変更は極力ナシ！」
Livewire 3→4 のアップグレードは “おやつの時間” レベルだとか。
公式ガイド待ちつつ、余裕ぶっこいて OK👌
まとめ：Livewire 4、使わない理由ある？
- Blaze で速い
- SFC でスリム
- テストも DX もモリモリ
…ね？ 触るしかなくない？
早く試して「こんなん余裕～♪」ってドヤろ🫶
参考リンク
※ 本記事は上記英語記事をメスガキ流に要約したものだよ。