この記事では、Laravel Breezeの特徴を掘り下げ、他のLaravelスターターキットと比較し、インストール手順についてご紹介します。さらに、生成されたファイルを確認し、登録フローをカスタマイズし、プロジェクトの要件に合わせてUIを調整する方法も扱います。

Laravel Breezeとは

Laravel Breezeは、Laravelの認証が簡単に実装、設定できるパッケージです。これを使用すると、数分で完全に動作するログイン、登録システムを構築することができます。Blade、Vue、Reactをサポートし、APIバージョンもあります。

Laravel Breezeの主な特徴は以下の通りです。

    • ログイン
    • 登録
    • パスワードリセット
    • メール認証
    • 編集可能なプロフィールページ

よくある疑問として、いつBreezeを選択し、いつ他のLaravel認証パッケージを使用するかということがあります。

Laravelのエコシステムには2つの類似したパッケージがあり、初めて利用する場合は、その違いについて混乱するかもしれません。

まずはLaravel Fortifyというものがあります。ヘッドレス認証バックエンドであり、プリビルドUIのないカスタム認証システムを構築するのに理想的です。

特別なUIが必要な場合や、認証のバックエンドのみを担当する場合は、Fortifyを選択するのがいいでしょう。

もう1つのパッケージがLaravel Jetstreamです。二要素認証やチーム管理などの機能を含む、Laravelアプリケーションのより高度なスターターキットになります。

そして、Laravel Breezeがあります。様々なフロントエンドフレームワークをサポートし、オーバーヘッドを最小限に抑えた、シンプルかつカスタマイズ可能な、認証まわりの設定に使えるパッケージです。

Laravel Breezeをインストールする

それでは、Laravelプロジェクトをすでに作成済みと仮定します。ヘルプが必要な場合は、Laravelアプリケーションセットアップガイドをご覧ください。

その後、次のコマンドでLaravel Breezeをインストールします。

composer require laravel/breeze --dev

今回は、LaravelのデフォルトのテンプレートエンジンであるBladeを使用します。スカフォールディングを開始するには、以下のコマンドを実行します。

php artisan breeze:install blade
 
php artisan migrate
npm install
npm run dev

Laravel Breezeには、Vue/React/カスタムAPIバージョンもあり、これらを使用するには、コマンドに対応するフラグを付けます。

Vueの場合は、以下のコマンドを実行します。

php artisan breeze:install vue

Reactは以下の通りです。

php artisan breeze:install react

カスタムAPIを実行する場合は以下の通りです。

php artisan breeze:install api

Laravel Breezeをインストールすると、プロジェクトディレクトリにいくつかのファイルが生成されます。これらのファイルには、認証、パスワードリセット、メール認証を処理するルート、コントローラ、ビューが含まれます。ファイルの中身を、アプリケーションの要件に合うようにカスタマイズすることができます。

UIをカスタマイズする

Laravel Breezeは、TailwindCSSを採用しているので、UIをカスタマイズするために、Tailwindユーティリティクラスを使用することができます。

resources/views/auth;フォルダにあるビューファイルを編集することで、UIの各部をカスタマイズできます。UIの一部はBladeコンポーネントにまとめられており、これはresources/views/componentsフォルダにあります。

Laravelのロゴを他のロゴに変更する

Laravel Breezeでは、Bladeコンポーネントを使用して、複数回使用するコードを整理しています。そこで、例えば、resources/views/components/application-blade.phpファイルにあるロゴを変更する方法を紹介します。

ファイルを開き、現在のコンテンツを好みのsvgファイルに置き換えます。

プライマリボタンの色を変更する
プライマリボタンの色を変更する

resources/views/components/primary-button.blade.phpファイルを開きます。ログインページのボタンをサイトやアプリケーションの色にカスタマイズするなど、自由に修正することができます。

ブランドカラーを適用した後のプライマリボタン
ブランドカラーを適用した後のプライマリボタン

登録フローをカスタマイズする

Laravel Breezeの登録ページには、4つの定義済みフィールドが用意されています。

  1. 名前
  2. メール
  3. パスワード
  4. パスワードの確認
登録ページであらかじめ定義されている項目
登録ページであらかじめ定義されている項目

登録フォームに搭載するフィールドを拡張するには、resources/views/auth/register.blade.phpファイルを開きます。

この例では、emailフィールドの後に電話番号フィールドを作ることにします。これを実現するには、emailフィールドの後に次のコードを追加します。

<div class="mt-4">
   <x-input-label for="phone" :value="__('Phone')" />
   <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
   <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

これで、登録フォームに電話番号フィールドが表示されるようになりました。

電話番号フィールドを追加
電話番号フィールドを追加

電話番号フィールドのバックエンドを調整

次に、バックエンドで新しいデータを処理する必要があります。まず、新たにマイグレーションを作成して実行し、次にデータを保存するためのロジックをコントローラに追加し、最後にUserモデルのfillableプロパティにphoneを追加する、という3つの手順を踏むことになります。

usersテーブルに電話番号フィールドを追加する新しいマイグレーションを作成します。

php artisan make:migration add_phone_field_to_users_table

作成したファイルを開き、「phone」という文字列フィールドを追加します。

Schema::table('users', function (Blueprint $table) {
   $table->string('phone')->nullable();
});

その後、マイグレーションを実行します。

php artisan migrate

電話番号フィールドを保存するために、RegisteredUserController.phpを修正する必要があります。storeメソッドで、以下の変更を行います。

$request->validate([
   'name' => ['required', 'string', 'max:255'],
   'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
   ‘phone’ => [‘required’, ‘string’, ‘max:255’],
   'password' => ['required', 'confirmed', RulesPassword::defaults()],
]);

$user = User::create([
   'name' => $request->name,
   'email' => $request->email,
   ‘phone’ => $request->phone,
   'password' => Hash::make($request->password),
]);

Userモデルのfillableプロパティにphoneフィールドを追加することもお忘れなく。

protected $fillable = [
   'name',
   'email',
   'phone',
   'password',
];

これで、登録フォームのカスタマイズが完了しました。

メール認証を有効にする

メール認証とは、ユーザーが登録フォームに入力したメールをチェックし、認証するプロセスのことです。

この機能を有効にするには、UserモデルにMustVerifyEmailインターフェースを実装する必要があります。

use Illuminate\Contracts\Auth\MustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

すると、登録の際に、メールを確認するためのリンクが付いたメールが送信されるようになります。

しかし、認証されていないユーザーへのアクセスを制限するためには、ルートにミドルウェアを追加する必要があります。

「only-verified」という新しいルートを作成し、「auth」と「verified」のミドルウェアを追加します。authミドルウェアはゲストからのアクセスを防ぎ、verifiedミドルウェアはユーザーが自分のメールを認証したかどうかをチェックするものです。

以下はその例です。

Route::get('/only-verified', function () {
   return view('only-verified');
})->middleware(['auth', 'verified']);

まとめ

Laravel Breezeは、Laravelプロジェクトに認証システムを素早くセットアップすることのできる素晴らしいツールです。

シンプルでありカスタマイズ性が高いため、認証プロセスを深く気にすることなく、アプリの構築に集中することができます。

新しいLaravelアプリケーションのホスティング先をお探しなら、アプリのデプロイと管理を迅速かつ簡単にするKinstaのLaravelホスティングソリューションをお試し下さい。