はじめに
インプルの矢島です。
Laravel10 の環境でBreezeというパッケージを使って認証画面を作ってみたいと思います。
Breezeとは
ログインや、ユーザー登録、パスワードリセット、メール確認、パスワード確認などの一般的に使用される機能を提供してくれるパッケージです。
生成される画面は、Tailwind CSS でスタイリングされています。
JetstreemとかLaravel/uiとかも似たように認証画面を作ってくれますが、Breezeが使いやすい印象です。
環境
- centos7.2
- php8.1
- Laravel 10.0.4
- mysql5.7
※こちらの記事で作成した環境を使用します。https://ramble.impl.co.jp/3400/
認証機能を作ってみる
composer require laravel/breeze --dev
今回はbladeを土台に設定をする
php artisan breeze:install
上記コマンドを実行すると以下のように色々聞かれます。
今回はbladeを選択して、darkモードサポートなしのPHPUnitはインストールします!
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-13.28.43-1.png?resize=889%2C191&ssl=1)
すると以下のように新規ファイルが生成されました。
![](https://i0.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-13.42.49-1.png?resize=510%2C452&ssl=1)
migrateしてテーブルを作成します。
php artisan migrate
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-15.22.47.png?resize=830%2C266&ssl=1)
次にnode modulesを作成して、viteを起動します。
※nodeがインストールされている必要があります。
npm install
npm run dev
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-14.29.09.png?resize=443%2C197&ssl=1)
以下のような最初の画面にログインと新規登録ボタンが生成されました!
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-15.50.53.jpg?resize=1320%2C674&ssl=1)
![](https://i2.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-15.50.58.png?resize=377%2C418&ssl=1)
ログインするとプロフィール画面が生成されていました。
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-15.50.41.png?resize=1320%2C530&ssl=1)
プロフィール画面にはパスワード変更や退会機能もあることがわかります。
![](https://i1.wp.com/ramble.impl.co.jp/wp-content/uploads/2023/03/スクリーンショット-2023-03-25-15.50.35.png?resize=1320%2C663&ssl=1)
おわりに
簡単に管理画面の一般的な機能を作成することができました!
カスタムも簡単にできるので、とても便利です。
ぜひ試してみてください〜!