【Laravel入門】Laravel Breezee(ブリーズ)でログイン画面を作成する

Laravel,PHP

kamiです。
TwitterとYoutubeもやってます。

今回はaravel Breeze(ブリーズ)を使ってログイン画面の作成を行なっていきます。

laravel/breezeのパッケージをインストール

laravel-app直下で以下のコマンドを叩きます。
composerを使って、laravel/breezeのパッケージをインストールします。

sail composer require laravel/breeze --dev

sail composer require laravel/breeze --dev
Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/breeze (v1.21.2)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading laravel/breeze (v1.21.2)
  - Installing laravel/breeze (v1.21.2): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel/breeze .............................................................................................................................. DONE
  laravel/sail ................................................................................................................................ DONE
  laravel/sanctum ............................................................................................................................. DONE
  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/collision ........................................................................................................................ DONE
  nunomaduro/termwind ......................................................................................................................... DONE
  spatie/laravel-ignition ..................................................................................................................... DONE

82 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found
Using version ^1.21 for laravel/breeze

Laravel Breezeのインストール

sail artisan breeze:install

インストールコマンド後に次の質問が表示されます。
「どのスタックを使って開発を進めますか？」という質問です。

  Which stack would you like to install?
  blade .......................................................................................................................................... 0  
  react .......................................................................................................................................... 1  
  vue ............................................................................................................................................ 2  
  api ............................................................................................................................................ 3  
❯ 0
  • blade
  • react
  • vue
  • api

「ダークモードをサポートしますか？」という質問です。

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

「PHPUnitの代わりにPestフレームワークを使いますか？」という質問です。

Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]

kami@kami laravel-app % sail artisan breeze:install

  Which stack would you like to install?
  blade .......................................................................................................................................... 0  
  react .......................................................................................................................................... 1  
  vue ............................................................................................................................................ 2  
  api ............................................................................................................................................ 3  
❯ 0

  Would you like to install dark mode support? (yes/no) [no]
❯ no

  Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ no

   INFO  Installing and building Node dependencies.  


added 112 packages, and audited 113 packages in 27s

21 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> build
> vite build

vite v4.4.6 building for production...
✓ 47 modules transformed.
public/build/manifest.json             0.26 kB │ gzip:  0.13 kB
public/build/assets/app-4edc362c.css  30.07 kB │ gzip:  5.84 kB
public/build/assets/app-4a08c204.js   70.82 kB │ gzip: 26.36 kB
✓ built in 3.91s

   INFO  Breeze scaffolding installed successfully.

「INFO Breeze scaffolding installed successfully.」が、表示されればインストール完了です。

スポンサードサーチ

※ここ マイグレートでデータベースを作成する

sail artisan migrate

マイグレーションとは

マイグレーションは、Laravelを用いたアプリ開発を行う際、テーブルの定義をマネジメントするために実行するコマンドです。

スポンサードサーチ

Laravelのマイグレーションが必要なシーン

Laravelのマイグレーションが必要なシーンとしては、アプリのアップデートがあった場合や、チームでの開発が必要になった場合が挙げられます。

kami@kami laravel-app % sail artisan migrate

   INFO  Preparing database.  

  Creating migration table ............................................................................................................... 33ms DONE

   INFO  Running migrations.  

  2014_10_12_000000_create_users_table ................................................................................................... 34ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ................................................................................... 32ms DONE
  2019_08_19_000000_create_failed_jobs_table ............................................................................................. 25ms DONE
  2019_12_14_000001_create_personal_access_tokens_table .................................................................................. 34ms DONE

※ここ 再度リロード

スポンサードサーチ

Log in

登録しているアカウント情報を元にログインするページです。

Registerへログイン

アカウント情報の作成するページです。

以下の項目を入力して、「REGISTER」を押下する

  • Name
  • Email
  • Password
  • Confirm Password

「REGISTER」を押下すると、「dashboard」ページへ遷移します。

画面遷移まで、進むとデーターベースへユーザーの登録情報が追加されています。

laravel-app
┣ failed_jobs
┣ migrations
┣ password_reset_tokens
┣ personal_access_tokens
┣ users
┣ performance_schema
┣ testing

Brezzを日本語設定

  • breezeの日本語版をインストール
  • 日本語版のパッケージを展開
  • ロケールとタイムゾーンの設定

ロケールとタイムゾンの設定

英語表記ですが、日本語に変更方法を教えてほしです

icon

それでは「config/app/php」ファイルを開いてください。

日本語用のパッケージをインストール

sail環境でcomposerを使いパッケージをインストールします。

sail composer require askdkc/breezejp --dev

インストールしたら、以下のファイルに追加されます。

  • composer.json
  • composer.lock
kami@kami laravel-app % sail composer require askdkc/breezejp --dev
./composer.json has been updated
Running composer update askdkc/breezejp
Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
  - Locking askdkc/breezejp (v1.7.0)
  - Locking spatie/laravel-package-tools (1.15.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
  - Downloading spatie/laravel-package-tools (1.15.0)
  - Downloading askdkc/breezejp (v1.7.0)
  - Installing spatie/laravel-package-tools (1.15.0): Extracting archive
  - Installing askdkc/breezejp (v1.7.0): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  askdkc/breezejp ........................................................................................................................ DONE
  laravel/breeze ......................................................................................................................... DONE
  laravel/sail ........................................................................................................................... DONE
  laravel/sanctum ........................................................................................................................ DONE
  laravel/tinker ......................................................................................................................... DONE
  nesbot/carbon .......................................................................................................................... DONE
  nunomaduro/collision ................................................................................................................... DONE
  nunomaduro/termwind .................................................................................................................... DONE
  spatie/laravel-ignition ................................................................................................................ DONE

83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found
Using version ^1.7 for askdkc/breezejp

日本語版のパケージを適用する

インストールしたパッケージを適用する。

sail artisan breezejp

インストールするとjpディクトリ内に5つのファイルが追加されます。

  • auth.php
  • pagination.php
  • passwords.php
  • validation.php
  • ja.json
Laravel Breeze用に日本語翻訳ファイルを準備します
config/app.phpのlocaleをjaにします

 GitHubリポジトリにスターの御協力をお願いします🙏 (yes/no) [yes]:
 > yes

sh: 1: xdg-open: not found
Thank you! / ありがとう💓
日本語ファイルのインストールが完了しました!

ロケールとタイムゾーンの設定

英語表記ですが、日本語に変更方法を教えてほしです

icon

それでは「config/app.php」ファイルを開いてください。

timezone

    'timezone' => 'UTC',

'UTC’から’Asia/Tokyo’へ変更します。

    'timezone' => 'Asia/Tokyo',

ロケール

    'locale' => 'en',

'en’を’ja’に変更します。

    'locale' => 'ja',

フェーイカー

  'faker_locale' => 'en_US',

'en_US’を’ja_JP’に変更します。

  'faker_locale' => 'ja_JP',

config/appの3つを修正すれば日本語が適用される

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。

考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。

僕にも相談可能なので気軽に相談してください。

Twitterからの連絡だと確実ですよ。

オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。

Web開発で分からない時

オンライン完結型スクール DMM WEBCAMP PRO

アプリ開発で分からない時

プログラミング×稼げる副業スキルはテックキャンプ

プログラミングについて分からない時

【コエテコ様限定】※ご案内を受けた以外のメディアが使用しても成果は承認されません。
ミニマリスト_カミ

僕への個人でもメンターでも、スクールでもお好きな方を活用ください。

Laravel,PHP

Posted by kami