Bootstrap(v5)をカスタマイズして必要な機能だけ利用する

# はじめに
BootstrapはTwitter社が提供するフロントエンドUIフレームワークで、モバイルファーストのレスポンシブサイトを素早く設計・構築できることを強みとしています。
非常に多機能で一貫したシステムとなっている反面、**デザインや実装にもさまざまな制約が生まれるため、Webサイト制作の実案件ではなかなか取り入れにくい**存在です。

そこで今回は、そんなBootstrapが備えているさまざまな機能のうち **「必要なものだけ」を効率的に利用する手法と、Webサイト制作に利用できるボイラープレート** を紹介します。

※本記事ではBootstrap v5.0.2を取り扱います。

# 基本的なBootstrapの利用法とそのデメリット
公式サイトにも掲載されている通り、基本的な利用方法としては下記のようにHTMLソース内にCDNの記述を追加するか、コンパイル済みのファイルをダウンロードして自分のサーバにアップするかのどちらかになります。

```html:CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- or -->
<link rel="stylesheet" href="/path/to/css/bootstrap.min.css">
```

この場合、Bootstrapが持つすべての機能を読み込むことになるため、**そのWebサイト上では必要のないUIコンポーネントなども含む**こととなり、ファイル容量も大きくなってしまいます。

# ソースファイルをコンパイルして独自CSSを生成する
Bootstrapのソースファイル（Sass）を自前でコンパイルすることで、**必要な機能だけを抽出した独自のCSSを生成**し、サイト上で利用することができます。

詳細は[公式サイト](https://v5.getbootstrap.jp/docs/5.0/customize/overview/)にも掲載されていますが、今回は簡単にカスタマイズを試せるよう**Node.js/gulpを利用したボイラープレート**を作成したので、そちらをもとに解説をおこないます。

https://github.com/shouchida/boilerplate-with-bootstrap

インストールや開発コマンドの実行方法については[README.md](https://github.com/shouchida/boilerplate-with-bootstrap/blob/master/README.md)を参照してください。

ディレクトリ構成（抜粋）は下記のようになっています。
開発時には原則 **`src/` ディレクトリ内のファイルを編集**します。
`dist/` はコンパイル後の出力先、`static/` は画像やJSライブラリなど静的ファイルの格納先となりますが、本記事では説明を省略します。

```shell:ディレクトリ構成（抜粋）
.
├── dist/
├── src/
│   ├── assets/
│   │   ├── css/
│   │   │   ├── _partials/
│   │   │   │   ├── _base.scss
│   │   │   │   └── _variables.scss
│   │   │   ├── bootstrap.custom.scss
│   │   │   ├── main.scss
│   │   │   └── sub.scss
│   │   └── js/
│   │       └── main.js
│   └── index.html
└── static/
```

HTMLファイル内では下記のように2つのCSSを読み込んでいます。
`/assets/css/main.css` はそのサイトの共通CSSを想定しています。

```html:src/index.html
<link rel="stylesheet" href="/assets/css/bootstrap.custom.css">
<link rel="stylesheet" href="/assets/css/main.css">
```

## bootstrap.custom.scss

`src/` ディレクトリ内の `bootstrap.custom.scss` にて、Bootstrap側で用意されている機能ごとのSassファイルをimportしています。
**不要な機能やコンポーネントをコメントアウトしてコンパイル**することで、そのサイトに最適化されたCSSを生成できます。

例えば、

- [Reboot](https://v5.getbootstrap.jp/docs/5.0/content/reboot/)（要素ごとの標準スタイル）
- [グリッドシステム](https://v5.getbootstrap.jp/docs/5.0/layout/grid/)
- [ヘルパー](https://v5.getbootstrap.jp/docs/5.0/helpers/)や[ユーティリティ](https://v5.getbootstrap.jp/docs/5.0/utilities/)（汎用class）

のみを使用したい場合は下記のようになります。

```scss:src/assets/css/bootstrap.custom.scss
// Override default variables
@import "_partials/variables";

// Configuration
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
// @import "../../../node_modules/bootstrap/scss/type";
// @import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/containers";
@import "../../../node_modules/bootstrap/scss/grid";
// @import "../../../node_modules/bootstrap/scss/tables";
// @import "../../../node_modules/bootstrap/scss/forms";
// @import "../../../node_modules/bootstrap/scss/buttons";
// @import "../../../node_modules/bootstrap/scss/transitions";
// @import "../../../node_modules/bootstrap/scss/dropdown";
// @import "../../../node_modules/bootstrap/scss/button-group";
// @import "../../../node_modules/bootstrap/scss/nav";
// @import "../../../node_modules/bootstrap/scss/navbar";
// @import "../../../node_modules/bootstrap/scss/card";
// @import "../../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../../node_modules/bootstrap/scss/pagination";
// @import "../../../node_modules/bootstrap/scss/badge";
// @import "../../../node_modules/bootstrap/scss/alert";
// @import "../../../node_modules/bootstrap/scss/progress";
// @import "../../../node_modules/bootstrap/scss/list-group";
// @import "../../../node_modules/bootstrap/scss/close";
// @import "../../../node_modules/bootstrap/scss/toasts";
// @import "../../../node_modules/bootstrap/scss/modal";
// @import "../../../node_modules/bootstrap/scss/tooltip";
// @import "../../../node_modules/bootstrap/scss/popover";
// @import "../../../node_modules/bootstrap/scss/carousel";
// @import "../../../node_modules/bootstrap/scss/spinners";

// Helpers
@import "../../../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../../../node_modules/bootstrap/scss/utilities/api";
```

もし、新たに利用したい機能が出てきた場合は、該当するimport文のコメントアウトを外して再度コンパイルします。

## _variables.scss

Bootstrap側で定義された各コンポーネントのスタイルを調整したい場合は、`src/` ディレクトリ内の `_variables.scss` にてSass変数を上書きします。

```scss:src/assets/css/_partials/_variables.scss
$red: #cc1414;
$orange: #ec5f1f;

$font-family-sans-serif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
$font-size-root: 62.5%;
```

なお、Bootstrap側のデフォルト変数は `node_modules/bootstrap/scss/_variables.scss` で定義されています。

# おわりに
Bootstrapは一貫したレイアウトやUIコンポーネントを提供するフレームワークのため、複雑で個性的なデザインや機能が求められるWebサイト制作の現場ではあまり利用されているイメージはありません。
一方で、Bootstrapのよく練られたグリッドシステムや幅広く用意されたユーティリティclassは魅力的であり、それらと同等のものをイチから作るのはかなりの手間がかかります。
Sassの仕組みを上手く利用することで、Bootstrapの必要な機能だけをWebサイト制作に活用することが可能になります。

# 参考リンク
- [Bootstrap5](https://v5.getbootstrap.jp/)
- [Bootstrap（安定版）](https://getbootstrap.jp/)