前置き
基本的には、公式ドキュメントに沿った内容で進めます。
環境
- windows10
- Laravel 8.x
- PHP 8.x
- node v14.17.4
- npm 6.14.14
- VsCode
- gitbash 2.32.0.1
動作イメージ
ウェルカム画面
新規登録画面
ログイン画面
使用する認証スカフォールド
今回は下記のうち、laravel uiを使用します。
laravel uiは、モダンフロントエンドフレームワーク(Vue、React等)をLaravelでシンプルに使う事ができるパッケージです
- Laravel Breeze
Tailwind CSS && Blade Templates で構成 - Laravel Jetstream
Tailwind CSS && (Livewire || Inertia) で構成
Fortify、Sanctum - Passport
OAuth 2 プロバイダ実装 - Socialite
OAuth 2 ログイン実装 - laravel ui
Bootstrap && (React || Vue) で構成
設定手順
laravel uiパッケージのインストール
laravel8.xの場合は以下のコマンド
composer require laravel/ui
Laravel6.x (バージョンを指定しないとエラーがでます)
composer require laravel/ui:^1.0 --dev
laravel7.x (バージョンを指定しないとエラーがでます)
composer require laravel/ui:^2.4
認証スカフォールドをインストール
今回はフロントエンドにreact指定しつつ、認証スカフォールドを作成します。
- php artisan uiコマンドで、インストールの際に --authオプションを付けることで認証スカフォールドをインストールができる
- --authオプションを付けない場合は、フロントエンド開発のためのスカフォールド(足場)が構築されるだけで、認証の仕組みは構築されない
- フロントエンド開発のためのスカフォールド(足場)として、bootstrap、vue、reactなどから選択することができる
- uiコマンド実行後、認証系のblade(resources/views/auth/login.blade.phpなど)reactのサンプルコンポーネント(resources/js/components/Example.jsなど)が生成される
php artisan ui bootstrap --auth //bootstrapを使用する場合
php artisan ui vue --auth //vueを使用する場合
php artisan ui react --auth //reactを使用する場合
依存パッケージのインストールとビルド
npmを用いて、依存パッケージをインストール
npm install
Laravel Mixを使用してビルド
npm run dev
Reactコンポーネントをレンダリング
ポイントは以下の通りです
- resources/views/layouts/app.blade.phpで、バンドル後のjsファイルを読み込んでいるので、各bladeファイルの先頭で @extends('layouts.app') として、共通部分として読み込んであげる
- 作成するreactコンポーネント用のjsファイルは、すべてresources/js/app.jsに読み込ませる
require('./bootstrap') /** * Next, we will create a fresh React component instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ require('./components/App') require('./components/Stock') //
- reactコンポーネントの最後とbladeファイルにそれぞれ以下のように記載することで、指定したidの箇所にreactコンポーネントをレンダリングすることができる
if (document.getElementById('stock')) { ReactDOM.render(<Stock />, document.getElementById('stock')) }
@extends('layouts.app') @section('content') <div id="stock"></div> @endsection
まとめ
いかがでしたでしょうか。本記事では、Laravel8 (laravel/ui)で認証機能をサクッと作成する手順について紹介しています。また、手順だけではなく構築していく上で登場する用語やバリュエーションについても併せて説明していますので、ぜひ参考にしてみてください。