【Laravel8】Bootstrap5をインストールして使ってみる
今回Laravel8でBootstrapをインストールする方法を解説します。
バージョンを指定しなければBootstrap5の最新バージョンがインストールされます。
LaravelはBootstrapをサポートしていることもあり簡単にインストール、使用することができます。
是非この記事を読んでBootstrapをインストール、使ってみてください。
それではまずは簡単にBootstrapについて説明していきます。
Bootstrapについて
世界で一番人気のフロントエンドライブラリ。
ユーザーの見た目に関するところ、
スマホやPC、タブレット等デバイスによる表示の出し分け等を
ライブラリでよしなにやってくれます。
これがない時は、
Webサイトを作るのにデバイスごとの出し分けというのは、
大きな課題でかつ工数がかかるものでした。
※今はWebブラウザのバージョンが最新のもののみをサポートするサイトが増えてきている時代の流れの恩恵もありますが・・
ブラウザ、デバイスごとの出しわけもBootstrapを使うことによりだいぶん楽になってきています。
例えば入力フォームを例にすると、入力フォームを作る際はPCやスマホ、タブレットなどデバイスや画面サイズによって最適の入力フォームのサイズが異なります。
今まではデバイスや画面サイズごとに入力フォームのサイズを定義し作成していましたが、
BootstrapでHTMLのフォームタグを挿入すればよしなにデバイスごとにより入力フォームのサイズ、デザインを出し分けてくれます。
次はLaravelとBootstrapの関係について少し触れたいと思います。
LaravelとBootstrapについて
LaravelとBootstrapについてですが
LaravelではLaravel UIというフロントエンド用のパッケージが用意されています。
パッケージではVue、React、Bootstrapが対応していて、
それぞれのフレームワークを簡単にインストールまたは利用することができます。
BootstrapはLaravelでサポートされているので扱いも簡単ということが言えます。
Bootstrap インストール方法
インストール方法は簡単です。
まずはlaravel/uiのパッケージを使えるようにします。
Composerコマンド実行
composer require laravel/ui
コマンドを叩くと
composer.jsonファイル、requireの最後にlaravel/uiが追記されましたね。
^3.4はパッケージのバージョン番号です。
インストール時期によってバージョンは異なると思いますが気にしなくてOKです。
“require": {
“php": “^7.3|^8.0",
“fruitcake/laravel-cors": “^2.0",
“guzzlehttp/guzzle": “^7.0.1",
“laravel/framework": “^8.65",
“laravel/sanctum": “^2.11",
“laravel/tinker": “^2.5",
“laravel/ui": “^3.4"
},
今回インストールされるlaravel/uiのパッケージのバージョンは3.X系です。
Laravelのバージョンによってインストールされるバージョンが違います。
Bootstrapをインストール&ビルド
Bootstrapをインストール&ビルドします。
uiパッケージの中にあるBootstrapをインストールしますって感じです。
php artisan ui bootstrapnpm install && npm run dev
npmのコマンドが使えないエラー（zsh: command not found: npm）が出たら.bashrcを読み込みましょうsource ~/.bashrc
途中npmのバージョンが古いと警告が出てインストールできないことがあります。
画面の指示に従いnpm、関連ライブラリのバージョンアップをしましょう。
※補足
Additional dependencies must be installed. This will only take a moment.
こんな案内が出たらもう1度 npm run devのコマンドを実行しましょう。
この警告、案内の内容はLaravelをインストールした時期によっても違いそうです。
うまくいかない時はターミナルに出ている案内をよく読んでください！！
Running: npm install resolve-url-loader@^4.0.0 –save-dev –legacy-peer-deps
Finished. Please run Mix again.
これでbootstrapが使えるようになっていると思います。
http://127.0.0.1:8000/css/app.cssにCSSらしきものが見えればOK！！
package.jsonにもBootstrapが追加されていると思います。
“bootstrap": “^5.1.3"
LaravelサーバーでBootstrap動作確認
ではフロントでBootstrapを使ってみて動くことを確認しましょう。
テンプレートファイル編集
resources/views/welcome.blade.phpを編集します。
※welcome.blade.phpはLaravelをインストールしたときにデフォルトで
http://localhost:8000/にアクセスしたときに読み込まれるテンプレートなので今回使っています！
他すでに使えるテンプレートがあればそのファイルで試してみてもOKです。
例のHTMLはBootstrap5の公式ページから引用
welcome.blade.phpを編集
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
ブラウザからアクセス
http://localhost:8000/ にアクセスしたらBootstrapらしいUIが表示されました。
Bootstrapを入れていないPJで同じコードを使うとインターネット黎明期のようなUIになったのでちゃんとインストールされているようです
Bootstrapが反映されない時
動作確認手順をしてみてもBootstrapっぽいイケてるデザインではなく、
昭和風の古いHTMLしか表示されない時のトラブル対処法です
Bootstrapインストールした時に生成されたCSSが読み込まれているかチェック
http://127.0.0.1:8000/css/app.css
このファイルを読み込んだときに404が出たらインストール失敗している可能性が高いです。
インストール手順を見直しましょう。
エラーを見逃している可能性があります。
もう一度やってみましょう。
HTMLがBootstrap4系、5系異なっている
Bootstrapの４系と５系ではCSSのスタイル名が異なっているものもあります。
どこからかコピペしてきたHTMLを使った場合Bootstrap４系のHTMLを使っている可能性があります。
まずは上のサンプルのHTMLを使って試してみてください。
参考