LaravelのBreezeとは？設定方法やできることをまとめました
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Laravel のスターターキットの Breeze について調べてみて、設定方法やできることをまとめました。
Breeze とは？
Laravel の Breeze は、スターターキットの１つです。
ユーザー登録、ログイン認証、メール認証、パスワードリセットといった必ずと言って良いほどつける機能を雛形で生成してくれます。
また、フロントエンドの開発方法を選択形式で選ぶことができ、様々な方法に対応が可能です。
フロントエンドを切り分けた開発に使うのにも便利ですし、
フロントエンドも Laravel プロジェクト内で書くという場合にも便利です。
そして何より、必要最低限の雛形を生成してくれ、その設定が裏側（例えば vendor など）で実装されているのではなく、コントローラーなど見える部分に生成してくれます。
Breeze で何ができるのか？
- ログイン
- ユーザー登録
- メール認証
- パスワードリセット
- パスワード確認
- プロフィールページ（名前、メールアドレス、パスワード、アカウント削除）
- Tailwind CSS
- Livewire または Inertia(Vue or React)または、API 機能のみ
Jetstream との違い
Laravel のスターターキットには、他に Jetstream というものがあります。
Jetstream は多機能でチーム管理や２要素認証といった特定のユースケースで使える機能が含まれています。
また、認証機能が Fortify により実装されています。
Fortify で実装すると、認証周りのコードが裏側に隠れてしまうため元々 Laravel を使っていた人はまだ大丈夫ですが、Laravel に慣れていない人にとっては分かりづらくなってしまいます。
Breeze であれば、認証周りのコントローラーなどを簡単に見ることができるので、使いやすいです。
Fortify とは異なり、Breeze はルートとコントローラをアプリケーションに直接リソース公開します。
どちらを選ぶべきか
自分としては第一の選択肢は Breeze です。
よっぽど Jetstream がサポートしている機能が必要な時に、Jetstream を選択するべきだと思っています。
特にチーム機能が必要な場合便利ですので、使っても良いと思います。
ただ、Breeze だからできないということは無いので、特に Jetstream を使う理由がない場合、Breeze を使っておけば良いと思っています。
Laravel UI との違い
大きくは変わっておらず、コントローラーの名前が変わったとかそれくらいの印象で、コードの場所が変わって内容はそんなに変わっていないと思います。
なので、すんなり受け入れられています。
CSS フレームワークのベースが TailwindCSS に変更され、デフォルトのページのレイアウトが綺麗になったなぁという印象はあります。
メール認証のメールなどもいい感じで、デフォルトのレイアウトが綺麗になったんじゃないかと思います。
認証ユーザーの情報の扱い方も変わった感じはしないです。
API 認証に関しては大きく改善されていると思っていて、もともとは Laravel Passport がファーストチョイスだったところが、Sanctum によるクッキー認証の選択肢が増え、さらにフロントエンドで Axios を使えば簡単にクッキーでユーザー認証が実装できるところが１番の魅力だと思います。
今更 Laravel UI を使う理由はなく、今からコードを書く場合は Breeze を使うのが良いと思います。
インストール方法
composer require laravel/breeze --dev
php artisan breeze:installすると選択肢が出てくるので自分が希望する構成を選択します。
- React または Vue などのフロントエンド構成
- TypeScript などのツールを複数選択
- テストツール
インストールとしては、これらを選択するだけで完了です。
この見出しの続きは、選択肢で聞かれることについて簡単にまとめています。
1.Which Breeze stack would you like to install?
- Blade with Alpine
- Livewire (Volt Class API) with Alpine
- Livewire (Volt Functional API) with Alpine
- React with Inertia
- Vue with Inertia
- API only
6 以外、フロントエンドをどうやって書きたいかの選択肢になります。
Blade
Bladeは、以前から Laravel のフロントエンドで使われているフロントエンドの機能で、ファイル名を.blade.phpにすると使えます。
変数を{{ $post->title }}などと書くだけで XSS 対策ができるなど便利で、Vue や React を使わない場合、これを使うのが基本となります。
Apline
Apline（アルパイン）は、JavaScript のフレームワークです。軽量で簡単で static なサイトで表示の切り替えなどしたい場合に便利ですが、情報も少ないので注意が必要になると思います。
Livewire
Livewireは、JavaScript を書かずにインタラクティブな UI を作ることができます。状態を PHP 側で持って、JavaScript で更新したりできて、PHP の状態が 変更したら DOM が自動的に更新されるような感じみたいです。
Volt
Voltは、Livewire の状態管理のロジックを、Blade に全て書いて Vue.js のような書き方ができるものです。個人的には Blade ファイルにいちいち<?phpを書いたり、useをかくのだるいって思ってしまう。
Class API と Functional API
Class APIとFunctional API、状態管理の方法や関数定義の仕方がクラスの書き方か、関数の書き方かという違いです。
Inertia
Inertia（イナーシャ）は、React や Vue とサーバー側の統合を楽にするというのが目的のツールです。フロントエンド用のルーティングが不要で、慣れれば簡単に SPA や SSR のサービスを作ることができると思います。
Would you like dark mode support?
Yes を選ぶと、TailwindCSS の使用を前提としたダークモードのマークアップをしてくれます。
Would you like any optional features?
この項目はReact with Inertiaか、Vue with Inertiaを選んだ場合に出ます。
Dark mode
ダークモード用のマークアップをしてくれます。
Inertia SSR
サーバーサイドレンダリングの設定をしてくれます。
TypeScript
TypeScript で書くことができる設定をしてくれます。
ESLint with Prettier
構文チェックによるコード品質管理と、自動フォーマット機能です。
Which testing framework do you prefer?
テスト用のフレームワークで、どち らを使うかの選択です。
Pest
PHPUnit を基盤に作られた、よりシンプルで直感的なテストフレームワークです。
Laravel のドキュメントに PHP Unit と比較した書き方が掲載されており、手を付けやすいです。
PHP Unit
PHP Unit は伝統的な PHP 用のテストフレームワークです。
情報も多く、標準的な選択です。
Breeze でできること
ユーザー登録
/registerにアクセスするとユーザー登録ページです。
基本的に、app/Http/Controllers/Auth/RegisteredUserController.phpに新規登録ページの表示と、登録処理の記述が書かれています。
ログイン認証
/loginにアクセスするとログインページです。
app/Http/Controllers/Auth/AuthenticatedSessionControllerにログインページの表示と、ログイン処理の記述が書かれています。
メール認証
非常に簡単に実装が可能です。
App/Models/User.phpに追記するのみでメールが送信されます。
use Illuminate\Contracts\Auth\MustVerifyEmail; //コメントアウトされているのを解除
//略
class User extends Authenticatable implements MustVerifyEmail //２単語追加
{メール送信のテストをする方法が分からない場合は、以下の記事を参考にしてみてください。
【Laravel】メールトラップを使ってメール送信のテストをする方法
パスワード確認
ログイン認証は、セッションなどで数時間、数日保持して同じブラウザからのアクセスであればログインを省略することも可能です。
ただセキュリティの観点で、改めてパスワード確認したい場合もあります。その時にこの機能が使えます。
app/Http/Controllers/Auth/ConfirmablePasswordControllerに書かれています。
パスワ ードリセット
パスワードリセットは、ユーザーがパスワードを忘れた時に使える機能です。
ユーザーが登録しているメールアドレスを再入力すれば、勝手にパスワードリセット用の URL が添付されたメールを飛ばしてくれます。
メールのリンクをクリックすると、パスワードを変更するページに飛びます。
URL にトークンと email が含まれており、メールアドレスを再入力してメールを飛ばした際に記録されたpassword_reset_tokensテーブルの情報と照合してパスワードリセットされます。
プロフィールページ
プロフィールページには、簡単な更新機能がついています。
- 名前、メールアドレス
- パスワード
- アカウント削除
感想
Vite のビルドが良い
これまで Laravel 5.5 から始まったサービスを開発していたので Laravel Mix、Laravel UI を使っていましたが、Vite によるビルドの軽量化が嬉しかったです。
迷子にならない
そんなに変更された感じがなく、これまでと同じような感覚で使えるので安心でした。
初心者にオススメか
初めて Laravel を触る方は、Jetstream ではなくこちらを使うのを推奨しておきます。
実際にサービス開発で使うか
多分、Jetstream ではなく、こちらを第一候補として考えると思います。
API 認証にも使いやすい
API 認証は Sanctum が使いやすいと思います。
Nuxt3 と LaravelSanctum で Cookie 認証する方法
以上、誰かの参考になれば幸いです。
