laravelでbootstrapを使ったログイン機能

larabelでアプリ作る際bootstrapを使って簡単に作成したのでまとめたいと思います。

####環境
PHP 7.4.10
Laravel Framework 6.18.40
npm 6.14.5
node 14.5.0

まず前提としてLaravel 5.8以前ではフロントエンド フレームワークとしてbootstrapとVueがはじめから利用可能なように設定されていましたが、Laravel 6.xではデフォルトでは含まれなくなりました。

6.x以上ででBootstrapを利用するには、フロントエンドのScafolding機能を提供するlaravel/uiのコマンドを使用してJavascriptのビルドとCSSのプリプロセッサ設定を生成する必要があります。

スキャフォールドとは英語で足場という意味になっておりWebアプリケーション開発に関しては、MVCフレームワークで開発する際に必要なモデルやコントローラー、ビューをコマンドなどを自動生成してくれます。

元からスキャフォールドが入ってるRails素敵。

こちら環境がlaravel6.0なのでversion指定をしてます。laravelのバージョンが7などであれば公式を参照してください。

composer require laravel/ui:^1.0 --dev

これでbootstrapを向い入れる準備ができました。

次にui Artisanコマンドを使いフロントエンドのスカフォールドをインストールします。ここでオプションに認証機能をつけると自動で必要なファイルを自動で生成してくれます

php artisan ui bootstrap --auth

こちらのコマンドで認証機能のスキャフォールドが導入できてルーティングauthControllerなどのファイルが自動生成されましたが、bootstrap自体は足場を作っただけでダウンロードできてないのでしていきます。

補足ですがこちら完了するとこのような表示が出ます。

Please run "npm install && npm run dev" to compile

これからわかるようにlaravelではJavaScriptのパッケージ管理サービスであるnpmと連携することができて必要なソースコードを自動ダウンロードして依存関係を自動的に解決してくれます。

npmのダウンロード方法は省きます。

npmがお使いのpcに導入されている状態でアプリケーションにnpmをインストールします。また、インストールが完了すると下記フロントエンドのjqueryやbootstrapが使えるようになります。

npm install

このコマンドはsass等最新の書き方を昔の書き方に戻してコンパイルを統一させてブラウザでも読めるようにします。

npm run dev

package.json

  "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.12"
    }

これでログイン機能は完成です。