Laravel 10 + Breezeで簡単ログイン機能を実装！初心者向けガイド

2025年2月24日 最終更新日時 : 2025年2月26日 Takamizawa

1. はじめに（導入）

Webアプリケーションを開発する際、ユーザーの認証機能はほぼ必須の要素です。しかし、ログイン機能をゼロから実装しようとすると、ユーザー管理やセッション管理、パスワードのハッシュ化など、考慮すべき点が多くなります。

Laravelには、こうした認証機能を簡単に導入できる仕組みがいくつか用意されています。その中でも 「Breeze」 は、最もシンプルで手軽に導入できる認証システムの一つです。Breezeを使用すると、ログインやユーザー登録、パスワードリセットなどの基本的な認証機能をわずか数ステップで実装できます。

この記事で学べること

この記事では、Laravel 10 に Breeze を導入し、ログイン画面を手早く作成する方法を詳しく解説します。具体的には、以下の内容を扱います：

  • Breezeの概要とメリット
  • Laravel 10 で Breeze をセットアップする手順
  • 生成されたログイン画面の確認
  • ログイン後のリダイレクトやデザインのカスタマイズ方法

初心者の方でも迷わず進められるように、コマンドやコードの解説を交えながら説明します。

それでは、まず Breeze の基本について見ていきましょう！

2. Breezeとは？

Breezeとは？

Breezeは、Laravel公式が提供する認証パッケージの一つで、シンプルなログイン・ユーザー登録機能をすぐに導入できるのが特徴です。Laravelのデフォルト認証機能を最小限の構成で実装し、扱いやすいBladeテンプレートを採用しているため、カスタマイズもしやすくなっています。

なぜBreezeを使うのか？

Laravelには、認証を実装するための他の選択肢もあります。例えば、以下のようなものがあります。

認証方法特徴
Breezeシンプルで使いやすく、最小構成の認証機能を提供。Blade + Tailwind CSSを使用。
Fortifyフロントエンドなしの認証バックエンドのみを提供。SPA（Vue/React）向け。
JetstreamFortifyを基盤に、Teams機能なども追加された強力な認証システム。LivewireまたはInertia.jsを使用。

Breezeは、**「とにかく手早くログイン機能を導入したい」「Bladeテンプレートでサクッと実装したい」**という場合に最適です。

Breezeの主な機能

Breezeを導入すると、以下の認証機能が自動的にセットアップされます。

  • ユーザー登録（Register）
  • ログイン（Login）
  • ログアウト（Logout）
  • パスワードリセット（Forgot Password & Reset Password）
  • メール認証（Email Verification）

また、BreezeはTailwind CSSを標準採用しているため、デザインをカスタマイズしやすいのもポイントです。

3. Laravel 10 + Breeze のセットアップ

ここでは、Laravel 10 に Breeze を導入し、ログイン機能を実装する手順を説明します。初心者でも迷わないように、コマンドごとに解説していきます！

1. Laravel 10 のインストール

まず、Laravel 10 の新しいプロジェクトを作成します。

① Composerを使ってLaravelをインストール

ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行してください。

composer create-project --prefer-dist laravel/laravel my-laravel-app

my-laravel-app はプロジェクトの名前なので、任意の名前に変更してOKです。

② プロジェクトディレクトリに移動

インストールが完了したら、作成したディレクトリに移動します。

cd my-laravel-app

③ アプリケーションキーを設定

Laravelの環境設定ファイル（.env）を作成し、アプリケーションキーを生成します。

cp .env.example .env
php artisan key:generate

2. Breeze のインストールとセットアップ

Laravel の準備ができたら、Breeze をインストールしましょう。

① Breezeをインストール

以下のコマンドを実行し、Breezeをプロジェクトに追加します。

composer require laravel/breeze --dev

② Breezeのセットアップ

次に、Breezeをセットアップして認証機能をインストールします。

php artisan breeze:install

