Bootstrapとngx-bootstrapの違い

Bootstrapとngx-bootstrap、2つのフレームワークについて、どちらかでいいのか、ngx-bootstrapを選ぶと何がお得なのか、よくわからなかったので調べてみた。

AngularとBootstrap
参照タイミングの違い
まとめ

AngularとBootstrap

ngx-bootstrapを最も単純に説明するなら、AngularのためのBootstrapと言えるだろう。

まずはこの2つの関係を整理する。

Angularの大きな機能の1つは、コンポーネント機能である。

一方、Bootstrapは単純に「見た目」を装飾するライブラリだが、以下のような動的なUI部品も提供している。

モーダル
ドロップダウン
アコーディオン
etc.

Bootstrapの動的な動きは jQuery や生 JavaScript で実装されるが、Angular は jQuery を非推奨としている。

そのため、上記のような動的なBootstrapのUI部品を、Angular（Angular に限らずだが）のコンポーネント機能と組み合わせると、バグの温床となる。

つまり、ngx-bootstrap は、Angular のコンポーネント機能を使用しても Bootstrap が問題なく動作するよう仲介してくれるもの

また、動的なUI部品に関してはソースコードの書きやすさ・視認性も良い。

例：アラートの実装

Bootstrap本家

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

ngx-bootstrap

<alert type="warning" [dismissible]="true">Warning!</alert>

参照タイミングの違い

ngx-bootstrap を使用するには Bootstrap 本家もインポート（package.json の dependencies に追加）する必要がある。

しかし、npm list -a で見ても、ngx-bootstrap は Bootstrap 本家を内包していない。

どのようにして Bootstrap 本家に依存しているのか気になった。

Bootstrapのインポートタイミング

angular.json の “styles” セクションや、src/styles.scss などで CSS や SCSS を import する。

プロジェクト全体のビルド時に CSS がまとめてバンドルされる（グローバル CSS）。

アプリの最初の読み込み時に一括で適用され、すべてのコンポーネントで参照可能である。

ngx-bootstrapのインポートタイミング

TypeScript ファイル（例：app.module.ts）でモジュールとして import される。

import { ModalModule } from 'ngx-bootstrap/modal';

コンポーネント単位のロジックとして「必要なときに」参照・生成される。

このとき、Bootstrap 本家の CSS を使用している。

たとえば、あなたが <alert type="success">成功！</alert> という ngx-bootstrap の部品をテンプレートに書くと……

Angular がそのコンポーネントを生成
ngx-bootstrap が内部で <div class="alert alert-success"> を出力
そのとき、アプリ全体に読み込まれている Bootstrap の CSS がこのクラスに適用されて「Bootstrap の見た目」になる（色や余白、アニメーションなど）

bootstrapとngx-bootstrapの依存関係

このような、依存関係があるのに直接的な依存として構成されていないものを peerDependencies と呼ぶ。

フロントエンドではむしろ一般的な仕組みだが、バックエンドでは採用されない。

バックエンドはプラグインそれぞれが独立した機能（インスタンス）として動くAPI的な動きをする。

一方で、フロントエンドは、SPAで状態管理をする観点などから、AngularならAngular本体、ReactならReact本体のインスタンスの中で、各パッケージが動作する必要がある。

各パッケージが直接的なdependenciesを持つと、本体とのバージョン不整合があった場合、バグのリスクが致命的なレベルまで上がってしまうため、あえて切り離す設計としている。

なお、peerDependencies でバージョン不整合があった場合、ビルド時にはエラーではなく警告となる。

警告が出るのは npm i や npm updateなど、パッケージをインストールするタイミング。

気づかず UI 部品が突然動かなくなることもあるため、注意する必要がある。

まとめ

ngx-bootstrap は、Bootstrap を Angular でより効果的に使えるように機能を拡張し、安全性も担保したフレームワークである。

単純な見た目を整えるときは Bootstrap のクラスを使用し、動的な UI 部品は ngx-bootstrap を使用する。