🌱 超初心者向け：Laravelで30分！ログイン／ログアウト／新規ユーザー登録を実装する手順（XAMPP／Windows）

この投稿を見れば、誰でも詰まらず動かせます ✅
ゴール：

• /register で新規ユーザー登録
• /login でログイン
• 右上からログアウト
• ダッシュボードに「ようこそ〇〇さん！」が表示

---

🚀 Laravel開発前にやるべき最終確認リスト

# ✅ phpMyAdminアクセス確認（ブラウザで開く）
# http://localhost/phpmyadmin/

# ✅ Composerインストール確認
composer -V

# ✅ Laravel開発サーバー起動確認
php artisan serve
# → ブラウザで http://localhost:8000

これで PHP / MySQL / Apache / Composer / Laravel が正しく動いていることを最小限の手順で確認できます ✅

✅ 1. 新規プロジェクト作成

cd C:\xampp\htdocs
composer create-project laravel/laravel auth-sample
cd auth-sample

---

✅ 2. phpMyAdminでデータベース作成

1. ブラウザで http://localhost/phpmyadmin を開く
2. 左上の 「新規作成」 をクリック
3. データベース名 に auth_sample_db と入力
4. 照合順序はそのまま（utf8mb4_general_ci）でOK
5. 作成 をクリック

---

✅ 3. .env を編集

プロジェクト直下の .env を開いて、以下のように修正：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auth_sample_db
DB_USERNAME=root
DB_PASSWORD=

APP_ENV=local
APP_DEBUG=true

APP_KEY=base64:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=

👉 APP_KEY はプロジェクト作成時に自動生成されるのでそのままでOK

---

✅ 4. Breeze（Blade版）を導入

composer require laravel/breeze --dev
php artisan breeze:install blade

👉 これだけで「ユーザー登録」「ログイン」「ログアウト」の画面が自動生成されます。
👉 Node.js は不要！ → デフォルトのビルド済みCSS/JSが public/build に入っているため、最低限の見た目もついてきます。

---

✅ 5. マイグレーション実行（テーブル作成）

php artisan migrate

👉 これで users テーブルなどが DB に作成され、ユーザー登録が可能になります。

---

✅ 6. サーバーを起動

php artisan serve

👉 ブラウザで http://127.0.0.1:8000 を開く

• http://127.0.0.1:8000/register → 新規ユーザー登録
• http://127.0.0.1:8000/login → ログイン
• 右上からログアウト

---

✅ 7. ダッシュボードに「ようこそ〇〇さん！」を表示

resources/views/dashboard.blade.php を丸ごと以下に置き換え：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    
                    {{-- 追加した歓迎メッセージ --}}
                    <h2 class="text-lg font-medium text-gray-900">
                        ようこそ、{{ Auth::user()->name }} さん！🎉
                    </h2>
                    <p class="mt-1 text-sm text-gray-600">
                        ログイン／ログアウト／新規登録が正しく動作しています。
                    </p>

                    {{-- Breeze 既定のメッセージ --}}
                    {{ __("You're logged in!") }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

---

🎉 成功チェックリスト

• /register でユーザー作成 → 自動で /dashboard へ
• /login でログインできる
• 右上からログアウトできる
• ダッシュボードに 「ようこそ〇〇さん！」 が表示される

---

🔎 よくある詰まりポイント

• APPLICATION IN PRODUCTION. と出る → .env の APP_ENV=local を確認
• php artisan migrate でエラー → MySQLが起動しているか確認
• デザインが白黒すぎる → 任意で npm install → npm run dev を実行すればTailwind CSSがフルで反映される

---

✅ まとめ

• Node.js不要でサクッと動かせる！
• Breezeを導入すれば 30分でログイン／ログアウト／新規登録が完成
• 成功体験を得たあとで、余裕があれば npm run dev でデザイン強化に進めばOK

---