このコマンドを実行すると、以下のようなファイルやフォルダが自動生成されます。

  • routes/auth.php（認証関連のルーティング）
  • resources/views/auth/（ログイン・登録画面のBladeテンプレート）
  • app/Http/Controllers/Auth/（認証関連のコントローラー）

Breezeはデフォルトで Blade + Tailwind CSS を使用しています。もし、VueやReactを使いたい場合は、次のようにオプションを付けて実行できます。

php artisan breeze:install vue  # Vue.js 版  
php artisan breeze:install react  # React 版

③ 必要なマイグレーションを実行

データベースに必要なテーブルを作成するために、マイグレーションを実行します。

php artisan migrate

これで、ユーザー情報を保存する users テーブル や、パスワードリセット用の password_resets テーブル などが作成されます。

3. ローカルサーバーを起動して確認

すべてのセットアップが完了したら、Laravelの開発用サーバーを起動して、Breezeの認証機能を確認しましょう。

php artisan serve

ブラウザで http://127.0.0.1:8000 にアクセスすると、デフォルトのログイン画面やユーザー登録画面が表示されるはずです。

これで、Breezeを使った認証機能のセットアップが完了しました！次は、実際に生成されたログイン画面を見てみましょう。

4. ログイン画面を確認してみよう

Breeze のインストールが完了したら、実際にどのようなログイン画面や認証機能が生成されるのか確認してみましょう。

1. ログイン画面を表示する

Laravel の開発用サーバーを起動して、ブラウザでログイン画面を開きます。

php artisan serve

この状態で、ブラウザのアドレスバーに以下のURLを入力してください。

http://127.0.0.1:8000/login

すると、Breezeによって自動生成された ログイン画面 が表示されます。

2. ユーザー登録を試してみる

まだユーザーがいないため、まずは新規登録をしてみましょう。

  1. /register ページにアクセス（http://127.0.0.1:8000/register）
  2. 名前、メールアドレス、パスワードを入力
  3. 「Register」ボタンをクリック

登録が成功すると、自動的にログインした状態になり、ホーム画面（/dashboard）にリダイレクトされます。

3. ログイン機能をテストする

ユーザー登録ができたら、いったんログアウトして、ログイン機能をテストしてみましょう。

  1. 画面右上の「Logout」ボタンをクリック
  2. /login ページにアクセス
  3. 登録したメールアドレスとパスワードを入力
  4. 「Login」ボタンをクリック

正しい情報を入力すると、再び /dashboard にリダイレクトされ、ログイン成功となります。

4. ログイン画面の構成

Breeze で作成されたログイン画面は、以下のようなシンプルな構成になっています。

  • resources/views/auth/login.blade.php → ログインページのテンプレート
  • app/Http/Controllers/Auth/AuthenticatedSessionController.php → ログイン処理を担当
  • Tailwind CSS でデザイン されているため、スタイルを簡単に変更可能

5. パスワードリセット機能

Breeze には パスワードリセット機能 も最初から組み込まれています。
ログイン画面の「Forgot your password?」リンクをクリックすると、パスワードリセット用のページに移動できます。

パスワードリセットの流れ：

  1. /forgot-password にアクセス
  2. 登録済みのメールアドレスを入力して送信
  3. メールが届くので、記載されたリンクをクリック
  4. 新しいパスワードを入力して、リセット完了！

このように、Breeze だけで ユーザー認証に必要な基本機能がすべて揃っている ことがわかります。

これで、ログイン画面や認証機能の確認ができました！次は、Breeze のカスタマイズ方法について解説していきます。

5. 便利なカスタマイズ

Breeze をそのまま使うだけでも十分ですが、実際のプロジェクトでは ログイン後のリダイレクト先を変更したり、デザインをカスタマイズしたり することが多いです。ここでは、便利なカスタマイズ方法を紹介します。

1. ログイン後のリダイレクト先を変更する

Breezeをインストールした状態では、ログイン後のリダイレクト先が /dashboard に設定されています。
このリダイレクト先を変更したい場合は、以下のファイルを編集します。

変更するファイル： app/Providers/RouteServiceProvider.php

public const HOME = '/home'; // 変更したいURLを指定

