はじめに

Laravel で Web アプリを作り始めるとき、
「Blade？ Livewire？ Vue？何から手を付ければいいの？」
――そんな 超・初学者の迷子 をなくすための記事です。

1. まずは“3つの作り方”だけ覚えよう
2. いちばんカンタンなスターターキット
1. Breeze（ブリーズ）
3. “ちょっと動く”UIを足したい？ → Livewire
4. Vue / React をがっつり書きたい？ → Inertia.js
5. ビルドツールは Vite 一択
6. CSS はほぼ Tailwind
7. 認証まわりで出てくる単語メモ
8. まとめ – これだけやれば失敗しない

1. まずは“3つの作り方”だけ覚えよう

作り方	ざっくり説明	例えると…
Blade だけ	HTML を書く場所が Blade、ロジックは PHP。ページ遷移はふつうのリロード。	WordPress の「テーマを PHP で組む」感覚
Livewire	Blade を拡張して、クリック時などに PHP が自動で走る。 JS ほぼ不要。	jQuery を書かなくても動く「魔法の Blade」
Inertia.js + Vue/React	画面は Vue/React コンポーネント、ルーティングは Laravel が担当。	Laravel ＝給湯器 Vue/React ＝シャワーヘッド

ポイント
最初は Blade → 慣れたら Livewire → JS を極めたくなったら Inertia の順で十分です。

2. いちばんカンタンなスターターキット

Breeze（ブリーズ）

認証付きの雛形を 5 分で用意
CSS は Tailwind、ビルドは Vite ――すべて標準設定済み

# 1) プロジェクトを作成
laravel new sample-app      # または composer create-project laravel/laravel sample-app
cd sample-app

# 2) Breeze をインストール
composer require laravel/breeze --dev
php artisan breeze:install blade   # ←「blade」を選ぶだけ！

# 3) 依存パッケージを入れてビルド
npm install
npm run dev   # 開発用サーバー + 自動リロード
php artisan serve

これで ログイン・登録・パスワード再設定が完成。
「まず動かしたい」なら Breeze だけで OK！

3. “ちょっと動く”UIを足したい？ → Livewire

● HTML は Blade のまま
● wire:click="メソッド名" と書くだけで、クリック時に PHP が走る

composer require livewire/livewire

Blade 例:

<div>
    <button wire:click="increment">＋</button>
    <h1>{{ $count }}</h1>
</div>

PHP 例（app/Http/Livewire/Counter.php）:

class Counter extends Component {
    public $count = 0;
    public function increment() { $this->count++; }
    public function render() { return view('livewire.counter'); }
}

jQuery も Vue も書かずに リアルタイム更新 が完成します。
「フォーム送信で画面が全部リロードされるのはイヤ」というときに最適。

4. Vue / React をがっつり書きたい？ → Inertia.js

Laravel 側

composer require inertiajs/inertia-laravel

フロント側

npm install @inertiajs/inertia @inertiajs/inertia-vue3 # または -react

ルートはいつも通り web.php に書き、
コントローラで return Inertia::render('Dashboard') と返すだけ。

画面遷移は SPA のように速く、URL は Laravel が握るので 認証やミドルウェアをそのまま使える のが魅力です。

5. ビルドツールは Vite 一択

Laravel 9 以降はデフォルト採用
保存→ブラウザ即時反映（HMR）が爆速
旧式の Mix からの移行は php artisan vite:install でほぼ終わり

→ 迷ったら「Vite で動くかどうか」だけチェックしましょう。

6. CSS はほぼ Tailwind

Breeze・Jetstream など公式スターターは Tailwind 前提。
「クラス名を付けるだけ」でデザインが即反映されるので初心者も迷いません。

7. 認証まわりで出てくる単語メモ

用語	何をしてくれる？	初心者なら
Breeze	最小限の認証 + UI	まずコレ！
Jetstream	2要素認証・チーム機能まで全部入り	後で必要なら
Sanctum	API／SPA 用のトークン認証	モバイル連携で
Fortify	UI なしの認証エンジン	「自分で画面を全部作る」時に