アーキテクチャで比較する Angular コンポーネントライブラリ
これはランキングではありません。ここに挙げたライブラリはどれもよくできていて、きちんとメンテナンスされています。どれが合うかは、機能を比べるよりも前に決まる一つの判断で決まります。どれだけインストールしたいか、そしてデザインの方針をどれだけ一緒に持ち込みたいか、です。以下の内容は、誰かのドキュメントではなく、公開されているパッケージそのものを確認して書いています。
1 · それぞれがアプリケーションに求めるもの
面白いのは 3 番目の列です。コンポーネントライブラリが単独で入ってくることはまれで、一緒に付いてくるものは、使い続けるかぎり lockfile にもバンドルにもアップグレードの道筋にも残ります。
| パッケージ | インストールするもの | Angular のほかに一緒に入ってくるもの | スタイルの出どころ |
|---|---|---|---|
@angular/material | 1 パッケージと Angular CDK | CDK と 6 つの Angular ピア依存 | パッケージに同梱されたビルド済みテーマ |
primeng | 1 パッケージ | 自前の 7 パッケージと Angular CDK | パッケージ自体に CSS はなく、スタイルはその依存関係を通じて入ってきます |
@ng-bootstrap/ng-bootstrap | 1 パッケージと Popper | Popper | まったくありません。Bootstrap のスタイルシートは自分で用意します |
ng-zorro-antd | 1 パッケージ | CDK、日付ライブラリ、カラーライブラリ、アイコンセット | 独自のデザイン言語 |
@taiga-ui/core | レイヤーに分かれたパッケージ | コアだけで 15 のピアパッケージ | 独自のデザイン言語 |
ng-hub-ui-* | コンポーネントごとに 1 パッケージ | 共通ヘルパーのパッケージだけで、ほかには何もありません | CSS カスタムプロパティ。デザインシステムのパッケージは任意です |
2026 年 9 月に、各パッケージの公開されている最新バージョンで確認しました。依存関係の一覧は変わりますが、そこから見えてくる形はめったに変わりません。
2 · それぞれが正解になる場面
Angular Material が答えになるのは、Material のデザイン言語と、Angular そのものを書いているチームの後ろ盾がほしいときです。大きな組織にとっては、このページで最も安心できる選択肢であり、その土台にある CDK はエコシステムで最もよくテストされた振る舞いのレイヤーです。ここに挙げたライブラリのいくつかも、その上に作られています。
PrimeNG が答えになるのは、幅広さが必要なときです。誰も手書きしたくないものまで含めて約 100 のコンポーネントがあり、何もデザインしなくても初日から一貫した見た目が手に入ります。
ng-bootstrap が答えになるのは、アプリケーションですでに Bootstrap を使っていて、そのコンポーネントを Angular コンポーネントとして、Bootstrap 自身の JavaScript なしで使いたいときです。スタイルを同梱していないのは、まさにすでに手元にあるからです。
NG-ZORRO が答えになるのは、部品の寄せ集めではなく完成されたビジュアルシステムである Ant Design がほしくて、一緒に入ってくる日付・カラー・アイコンの各ライブラリを受け入れられるときです。
Taiga UI が答えになるのは、大規模で厳密に型付けされたシステムがほしくて、一枚岩としてではなくレイヤーごとにインストールする形に抵抗がないときです。
Hub UI が答えになるのは、必要なのがシステムではなく一つのコンポーネントであるときです。インストールするのはカンバンボードやデータテーブルであって、デザイン言語ではありません。共通ヘルパーのパッケージ以外には何も付いてこず、独自の見た目も持ち込みません。アプリケーションにすでに見た目があるなら、それこそが要点です。見た目は --hub-* カスタムプロパティで整えます。Sass の再ビルドも、詳細度との戦いも必要ありません。既定値は詳細度ゼロで宣言されていて、どのトークンもリテラル値にフォールバックするからです。
3 · Hub UI が答えにならないとき
3 つの場合があり、そのいずれでも上に挙げたライブラリのどれかのほうが良い選択です。
- あらかじめ決められた、出来上がったデザイン言語がほしい場合。Material と Ant Design はそれを与えてくれますが、このファミリーはあえてそうしません。トークンの上に一貫した見た目を組み立てる作業は、自分でやることになります。
- 近いうちに 100 のコンポーネントが必要な場合。カタログは 25 で、増え方はゆっくりで、出会うものすべてを賄えるわけではありません。
- 大きなコミュニティと多数のメンテナーという安心感がチームに必要な場合。今のこれはそうではありませんし、それはほかを選ぶ正当な理由です。