エンジニアリング

LaravelのBreezeで認証システムをコマンド一発で導入する方法

2024.08.03
2024.12.04

本記事では、Laravel Breezeを使って認証機能を導入していきます。

一般的に認証機能の導入は比較的手間のかかる作業になりますが、Laravelの場合はあらかじめパッケージを提供してくれているので、コマンドを打つだけですぐに導入できてしまいます。

1 チュートリアルの全体像
2 本章で学べること
3 Breezeとは
- 3.1 主な特徴
4 Breezeのインストール
5 日本語化
6 まとめ

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

本章で学べること

Laravel Breezeを使った認証機能導入方法
Breezeの日本語化対応

動画で学びたい方はこちらから！

Breezeとは

Laravel Breezeは、Laravelフレームワークにおける簡潔でシンプルな認証システムのスタートキットです。Breezeは、シンプルなWebアプリケーションのための認証機能を素早く構築するために設計されており、デフォルトで提供される機能は軽量で、カスタマイズも容易です。

主な特徴

シンプルさ:

Breezeは、Laravelの基本機能を利用し、最小限のコードで認証機能を提供します。

複雑な設定や設定ファイルは必要なく、すぐに使える状態になっています。

フロントエンドの統合:

Breezeは、Bladeテンプレートエンジンを利用したデフォルトのビューテンプレートを提供しています。

Tailwind CSSが組み込まれており、スタイリングが簡単です。

基本的な認証機能:

ユーザー登録、ログイン、パスワードリセット、ユーザープロフィール管理など、基本的な認証機能を備えています。

カスタマイズの容易さ:

コードがシンプルでわかりやすいため、必要に応じて機能の拡張やカスタマイズが容易です。

認証ロジックやビューの変更がしやすい設計になっています。

APIサポート:

BreezeはAPI認証のサポートも行っており、Laravel Sanctumと連携することで、トークンベースの認証を簡単に実装できます。

Breezeのインストール

Dockerコンテナに入る

docker compose exec app bash

Laravel Breezeパッケージ導入

composer require laravel/breeze:2.1.2 --dev

Breezeインストール

php artisan breeze:install

希望のスタックを選択

上記のように希望するスタックを何度か聞かれますが、全て初期状態のままEnterを押していきましょう。

マイグレーション

php artisan migrate

npmインストール

npm install

Viteの設定変更

package.jsonの設定を以下のように変更します。

"dev": "vite --host",

日本語化

envファイル変更

APP_LOCALE=ja

言語設定ファイルを公開

php artisan lang:publish

日本語ファイルを作成

lang/ja.jsonを作成して、以下の内容にします。

{
    "Name": "名前",
    "Profile": "アカウント",
    "Profile Information": "アカウント情報",
    "Cancel": "キャンセル",
    "Delete Account": "アカウントを削除",
    "Email": "メールアドレス",
    "E-Mail Address": "メールアドレス",
    "Email Address": "メールアドレス",
    "Password": "パスワード",
    "Current Password": "現在のパスワード",
    "New Password": "新しいパスワード",
    "Confirm Password": "新しいパスワード(確認用)",
    "Update Password": "パスワードの更新",
    "Save": "保存",
    "Saved.": "保存されました",
    "Already registered?": "既に登録済みの方はこちら",
    "Register": "登録",
    "Remember me": "認証情報を保存",
    "Remember Me": "認証情報を保存",
    "Forgot your password?": "パスワードを忘れた方はこちら",
    "Forgot Your Password?": "パスワードを忘れた方はこちら",
    "Log in": "ログイン",
    "Login": "ログイン",
    "Log Out": "ログアウト",
    "Logout": "ログアウト",
    "You're logged in!": "ログインしました",
    "You are logged in!": "ログインしました",
    "Reset Password": "パスワードのリセット",
    "Create": "作成",
    "Confirm": "確認",
    "Dashboard": "ダッシュボード",
    "Added.": "追加しました",
    "Add": "追加",
    "Verify Email Address": "メールアドレスの確認",
    "Verify Your Email Address": "メールアドレスの確認",
    "Create Account": "アカウントを作成",
    "Update your account's profile information and email address.": "アカウント情報やメールアドレスの更新",
    "Ensure your account is using a long, random password to stay secure.": "アカウントの安全性を保つため、十分長くランダムなパスワードを使用してください。",
    "Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.": "アカウントを削除すると、データやファイルも完全に削除されます。必要なデータがあればダウンロードしてください。"

}