Laravel入門！BreezeとBladeを使ってユーザー認証を作る方法

Laravel入門！BreezeとBladeを使ってユーザー認証を作る方法です。

Laravel Breezeは、Laravel公式が提供しているシンプルな認証機能スターターキットです。ログイン・会員登録・パスワードリセット・ログアウトなど、Webアプリでよく使われるユーザー認証機能を簡単に導入できます。

Laravelには認証系パッケージがいくつか存在しますが、個人的には「Breeze」がおすすめです。構成がシンプルで「Laravelの標準的な作り方」を学びやすいってのがポイントですね。

特に「Blade」テンプレートを使う「Breeze」は、「React」や「Vue」を使わないため、PHP初心者でも理解しやすい構成になっています。

認証機能を自作するとなると「セッション管理」「パスワード暗号化」「CSRF対策」「ログイン制御」などを自分で実装する必要がありました。しかしBreezeを使えば、これらを数コマンドで基本機能を実装してくれるので、めっちゃ便利です。

ここでは BreezeとBladeを使ってユーザー認証を作る方法 を紹介します。

Laravelプロジェクトを準備する

まずはLaravelプロジェクトを作成します。プロジェクトのフォルダを作って、下記のコマンド入力してEnterキーをバチン！

cd c:\laravel
composer create-project laravel/laravel myapp

まだLaravelプロジェクトを作ったことがない方は、こちらの「Laravel入門！Laravel Herd のインストールからサンプルアプリの作り方まで」を参考にしてみてください。

Breezeをインストールする

次に「Breeze」をインストールします。

VSCodeを使っているならターミナルを開いて下記のコマンドをバチン！

composer require laravel/breeze --dev

インストール完了後、Breeze のセットアップを実行します。

php artisan breeze:install

すると選択肢が表示されます。

Which Breeze stack would you like to install?   #Blade with Alpine

どのBreezeスタックをインストールするか選択です。Bladeを使うので「Blade with Alpine」を選択します。「blade」と入力してenterキーをドーン！ちなみにAlpineとは軽量JavaScriptのことで、簡単なUIだけ追加できます。

Would you like dark mode support? (yes/no) [no]   #no

「ダークモード対応を入れますか？」という選択です。最初はnoで。後から追加もできます。

 Which testing framework do you prefer? [Pest]   #Pest

テストフレームワーク選択です。Pestはかなり人気のテストフレームワークで初心者でも読みやすいのが特徴です。

選択後、認証画面に必要なファイルが自動生成されます。

• routes
• views
• controllers
• migrations

などが追加されます。とりあえず今は理解しようとしなくて大丈夫。これで認証画面が自動生成されました。

npm installとbuildを実行する

Breezeは「Tailwind CSS」や「Vite」を使って画面を構築します。

以下を実行してフロントエンドのビルドをおこないましょう。

npm install # プロジェクトの「package.json」に記載された依存パッケージ（ライブラリ）をダウンロードして環境構築するコマンド
npm run dev # 開発用にローカルサーバーを起動するコマンド

Node.jsがインストールされていないと「npm is not recognized」と表示されます。Node.jsを導入して「npm」を利用できるようにするには公式サイトからダウンロードしましょう。

Node.js — どこでもJavaScriptを使おう

Laravel + Viteでは「npm run dev」コマンドを起動したまま開発するので、忘れないようにしましょう。

ログイン画面を表示する

Hardをインストールしているなら「http://myapp.test/」へアクセスします。インストールしていないならLaravelサーバーを起動(php artisan serve)してブラウザで「http://127.0.0.1:8000」へアクセスします。

するとトップページが表示され、右上に「Log in」「Register」が表示されます。ここからユーザー登録を行うと、自動的にログイン機能が動作します。

これにより「パスワード暗号化」「セッション管理」「ログイン維持」「CSRF対策」が完成しました。ちょっと簡単すぎて感動ものですよね。また、Laravelではパスワードは自動でハッシュ化されます。DBを見ると「$2y$10$...」のような暗号化文字列になっています。平文保存されないため、安全性も高いですね。

Bladeテンプレートを編集する

BreezeではBladeを使って画面を構築しています。

以下を開いてダッシュボード画面を編集してみましょう。

<x-app-layout>
    <x-slot name="header">
        <h2>マイページ</h2>
    </x-slot>

    <div class="p-6">
        ログイン成功！
    </div>
</x-app-layout>

ポイントは下記のようなBlade記法ですね。

<x-app-layout>
<x-slot name="header">

これは、Laravelの「Blade Component」という機能で、最初は「HTMLみたいなもの」と考えておいて大丈夫です。

徐々に「コンポーネント化」「レイアウト共通化」「再利用」を理解していきましょう。

ログインページへルート変更

会員制Webサイトを作るならトップページはログインページになりますね。

その場合「routes/web.php」を編集します。

Route::get('/', function () {
    //return view('welcome');
    return view('auth/login');
});

これでログインページがトップページとなりました。

躓きやすいポイント

Laravel Breezeで躓きやすいポイントをまとめました。

npm関連エラー

最近のLaravelでは「Node.js」環境が必要です。PHPだけでは完結しない点に注意しましょう。

.env変更後に反映されない

設定変更後は以下を実行すると改善する場合があります。

php artisan config:clear

Laravelはキャッシュを使うため、変更が反映されないケースがあるので注意しましょう。

CSSが崩れる

ほとんどの場合、

npm run dev

が停止しています。Viteは起動し続ける必要があります。

ログイン後404になる

ルート設定や view ファイル不足の可能性があります。まずは「routes/web.php」を確認しましょう。

まとめ

BreezeとBladeを使ってユーザー認証を作る方法を紹介しました。

Laravel初心者でも「Laravel Breeze」を使うことで短時間で本格的な認証機能を導入できることがわかりましたね。 特にBlade版は「学習コストが低い」「Laravel標準構成」「PHP中心で理解しやすい」というメリットがあります。

最初はファイル数の多さに圧倒されるかもしれませんが、

• routes
• views
• middleware
• migrations

などを少しずつ理解していけば問題ありません。

まずは、ユーザー登録・ログイン・マイページ・ログイン制限まで完成させることを目標にすると、Laravelの全体像がかなり見えてきますよ。

次回は「Laravel の言語ファイル」を追加して日本語ページにする方法を紹介します。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。