3.
ログイン認証
Laravel Breeze
Laravel Breezeとは
Laravelでは面倒なログイン認証処理を、いくつかのスカフォルド（テンプレート）で作成できます。
種類
- Laravel Breeze
- Laravel Jetstream
- Laravel Fortify
Laravel BreezeはLaravelのスカフォールドの１つで、基本的な認証機能をプログラムなしで初期導入できます。Jeststreamと比較すると開発が簡単で、Laravelの公式でも慣れていない開発者に推奨しています。
Laravel Breezeインストール
composer
Laravelプロジェクトを作成したら、composerコマンドでLaravel Breezeをダウンロードします。
ターミナル
composer require laravel/breeze --dev
artisan
ダウンロードしたら、artisanコマンドでインストールします。
ターミナル
php artisan breeze:install
各設問ではBlade with Alpine を選択し、その他はデフォルトデフォルトで進めていきます。
┌ 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 │
└──────────────────────────────────────────────────────────────┘
┌ Would you like dark mode support? ───────────────────────────┐
│ ○ Yes / ● No │
└──────────────────────────────────────────────────────────────┘
┌ Which testing framework do you prefer? ──────────────────────┐
│ › ● Pest │
│ ○ PHPUnit │
└──────────────────────────────────────────────────────────────┘
しばらくするとインストールが完了します。
データベース
データベース作成
DBクライアントで、ec_shop データベースを作成します。
データベース接続設定
.env でMySQLへの接続設定をします。データベース名は ec_shop とします。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ec_shop
DB_USERNAME=root
DB_PASSWORD=
- データベース：MySQL
- データベース名：ec_shop
- ユーザ名：root
- パスワード：なし
※ユーザ名、パスワードは、本番ではセキュリティに注意して設定してください
マイグレート
artisanコマンドで、データベースをマイグレートします。
マイグレーションファイルは、Laravelであらかじめ用意されています。
ターミナル
php artisan migrate
DBマイグレートが成功しました。
結果
Creating migration table .............................................14ms DONE
INFO Running migrations.
2014_10_12_000000_create_users_table ..................................... 24ms DONE
2014_10_12_100000_create_password_resets_table ........................... 19ms DONE
2019_08_19_000000_create_failed_jobs_table ............................... 7ms DONE
2019_12_14_000001_create_personal_access_tokens_table .................... 12ms DONE
テーブル確認
DB管理ツールでテーブルが作成されていることを確認します。
トップページ確認
インストールが完了したら、ブラウザでトップページを確認してましょう。「Log in」「Register」リンクが表示されていれば成功です。
Register
Login
Dashboard
Vite
Viteとは
Vite（ヴィティ）は、Webアプリケーション開発の高速で軽量なビルドツールです。主にJavaScriptフレームワークやライブラリや開発サーバとして利用されます。
Vue.jsの標準ビルドツール
Viteは、JavaScriptフレームワークVue.jsプロジェクトのデフォルトのビルドツールで、Vue.jsアプリケーションの開発において特に便利です。
Laravelのビルドツール
従来のLaravelでは、Webpackというビルドツールを利用していましたが、Viteは高速なビルドができるため、「Laravel9.x」からVite採用されました。
npmコマンド
「package.json」のスクリプトで、devに対してviteコマンドが設定されています。
package.json
"scripts": {
"dev": "vite",
"build": "vite build"
},
よってnpmコマンドで、JSに関するフロントエンドを更新できます。
npm run dev