例えば、トップページ（/）にリダイレクトしたい場合は、次のように変更します。

public const HOME = '/';

変更を適用するには、サーバーを再起動してください。

php artisan serve

これで、ログイン後に指定したページへリダイレクトされるようになります。

2. ログインページのデザインを変更する

Breeze のログイン画面は Tailwind CSS を使ってスタイリングされています。デザインを変更したい場合は、以下のファイルを編集します。

変更するファイル： resources/views/auth/login.blade.php

例えば、ログインボタンの色を変えたい場合は、次のように class を修正します。

変更前（デフォルトのボタン）

<button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Log in
</button>

変更後（ボタンの色を緑に変更）

<button class="w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
    Log in
</button>

また、ページのタイトルを変更する場合は、以下のコードを修正します。

<x-slot name="title">
    ログインページへようこそ！
</x-slot>

3. ナビゲーションバーをカスタマイズする

ログイン状態によってナビゲーションバーの表示を変更したい場合は、
resources/views/layouts/navigation.blade.php を編集します。

ログイン状態に応じてメニューを表示

@auth
    <a href="{{ route('dashboard') }}">ダッシュボード</a>
    <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button type="submit">ログアウト</button>
    </form>
@else
    <a href="{{ route('login') }}">ログイン</a>
    <a href="{{ route('register') }}">新規登録</a>
@endauth

このように @auth を使うことで、ログイン状態によって表示を切り替えることができます。

4. ルート（URL）の変更

Breeze では、認証関連のルートが routes/auth.php に定義されています。
例えば、/login のURLを /signin に変更したい場合は、以下のファイルを編集します。

変更するファイル： routes/auth.php

Route::get('/signin', [AuthenticatedSessionController::class, 'create'])
    ->name('login');

これで、ログインページのURLが /signin に変更されます。

5. まとめ

  • ログイン後のリダイレクト先は RouteServiceProvider.php で変更できる
  • ログインページのデザインは Bladeテンプレート を編集すれば簡単に変更可能
  • ナビゲーションバーの表示をログイン状態によって切り替えられる
  • Breezeの認証ルートは routes/auth.php で自由に変更できる

これらのカスタマイズを組み合わせることで、Laravel Breeze の認証機能をより実践的に使いやすくできます！

6. まとめ

この記事では、Laravel 10 に Breeze を導入し、簡単にログイン機能を実装する方法を紹介しました。

この記事の振り返り

✔ Breezeとは？
　→ Laravel公式のシンプルな認証パッケージで、すぐにログイン機能を追加できる

✔ Laravel 10 + Breeze のセットアップ
　→ Laravelプロジェクトの作成 → Breezeのインストール → マイグレーション実行 でログイン機能が完成

✔ ログイン画面の確認
　→ http://127.0.0.1:8000/login にアクセスして、ユーザー登録・ログインを試す

✔ 便利なカスタマイズ
　→ ログイン後のリダイレクト変更、デザインの調整、ナビゲーションのカスタマイズ などが簡単にできる

Breezeを使うメリット

  • 最短ステップで認証機能を導入できる
  • Bladeテンプレート & Tailwind CSS で簡単にデザイン変更できる
  • 必要に応じてカスタマイズしやすい

「とにかく手軽にログイン機能を実装したい！」という場合は、Breezeが最適な選択肢です。

次にやるべきこと

Breezeを導入できたら、次のステップとして以下のカスタマイズを試してみましょう！

✅ 管理者・一般ユーザーでアクセス制御をする
✅ GoogleやGitHubログイン（SNS認証）を追加する
✅ メール認証を有効にしてセキュリティを強化する

これらのカスタマイズについても、今後の記事で解説予定です！

Laravel Breezeを活用して、ぜひ効率よく認証機能を実装してみてください！

カテゴリー
Laravel

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
「初心者でも10分！」Jupyter Notebook＆ディープラーニング環境構築
2025年2月23日
次の記事
【npmコマンド】npm install && npm run dev 実行時にエラーが発生する際の対応方法
2025年2月24日