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

  2-3 Bootstrapの導入

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

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

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

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

Bootstrap4


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

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

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

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

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

Bootstrap4ではCSSを拡張したSCSSが使われています。

本教材でもSCSSを使うため、SCSSをコンパイルできるように準備をします。

Node.js インストール


Laravelには標準で、BootstrapやJavaScriptなどのフロントエンド開発がしやすいように、Laravel-mixという機能がインストールされています。

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

SCSSをコンパイルするためにLaravel-mixを使用するのですが、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が必要になります。


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です。

techpit-match
└── package.json

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

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

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

$ npm install
~中略~
[fsevents] Success: "/Applications/MAMP/htdocs/lara58/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote
added 1077 packages from 504 contributors and audited 17166 packages in 69.45s
found 0 vulnerabilities

node_modulesフォルダについて

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

techpit-match
└── node_modules

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

Font awesomeの追記


続いて、インストールしたFont awesomeが使える様に、resources/sass/app.scssファイルを編集します。

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

ビルドコマンドについて


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

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

fontawesomeで検索して、下記のような記載が含まれていることが確認できればOKです。

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

議論

30 質問

このコースの評価は?