メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ツールの構築(Build tools)

Bootstrapに含まれるnpmスクリプトを使用してマニュアルを作成したり、ソースコードをコンパイルして、テストを実行する方法などを学習する。

 

ツールのセットアップ(Tooling setup)v4.6.0ツール変更

Bootstrapは、構築システムにnpm scriptsを使用。package.jsonには、コードのコンパイル、テストの実行など、フレームワークを扱う便利なメソッドが組み込まれている。

構築システムを使用してドキュメントをローカルで実行するには、BootstrapのソースファイルとNodeのコピーが必要。次の手順に従えばロックする準備が整う:

  1. Bootstrapのソースファイルをダウンロードして解凍し、依存関係の管理に使用するためNode.jsをダウンロードしてインストール(※推奨版の方をインストール)
  2. BootstrapのソースをダウンロードするBootstrapのリポジトリをフォーク。
  3. コマンドライン(ターミナル/コマンドプロンプト)で、解凍したBootstrapのソースファイルがあるルートの /bootstrap ディレクトリに移動し、npm install を実行して、package.jsonにリストされているローカル依存関係をインストール

完了すると、コマンドラインから提供されるさまざまなコマンドが実行可能。

【変更履歴】

  • 【v4.0.0】
    • 構築システム:Gruntnpm scripts
  • 【v4.5.0】
    • セットアップツールはNode.js10以上、Ruby2.6以上を推奨(特にNode.js10未満はサポート外に)
  • 【v4.6.0】
    • ドキュメントの構築ツールがJekyllからHugoに変更(それに伴い構築システムでのRubyのインストールも不要に)
  • 【v4.6.1】
    • セットアップツールは、Node.js16/npm8に対応

 

npm scriptsを使用(Using npm scripts)v4.5.0ツール変更

package.jsonには、次のコマンドとタスクが組み込まれている:

タスク 説明
npm run dist npm run dist は、コンパイルされたファイルとともに /dist ディレクトリを作成。SassAutoprefixerterserを使用
npm test npm run dist と同じだが、ローカルでテストを実行
npm run docs ドキュメント用のCSS、JavaScriptを構築してlintでチェック。その後 npm run docs-serve 経由でドキュメントをローカルで実行

npm run を実行すると、すべてのnpmスクリプトが表示される。

【変更履歴】

  • 【v4.5.0】
    • JavaScriptのminifierツールがUglifyJSからterserに変更(UglifyJSがES6+に非対応のためと思われる)

 

Sassコンパイラ(Sass)v4.6.0追加

Bootstrap v4は、Node Sassを使用してSassソースファイルをCSSファイル(構築プロセスに組み込み済)にコンパイル。独自のアセットパイプラインを使用してSassをコンパイルするときに、同じ生成されたCSSを作成するには、少なくともNodeSassが提供する機能をサポートするSassコンパイラを使用する必要がある。2020年10月26日をもって、LibSassとその上に構築されたパッケージ(Node Sassを含む)は非推奨になったため、今後も注意することが重要。

新しいSass機能または新しいCSS標準との互換性が必要な場合、Dart SassはSassの主要な実装であり、NodeSassと完全に互換性のあるJavaScriptAPIをサポート(Dart SassのGitHubページにリストされているいくつかの例外を除く)。

ブラウザのround(角丸)の問題を防ぐために、Sassのroundの精度を6(デフォルト、Node Sassでは5)に上げている。Dart Sassを使用する場合、コンパイラは10のround精度を使用し、効率上の理由から調整不可なので、これを調整する必要はない。

 

Autoprefixer v4.2.1ファイル変更

Bootstrapは、Autoprefixer(構築プロセスに組み込まれている)を使用して、構築時にいくつかのCSSプロパティにベンダープレフィックスを自動的に追加。そうすることでCSSの重要な部分を一度に記述できるようになり、v3のようなベンダーのmixinが必要なくなるので、時間とコードを節約。

Autoprefixerを経由してサポートされているブラウザのリストは、GitHubリポジトリ内の別のファイルに保存されている。詳細は .browserslistrc(browserslistの項目)に記載。

【変更履歴】

  • 【v4.0.0】
    • v3.2.0で廃止されたVendor prefix mixinは削除
    • サポート記載ファイル:/build/postcss.config.jspackage.json
  • 【v4.2.1】
    • サポート記載ファイル:package.json.browserslistrc

 

ローカルドキュメント(Local documentation)

ドキュメントをローカルで実行するには、基本的な組み込み、Markdownベースのファイル、テンプレートなどを提供するかなり柔軟な静的サイトジェネレータであるJekyllを使用する必要がある。開始方法は次のとおり:

  1. 上記ツールのセットアップをした後、bundle install を実行し、Jekyll(サイト構築)と他のRubyの依存関係をインストール
  2. コマンドラインで /bootstrap ルートディレクトリから npm run docs-serve を実行
  3. ブラウザでhttp://localhost:9001を開く

Jekyllの使用方法の詳細については、Jekyllのマニュアル(英語)に記載。

GitHubにある開発中のソースファイルのドキュメント(解説)をローカルで実行する場合は:

  1. Node.js、Ruby、Bundlerをインストール(ツールのセットアップを参照)
  2. "Clone or download"のボタンを押して、DownloadZIPファイルをダウンロードして任意の場所に解凍
  3. コマンドラインで、解凍したファイルの /bootstrap-4-dev ルートディレクトリに移動して、bundle install を実行し、Jekyllと他のRubyの依存関係をインストール
  4. npm install を実行して、Node.jsの依存関係をインストール(node_modules/ 内にファイルが構築される)
  5. npm run dist を実行して、dist/ 内のCSSおよびJavaScriptファイルを再構築
  6. npm run docs-serve を実行してドキュメントを構築(_gh_pages/ 内にファイルが構築される)
  7. ブラウザでhttp://localhost:9001を開く

 

トラブルシューティング(Troubleshooting)

依存関係のインストールで問題が発生したときは、以前のすべての依存関係のバージョン(グローバルやローカル)をアンインストール(node_modules/ を削除し、npm cache verify を実行してキャッシュをクリアなど)し、npm install を再実行する。