Bootstrap 4 完全マスター

1年ちょっとのお久しぶりです。先日Bootstrap 4のチュートリアルサイトを公開しました。

⇒ Bootstrap 4 チュートリアル

詳しくはサイトをご覧頂くとして、ここは紹介と補足解説に努めます。経験者はもちろん、できるだけ入門者でも分かるように説明します。

入門 - Bootstrapとは?

まず入門編です(知ってる人は飛ばして下さい)。言葉で説明するより実例を見るのが一番です。次のリンク先に進むと__コンポーネント__というリストがあり、そこに__アラート__から__ツールチップ__まで数多くの項目があります。

⇒ 目次 - コンポーネント

コンポーネントは簡単に言うとBootstrapの部品です。最初は各コンポーネントのページに進んでどんな「部品」があるのか一通り流し見するのが一番理解が早いと思います。例えばボタンなら次のような感じです。

⇒ コンポーネント - ボタン

これらのコンポーネントをレイアウトで画面上に配置してWebページを作成します。Bootstrapで使われる重要キーワードのひとつがレスポンシブ(ウェブデザイン)で、簡単に言うと表示機器に応じてページレイアウトを変更する機構です。Bootstrapでは画面幅に対してページコンテンツ幅を5段階に調整し、さらに様々な表示方法を切り替えることができます。

⇒ レスポンシブ動作のブレークポイント

Bootstrapでは__グリッド__を用いてレイアウトを作成します。グリッドはflexboxを利用して作られており、数多くの強力な配置機能を持っています。またレスポンシブ動作に対応しており、例えばモバイルとデスクトップPCで表示を組み替えたりできます。

⇒ グリッド

またBootstrapには配色、マージン等の余白、ボーダー線など各種CSS設定のプリセットがあり、これらは__ユーティリティ__と呼ばれています。具体的にはCSSを設定したプリセットクラスの集まりで、要素にクラス設定することにより組み立てていきます。

⇒ 目次 - ユーティリティ

大まかに言えば部品である各種__コンポーネント__を__レイアウト__で配置し、その設定と調整に__ユーティリティ__を利用してWebページを構築するフレームワークがBootstrapです。

初期設定

Bootstrapは核心部のCSSライブラリと、それを補助するJavaScriptライブラリの2パートで構成されます。入門時は公式ドキュメントのStarter templateをコピペしてそこから始めるのがいいと思います。CDN(Contents Delivery Network)を利用することにより、HTMLの設定だけでBootstrapの機能全てを利用できます。

⇒ Starter template (公式サイト)

ここには様々な設定が行われていますが、公式ドキュメントにはひとつひとつがどういう意味かは簡単な説明しかありません。実はモバイル用のビューポート(特にiOS9対応)設定など全て必須重要項目です。

コピペだけでなく意味もきちんと知りたい人は次をご覧下さい(全部調べておきました)。各項目の詳細はボタンになっており、下の「構造」ボタンを押すと表示、もう一度押すと引っ込みます。より詳しい設定はその先の「属性」ボタンで表示します。

⇒ スタートアップ

長い文章ほど当然読む気が失せるもので、全部理解する必要がある人は(たぶん)少数です。そこで読みたい部分だけ引き出して表示できるようにしてあります(この機能に用いている折り畳みもBootstrapコンポーネントです)。

経験者は自分がよく使う環境でセットアップするとよいでしょう。次の一覧を参考にして下さい。主要な開発環境はほぼ網羅されていると思います。リスト項目からその先の公式ドキュメントへリンクします。

⇒ Bootstrapの利用法

コンポーネントの構造

Bootstrapコンポーネントにはボタンなど単一要素でできているものもありますが、その多くは複数の要素を組み合わせた複合型のコンポーネントです。まず記法説明用サンプルの__ボタンツールバー__をご覧下さい。これも「構造」ボタンで展開表示します。

⇒ 記法

このようにHTMLツリー構造の把握と各要素への属性設定(特にclass)がポイントです。次の__ドロップダウン__はボタンクリックでメニュー表示するコンポーネントです。「Dropdown button」をクリックするとメニュー表示、その下の「構造」ボタンでコンポーネントの構造を展開表示します。

⇒ ドロップダウン: 基本例

コンポーネントの中には複雑な構造を持つものもあります。ここでは例として__モーダル__を紹介します(フォームやナビゲーションバーはさらに複雑ですが例として適当なものにしました)。次の表示サンプルは12個の要素で構成されています。

⇒ モーダル: 構成要素

これを全て自力で書くのは大変ですが、サンプルをコピーして必要部分(モーダルの場合はタイトル、ボディ、ボタンの3ヶ所)だけ書き換えれば大幅に省力化できます。本表示サンプルのHTMLから始めても良し、元ソース(Pugで記述)を利用するのも良しです。

ソースコード

チュートリアル全体がBootstrap 4で作ったサイト例にもなっています。表示サンプルを参考にして自分で何か作る場合はサイトのHTMLをコピーすることから始めると確実です。後は用途に応じて必要な部分を書き換えるとよいと思います。

