前のパートに戻る 完了して次のパートへ  

  2-3 Bootstrapの導入

今回のパートではBootstrapを導入します。

Bootstrapはもっとも有名なCSSのフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。

レスポンシブルにも対応してくれる便利なツールです。

Bootstrapを導入するとWebアプリケーションを効率よく開発できます。


Bootstrap3とBootstrap4


実はLaravelをインストールした段階で、

Bootstrapも同時にインストールされています。

public/css/app.cssファイルを見てみてください。

techpit-match
└── public
    └── css
        └── app.css

app.cssファイルの2行目あたりに下記の様な記述がされており、 Bootstrap v3.3.7が使われています。

Bootstrapは、Bootstrap3 と Bootstrap4 でいくつか大きな変更が行われており、

大きな変更点としては、

  • グリッドシステムがflexbox対応
  • CSSプリプロセッサーがLessからSassに変更
  • Panelsが廃止され、Cardsが追加された

などがあげられます。

今回はより新しいBootstrap4をインストールすることにします。

Bootstrap4の変更点についてまとめてみた

Node.js インストール


Laravelには標準で、BootstrapやJavaScriptなどのフロントエンド開発がしやすいように、

Laravel-mixという機能がインストールされています。

  • Laravel-mix ・・ webpackのラッパー
  • webpack ・・ CSSやJavaScriptなどを1つにまとめてくれる

Laravel-mixを使用するためには、Node.jsをインストールする必要があります。

  • Node.js ・・ サーバーサイドで動くJavaScript

Node.js公式サイトにアクセスします。

https://nodejs.org/ja/

推奨版をクリックしダウンロードします。

(windowsの場合も推奨版をインストールしてください。)

ダウンロードしたファイルをクリックし、インストールを開始します。

続けるをクリックします。

ソフトウェア使用許諾契約に同意します。

インストールするディスクを選択します。

インストールをクリックします。

パスワードを入力してインストールを進めます。

インストール完了したことを確認します。

コマンドプロンプトで、node -vと入力します。

下記の様な表示がでればOKです。

$ node -v
v10.15.3

続いて、 コマンドプロンプトで npm -vと入力します。

下記の様な表示が出ればOKです。

$ npm -v
6.4.1

npmというのは、Node Package Managerの略で、 Node.jsで書かれたパッケージを管理したりインストールしたりするツールになります。

Laravel-mixを使用するためにはこのnpmが必要になります。

Bootstrap4 インストールの前の準備


さっそくBootstrap4をインストールしたいところですが、

その前に準備が必要になります。

npmは、package.jsonというファイルに記載されている内容に沿って、 依存関係なども確認しながら様々なライブラリをインストールする仕組みになっています。

Laravelにはあらかじめ、package.jsonファイルが用意されています。

techpit-match
└── package.json

package.jsonの内容を見ると、下記の記載がされています。

devDependenciesは、開発時に使われるパッケージを表します。

その中に、"bootstrap-sass": "^3.3.7", と記載がされています。

この状態でnpmを使ってインストールすると、

bootstrap v3.3.7 がインストールされることになります。

今回はBootstrap4をインストールしたいので、 "bootstrap-sass": "^3.3.7",の記載を削除しておいてください。

こうですね。

Bootstrap4 などのインストール


Bootstrap4を実際にインストールしていきます。

コマンドプロンプトで、npm install --save-dev bootstrapと入力してください。

コマンド実施後、下記の様な表記がされればOKです。

$ npm install --save-dev bootstrap
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^1.14.7 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 1 package from 2 contributors and audited 1 package in 3.414s
found 0 vulnerabilities

peerインストール

メッセージの中に記載がありますが、peerというパッケージもインストール必要になりますので、 コマンドプロンプトで下記コマンドを入力します。

npm install --save-dev peer

下記のような表示がされればOKです。

$ npm install --save-dev peer
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^1.14.7 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 69 packages from 43 contributors and audited 163 packages in 9.573s
found 0 vulnerabilities

popper.jsインストール

Bootstrap4を使うために、popper.jsもインストールします。

$ npm install --save-dev popper.js
+ [email protected]


Sassインストール

次に、CSSをより効率的に書けるSassもインストールします。

コマンドプロンプトで、 npm install --save-dev [email protected] [email protected] と入力してください。

下記の様な表示があればOKです。

