Masayan tech blog.

  1. ブログ記事一覧>
  2. Laravel8 (laravel/ui)で認証機能をサクッと作成する

Laravel8 (laravel/ui)で認証機能をサクッと作成する

公開日

前置き

基本的には、公式ドキュメントに沿った内容で進めます。

環境

  • 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)で認証機能をサクッと作成する手順について紹介しています。また、手順だけではなく構築していく上で登場する用語やバリュエーションについても併せて説明していますので、ぜひ参考にしてみてください。