ソースコードはGitHubにあります。masterブランチがソースコードで、ZipダウンロードまたはGit cloneして自分でビルドできます。詳しくは次をご覧ください(簡単なビルド手順も書いてあります)。

⇒ ソースコード

もうひとつのgh-pagesブランチがサイトそのものです。このファイルコンテンツをそのままGitHub Pagesを利用して公開しています。HTMLは見やすさ優先でcompressせず改行インデント形式で出力しています(Pugの--prettyオプション使用)。

CSSのカスタマイズ

「Bootstrapは便利だけど何を作ってもああいう感じにしかならない」というのは以前からよく聞く話で「Bootstrap臭」という用語(?)まであります。確かに全く別スタイルのデザインを作るのには向きませんが、今ではかなり自由に作り変え可能です。

Bootstrap 4のCSSは全編Sassで書かれており、Sass変数を事前定義してコンパイルすればカスタマイズできます。

• node.jsとnpmの基本操作
• Sassの言語知識
• Autoprefixerの設定法
• ビルドツール(種類は多いが自分の好きなのでOK)

公式ドキュメントにはこの説明ページ(Theming)があります。しかし経験者向けの短い文章だけで(Sassソースの説明のみ)、この操作ができるようになるまでの解説や実例がありません。そこで初歩からでもBootstrapカスタマイズに進めるようにミニチュートリアルを作成しました。

⇒ Bootstrap 4 CSSのカスタマイズ

なお実際の作業にはビルドツール(タスクランナー)などの開発環境が必要になりますが、これもミニチュートリアル自身がCSSカスタマイズのビルドサンプルになっています。次からソースを入手してnode.js環境で実際にビルドすることで感覚を掴めます(npm installしてnpm run build)。

⇒ Bootstrap 4 CSS customization (GitHub master)

ビルドできるようになったら自分で配色やフォントサイズを変えてみるところから始めるといいでしょう。慣れてきたらソース・ファイル_variables.scssを自分で読んでみるのがお勧めです。ここに大量の変数が定義されていますが、これら全てを自由にいじって貴方好みに変更できます。

Webpack

Webpackの現在のメジャーバージョンは4です。公式サイトにはWebpack上でBootstrapを用いるための簡単な解説ページがありますがこれも説明不十分で、実は内容がWebpack 3時代のままです。

4.1時代のページまでWebpack 3と明記されていました。4.2でドキュメントからバージョンの数字だけ消去されましたが内容はほぼ同じです。

これも中途半端な解説より実際に動くコードが一番ということで、Bootstrap 4をWebpack 4から利用するためのサンプルプロジェクトをGitHubで公開しています。

⇒ Webpack 4 + Bootstrap 4 サンプルプロジェクト (英語)

プロジェクトは01から08まであり、徐々に難易度が上がっていくように作られています。各サブディレクトリの中にpackage.jsonがあり、全部独立したnpmパッケージになっています。それぞれnpm installでインストール、npm run buildでビルド、npm run startで開発サーバーを起動します。

1. HTMLの生成のみ(Pugから)
2. CSS用の最低限の設定(Webpack流にJavaScriptからCSSを注入)
3. Sassの設定
4. Autoprefixerの設定
5. CSSを(JavaScript注入でなく通常の)ファイル出力するよう設定
6. Bootstrapの設定(CSSとJavaScript両方)
7. Bootstrap CSSのカスタマイズ
8. jQueryを利用した簡単なデモ

最後に

もう5年も前ですが、Bootstrap 3の個人学習記録を試しにQiita投稿したら思わぬ反響で驚いたことがありました。その後ちょうど1年前にBootstrap 4の正式リリースを知り、やはりマスターしておこうかと思ったのが始まりです。

最初は自分専用の作業資料のつもりでしたが、途中からやはりちゃんと作って公開しようと思い立ちました。しかし全部となると分量も多く、暇を見つけては気長に1年掛けてこの度やっと完成しました。

今では普及しすぎて敬遠されることも多いBootstrapですが、逆に言えばよくあるページデザインなら容易に作れます。今後もしばらくは現役フレームワークとして用いられるのではと思います。

JavaScriptに関しては今ではさすがに設計が古い感があります。Ver. 4からES2015(ES6)モジュールを採用しモダンにはなりましたがまだjQueryに全面依存しています。jQueryは(まだ?)ES6モジュールではないためモジュール別バンドルは困難です。

今のjQueryソースコードはAMD(RequireJS)形式なので、BootstrapのAMD対応(UMD形式)モジュラーソースをRequireJSでバンドルする方法ならたぶん可能ですが、今の主流はES6なのであまりお勧めしません。今後もしBootstrap 5が開発される場合はjQueryと決別するのではと予測します。

外枠だけHTMLで中身は全部JavaScriptみたいな用途にはあまり向きませんが、スタティックページ中心の開発が得意分野で、特にサイトのプロトタイプ(モックアップ)作成には今でもぴったりだと思います。適材適所で利用しましょう。