Laravel(6.x)のAuthを使ってログイン機能を作る

Laravelはログイン機能が簡単に作成できます
今回はさくっとログイン機能をつける方法を紹介します

ui（vue）をインストールする

Laravelのインストールが完了している状態で
以下の2つのコマンドを実行します
※laravel６系が対象読者です、7,8系では方法異なるのでご注意ください

composer require laravel/ui "^1.0" --dev
php artisan ui vue --auth

composer requireでuiパッケージをインストールし、artisanコマンドで
vueの認証パッケージを使うようにしています

画面を確認する

コマンドを実行したらさっそくサーバを起動して画面を確認してみましょう

すると、右上に LOGIN、 REGISTERのボタンが追加されていると思います
LOGIN、REGISTERのボタンをそれぞれ押してみましょう

• 

• 

　上記のようにデザインがなにも効いていない状態だと思います

ビルドしてcss、jsを適用する

VueやReactのフロントエンドライブラリはnpmビルドが必要になります
php artisan ui vueで vueを使うようにしましたが、
実際に動くjs、cssはまだ作られていない状態です
一度サーバを停止させて以下コマンドを実行してビルドを行い、
css,jsを作成しましょう

npm install

npm installは少し時間かかります…
npm installが完了したら次のコマンドを実行しましょう

npm run dev

上記コマンドでビルドが実行されます

再度画面を確認する

ビルドが終わったら再度画面を確認してみましょう
サーバを起動してアクセス

きれいにデザインが適用されたはずです

npmとビルドの補足

少し細かいところを説明すると、npmとはNode package managerのことで
VueやReactをはじめ様々なJSパッケージを管理してくれるものです
PHPでいうところのcomposerと同じイメージですね

プロジェクト直下を見ると package.json というファイルが追加されて
いるので確認してみてください

１つ目のコマンド npm install は package.jsonに書かれている
devDependencies や dependencies のパッケージをインストールしてくれるものです

２つ目のコマンド npm run dev は npm run　で package.jsonにかかれている
‘scripts’ の箇所を実行してくれます
今回は npm run dev として実行しているので dev の箇所が実行されるわけですね

npm run dev　→　中身は npm run development　なので
npm run development　→　devのすぐ下のcross-env ….　が実行されています
実際にビルドは webpackというビルドツールを使っていることがわかります

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

まとめ

今回はLaravelの認証機能の導入方法の紹介でした
コマンド少しうつだけでここまで実装できるのは初心者には
非常に手厚くなっているなと実感します