$ npm install --save-dev [email protected] [email protected]
+ [email protected]
+ [email protected]
added 215 packages from 142 contributors and audited 2300 packages in 20.936s
found 0 vulnerabilities


アットマークをつけることで、バージョン指定をしています。


font Awesomeインストール

最後に、簡単にアイコンを追加できる、font Awesomeをインストールします。

コマンドプロンプトで、 npm install --save-dev @fortawesome/fontawesome-free と入力してください。

下記の様な表示があればOKです。

$ npm install --save-dev @fortawesome/fontawesome-free
+ @fortawesome/[email protected]
added 1 package from 6 contributors and audited 23795 packages in 23.327s

上記のコマンドを入力後、package.jsonファイルが下記の記載に変更されていればOKです。

この状態で、コマンドプロンプトでnpm installと入力してください。

*インストールには数分かかります。

インストール後、下記の様なメッセージが表示されればOKです。

$ npm install
~中略~
added 1255 packages from 682 contributors and audited 23792 packages in 101.697s
found 34 vulnerabilities (18 low, 11 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit とは?

npmを使用しライブラリをインストールする過程で、 依存関係を確認しながら様々なライブラリをインストールするのですが、 中にはライブラリのバージョンが古い場合もあり、

npm audit というコマンドを使うことでバージョン確認、脆弱性の確認などが行えます。

今回の講座では解説しませんので、下記記事などを参考にされてください。

脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す

node_modulesフォルダについて

npm installを実施するタイミングでnode_modulesフォルダが生成され、 その中にたくさんのフォルダが作成されているのも確認できるかと思います。

techpit-match
└── node_modules

こちらのファイルは、パッケージが更新されたりする場合にデータが上書きされてしまいますので、 なるべくnode_modulesフォルダ内のファイルには手を入れないようにしてください。

Bootstrap4の調整


続いて、インストールしたBootstrap4が使える様にいくつかのファイルを編集します。

Bootstrap4の調整 app.scssファイル


resources/assets/sass/app.scssファイルを編集します。

techpit-match
└── resources
    └── assets
        └── sass
            └── app.scss

ファイル内に下記の記載があります。

Bootstrap3の記載になっているので、下記に書き換えます。

font awesomeも使用できる様に下記を追記しておきます。

resources/assets/sass/app.scssファイルがこの様な内容になっていればOKです。

Bootstrap4の調整 _variables.scssファイル

アイコンフォントパスの記載があるのでこちらも書き換えます。

techpit-match
└── resources
    └── assets
        └── sass
            └── _variables.scss

20行目あたりに下記記載があります。

bootstrap-sassbootstrapに変更します。

Bootstrap3から4に変更したことで、 フォントサイズの基準が 14px から 1rem に変更になっていますので、 あわせて変更します。

22行目あたりの$font-size-base1remに変更します。

Bootstrap4の調整 bootstrap.jsファイル

bootstrap.jsというファイルにも記載があるので書き換えます。

techpit-match
└── resources
    └── assets
        └── js
            └── bootstrap.js

10行目あたりに下記の記載がありますので、

bootstrap-sassbootstrapに書き換えます。

こうですね。

これでBootstrap4の設定はOKです。

ビルドコマンドについて


この章の冒頭で、

public/css/app.cssファイルを見ていただいたと思いますが、 再度確認してみると、まだBootstrap3と記載されている事がわかります。

techpit-match
└── public
    └── css
        └── app.css

ファイルの中身。

インストールしたBoootstrap4やSassを実際に有効にするには、ビルドという作業が必要になります。

package.jsonファイルの中に、ビルドに関するスクリプトが明記されています。

techpit-match
└── package.json

よく使うスクリプトは以下です。

  • npm run dev ・・開発用にビルド
  • npm run watch ・・常時ビルド
  • npm run prod ・・本番用にビルド

本番用にビルドするために、コマンドプロンプトでnpm run prodと入力してみます。

下記の様な表記になればOKです。

$ npm run prod

 DONE  Compiled successfully in 27384ms                                 00:08:41

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  350 kB       0  [emitted]  [big]  /js/app
/css/app.css  172 kB       0  [emitted]         /js/app

改めて、public/css/app.cssファイルを見てみます。

techpit-match
└── public
    └── css
        └── app.css

Bootstrap v4.3.1 になっていることが確認できればOKです。

以上でこのパートは終了です。お疲れ様でした!

議論

9 質問

このコースの評価は?