Laravel スターターキット React / Vue / Livewire 比較
Laravel 公式 3 スターターキット（React / Vue / Livewire）の production 化コストを、CodeLift の Docker 検証結果に基づいて実測値で並べる。
比較対象
Laravel + React Starter Kit を Docker で検証して改良した fork を公開
公式の laravel/react-starter-kit（Inertia + React 19 + shadcn/ui + Fortify）を Docker Desktop で実際に動かし、本番運用に耐える形に書き直したフォークを公開する。ドキュメント不足 2 件と Laravel backend 側の実コード改良 6 件で合計 8 commits、テストは公式版の 40 passed をベースに 44 passed / 151 assertions まで増加。以下は検証…
Vue + InertiaLaravel + Vue Starter Kit を Docker で検証して改良した fork を公開
公式の laravel/vue-starter-kit（Inertia + Vue 3 + shadcn-vue + Fortify）を Docker で動かし、本番運用に耐える形に書き直したフォークを公開する。結果は React 版と完全対応の 8 commits（Laravel backend が両 Starter で共通なので findings も同一）、テストは 40 passed → 44 passed / 151 assertions。Vue 独自に知りたい人が…
Livewire + FluxLaravel + Livewire Starter Kit を Docker で検証して改良した fork を公開
公式の laravel/livewire-starter-kit（Livewire v4 + Flux + Alpine）を Docker Desktop で動かし、本番運用に耐える形に書き直したフォークを公開する。テストは公式版の 33 passed をベースに 37 passed / 92 assertions まで増加、改良は 7 commits。React / Vue 版とは findings の構成が違う点が Livewire 変種の特徴で、本記事はその差分を中心…
比較の目的
Laravel 公式の 3 スターターキット（React / Vue / Livewire）を、CodeLift が実施した Docker 検証＋改良版フォークの結果に基づいて並べる。選定判断と、それぞれに必要な production 化作業量を一目で見れるようにした。
いずれも Laravel backend は共通だが、フロントエンド層の作りが違うため、本番化のために追加が必要な commits の数と中身が少しずつズレる。以下のテーブルはすべて CodeLift が 2026-04-19 時点で実測した数値。
スタック比較
| 項目 | React | Vue | Livewire |
|---|---|---|---|
| フロントエンド | React 19 + Inertia | Vue 3 + Inertia | Livewire v4 + Flux + Alpine |
| UI コンポーネント | shadcn/ui | shadcn-vue | Flux UI |
| 型システム | TypeScript | TypeScript | （サーバサイドは PHP） |
| ビルドプラグイン | @laravel/vite-plugin-wayfinder あり |
@laravel/vite-plugin-wayfinder あり |
無し |
| 初期 state の埋込方法 | Inertia が inline <script> に serialize |
同左 | HTML 要素の wire:* 属性で保持（inline script 不要） |
| デフォルト middleware stack | Inertia 系 3 つ append 済み | 同左 | 空（何も append されていない） |
本番化の作業量（CodeLift 改良版の実測）
| 指標 | React | Vue | Livewire |
|---|---|---|---|
| 公式版テスト | 40 passed (136 assertions) | 40 passed (136 assertions) | 33 passed (77 assertions) |
| 改良版テスト | 44 passed (151 assertions) | 44 passed (151 assertions) | 37 passed (92 assertions) |
| 改良 commits 数 | 8 | 8 | 7 |
CSP 'unsafe-inline' 撤廃 |
Inertia 側の改修が必要 → 保留 | 同左、保留 | 可能（別ブランチで実施済み → 詳細） |
| settings endpoints の throttle | Route::patch/delete に throttle:... で簡単に付く |
同左 | Route::livewire(...) 経由なのでコンポーネント内で RateLimiter を呼ぶ必要あり → 保留 |
改良 commits の内訳
| Finding | React | Vue | Livewire |
|---|---|---|---|
A. composer install 前の npm run build で落ちる |
✅ README 修正 | ✅ README 修正 | ⚠ wayfinder なしなので事象は起きないが Setup セクション追加 |
B. .env.example に production 値ヒントなし |
✅ | ✅ | ✅ |
C. config/app.php timezone ハードコード |
✅ | ✅ | ✅ |
| D. security response headers が無い | ✅（Inertia 系 3 middleware の後ろに append） | ✅ | ✅（空の middleware stack に最初の append） |
E. URL::forceScheme('https') が無い |
✅ | ✅ | ✅ |
| F. パスワード強度ルール | ⊘ 既対応 | ⊘ 既対応 | ⊘ 既対応 |
| G. ログインのレート制限が単段 | ✅ 2 段化 | ✅ 2 段化 | ✅ 2 段化 |
| H. 2FA 強制ポリシー | ⊘ 設計判断 | ⊘ 設計判断 | ⊘ 設計判断 |
| I. 認証ログチャンネルが独立していない | ✅ auth 専用 channel |
✅ | ✅ |
| J. settings endpoints の throttle 漏れ | ✅ throttle:10,1 + throttle:3,1 |
✅ 同じ | ⚠ Route::livewire 経由なので commit の形状が違う、保留 |
選定の決め手
フロントエンドを TypeScript + SPA 感で書きたい → React か Vue 両者の Laravel backend hardening コストは同一。選定は UI ライブラリ（shadcn/ui vs shadcn-vue）・チームスキル・既存資産で決めるのが合理的。
PHP でフロント込みで完結させたい / Blade 中心 → Livewire
backend hardening の初期コストは React/Vue と同等だが、CSP を本気で絞るなら Livewire が有利（inline initial state が無いので nonce-based CSP に移行しやすい）。一方で Route::livewire 経由のレート制限などはコンポーネント側で書く必要があり、別の作業コストが乗る。
監査要件が強い（CSP 厳格化、observability、audit log）
Livewire → CSP nonce の独立記事まで含めると最も奥まで絞れる。React/Vue は Inertia SSR 化または HandleInertiaRequests 改造が追加で必要。
実装コストの合計所感（CodeLift の 1 pass 体感）
| React | Vue | Livewire | |
|---|---|---|---|
| 基本 hardening（7-8 findings） | 1 日 | 1 日（React から全流用） | 1 日 |
CSP nonce 化（'unsafe-inline' 撤廃） |
中（Inertia 改修が要る） | 中 | 小（別記事で実施済み） |
| Livewire コンポーネント rate limit | n/a | n/a | 中（コンポーネントごとに書く） |