Help us understand the problem. What is going on with this article?

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"
    }

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


nagao-koyanagi
2020年7月学習開始。学習内容を思い出すために書いてます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away