ICS MEDIA – Webのインタラクションデザインに関する最新情報が満載

モジュールバンドラーwebpack（ウェブパック）の人気は飛ぶ鳥を落とす勢いで、フロントエンドエンジニア必須のツールとなりつつあります。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？

前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 4をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。

▲Bootstrapの公式サイト

※この記事は2018年4月現在最新のBootstrap 4、webpack 4.5、Node.js 9.11で解説しています。4月10日にリリースされたBootstrap 4.1でも動作確認済みです。

Bootstrap とは

BootstrapとはTwitterが開発しているCSSフレームワークです。フォームやボタン、ナビゲーション、モーダルなど汎用的なウェブサイトのパーツのスタイルが提供されています。このような汎用パーツは一から作ると手間がかかるもの。Bootstrapを使えば車輪の再発明をおさえられるので、生産性をあげられます。

▲Bootstrapの公式Example「Jumbotron」

弊社の実績にもBootstrap製のものが多くあります。ウェブアプリケーション「Particle Develop」やElectronアプリ「アニメ画像に変換する君」、そして今ご覧の本サイト「ICS MEDIA」もBootstrapを利用してます。

ミニマムにBootstrapと組み合わせる方法

まずはシンプルに手順を理解するために、webpackとBootstrapの最小構成を組んでみます。サンプルの完成品は次のリンクからコードをダウンロードできます。

• ソースコードを確認する
• サンプルを別ウインドウで開く

▲Bootstrapを使った解説用サンプル

モジュールのインストール

webpackのビルドに必要なモジュールをインストールしましょう。style-loaderとcss-loaderはwebpackでスタイルシートを利用するために必要なモジュールです。--save-dev（短縮指定は-D）オプションでインストールします。

Bootstrap本体もインストールしましょう。Bootstrapは内部でjQueryとPopper.jsに依存しているので、あわせてインストールする必要があります。--save（短縮指定は-S、npm v5以上では省略可能）オプションでインストールします。

設定ファイル

続いて、webpack.config.jsファイルに次の設定を記載します。本来は様々なオプションを設定しますが、最低限の内容としてコードを紹介します。CSSのバンドルには「style-loader」と「css-loader」の二種類が必要だと覚えてください。

コンテンツ側のソースコード

srcフォルダー内にindex.jsファイルを格納します。index.jsファイルにはimport文を用いて、Bootstrapを取り込みます。

BootstrapにはスタイルシートとJavaScriptの2つの機能があります。1つ目のimport文はスタイルシートを、2つ目のものはJavaScriptを取り込んでいます。

ビルド

npx webpackコマンドを使ってビルドすると、distフォルダー内のmain.jsファイルに出力されます。このJSファイル内にCSSコードが埋め込まれています。

ビルドで生成したmain.jsファイルをHTMLで読み込むと、スタイルが適用されます。JSファイルしか読み込んでいない状態ですが、main.jsファイルには自動的にCSSに展開される機能（style-loaderによるもの）が入っているためです。

▲JSファイル内で自動的にスタイルシートが展開される

実戦向きのBoostrap+webpack構成

Bootstrapの利点はカスタマイズ性が高いことです。

先述のミニマムな構成だと、Boostrapを組み込むメリットが少なく、CDNとして提供されている公式URLを取り込んだほうが手軽ではないかと読者の皆さんは思うはずです。

巷でBootstrapのサイトに対してよく言われるのは「Bootstrapくさいよね」という指摘。そのまま使うと、見た目が共通の仕上がりとなりBootstrap臭がどうしても出てしまいます。CDN版だとカスタマイズ性にかけており、Bootstrapらしさを軽減するのが難しいといった課題があります。

Bootstrapをwebpack+Sass構成で取り込む最大のうまみは、簡単にカスタマイズできることです。特定のSass変数の値を上書きすることで、Boostrapの装飾を変更できます。カスタマイズすることでBootstrapっぽさを軽減し、コンテンツのテイストにスタイルをあわせられます。

ここからは完成版のソースコードを参考にしてもらいつつ、必要な箇所をポイントで紹介します。

• ソースコードを確認する
• サンプルを別ウインドウで開く

▲Bootstrapのフォントやカラーリングをカスタマイズしたサンプル

モジュールのインストール

webpackのビルドに必要なモジュールを--save-dev（短縮は-D）オプションインストールしましょう。多くのモジュールが登場するので、重要なものについて役割を説明します。

※ webpack 4対応のためextract-text-webpack-pluginには@nextを指定します。

先述の説明と繰り返しになりますが、--save（短縮は-S）オプションでbootstrap関連のモジュールをインストールします。

設定ファイル

webpack.config.jsファイルは下記のファイルを参照ください。処理を確認できるよう、事細かにコメントを記載しています。

• webpack.config.jsファイルのソースコード

重要なポイントとしては次の3点です。

• ソースマップを有効にする
• PostCSSでAutoprefixerを適用する
• extract-text-webpack-pluginを使う

特に3つ目のextract-text-webpack-pluginが大事なので、説明します。webpackはJavaScriptにすべてをバンドルするツールですが、スタイルシートとしてのCSSファイルはJavaScriptとは別ファイルとして扱うほうが適した場面もあります。JSファイルは読み込み順をブロックする要因なので実行タイミングを遅延させ、スタイルシートは見栄えに関するので早い段階で適用させるといった使い分けが考えられます。extract-text-webpack-pluginを使えば、スタイルシートを別ファイルとして分離できます。CSSコーダーには必須の機能でしょう。詳しくは連載記事「JS内にCSSをバンドルしたくない場合」をご覧ください。

コンテンツ側のソースコード

srcフォルダー内にindex.jsファイルを格納します。index.jsファイルにはimport文を用いて、自分で用意したscssファイルを読み込むように記述します。

▼src/index.jsファイル

scssファイルの中身を説明します。Bootstrapのscssファイルを取り込むのですが、取り込む前に変数を定義します。こうすれば、Bootstrapのスタイルを調整できます。変更可能なものは「Theming Bootstrap」を参照ください。

▼src/index.scssファイル

なお、~bootstrapという記述はwebpackの記法です。scssファイルでnode_modulesフォルダーを参照できます。

以上の設定でビルドすれば、カスタマイズしたBootstrapを出力できます。

これでサンプルは完成です。実際はCSS側で設定した画像をバンドルしたり、ウェブフォントをコピーしたりとアセット周りの管理も必要です。連載記事「Sass内の画像もバンドルする方法」を参考に、プロジェクトに応じた設定ファイルに仕上げてください。

まとめ

webpackの理解が進めば、開発側の生産効率を向上でき、かつエンドユーザーに最適なデータ配信ができます。連載記事で少しずつ知識を深めて、快適にwebpackを使っていきましょう。

連載記事一覧

• 導入編
  • 最新版で学ぶwebpack入門
• ECMAScript 2015+編
  • webpack+BabelでES2017環境の構築
  • webpack+TypeScript 2.7の環境構築
• スタイルシート編
  • スタイルシート(CSSやSass)を取り込む方法
  • PostCSSを取り込む方法 – Qiita
  • Bootstrapとの連携方法（本記事）
• その他
  • Gulpで始めるwebpack 4入門 – Qiita