AngularはTypeScriptを使用して構築されたオープンソースのJavaScriptフレームワークで、シングルページのウェブアプリケーションの開発を念頭に最適化されています。Angularは汎用性が高いことで知られており、開発者による大事な機能や特徴への専念を後押ししてくれます。コンポーネントライブラリを加えることで、効率性がさらに高まり、開発の生産性とアプリケーションの全体的な質が向上します。

しかし、実際にプロジェクトで利用するライブラリを決めるのは、選択肢が多すぎて簡単ではありません。そこで、今回の記事では、おすすめのAngularコンポーネントライブラリと、その仕組み、そしてそれぞれのライブラリをAngularアプリケーションに統合する方法についてご説明します。

コンポーネントライブラリを使用する理由

自分で作るにせよ、サードパーティのライブラリを採用するにせよ、コンポーネントはAngularアプリケーションの基盤になります。各コンポーネントを支えるのが、HTMLとCSS要素のテンプレート、そして、動作を制御するTypeScriptコードです。

コンポーネントライブラリの主な利点として、ビルド済みのUIコンポーネントを繰り返し利用することができます。ゼロからのコードの記述が必要なくなり、アプリケーションを素早く構築できるようになります。

コンポーネントを重視するAngularを採用することで、TypeScriptコードを書くプログラマーと、テンプレートのHTMLを扱うウェブデザイナーの間での横断的な協力がスムーズに進むはずです。

コンポーネントのライブラリは通常、Node.js npm─Node Package Managerを使うか、Angular独自のコマンドラインインターフェース（CLI）を使ってAngularプロジェクトに追加することになります。

優れたコンポーネントライブラリとは

これからご紹介するコンポーネントライブラリは、以下の基準に基づいて選択しています。

  • UIコンポーネントが包括的で、開発者による美しく機能的なアプリケーションの素早い構築を支援する
  • 使いやすく、Angular、React、Vueのような人気のウェブ開発フレームワークと統合できる
  • ドキュメントやサポートが充実しており、必要なときに手がかりとなる情報が見つかる
  • 積極的にメンテナンスとアップデートが行われ、最新のウェブ技術とセキュリティ標準に対応している

おすすめAngularコンポーネントライブラリ9選

それでは、選りすぐりのライブラリを詳しく見ていきましょう。

1. Angular Material

Angular Materialは公式のAngularコンポーネントライブラリであり、最新のAngularの機能やAPIの仕様に対応しながら、包括的なUIコレクションを取り揃えています。また、アクセシビリティサポートも組み込まれており、キーボードを使ったナビゲーションを可能にするマークアップの生成や、スクリーンリーダーへの対応も問題ありません。

Material Angularコンポーネントライブラリ（ボタンの例）
Material Angularコンポーネントライブラリ（ボタンの例）

機能：Angular Materialを使うことで、Angularの組み込みディレクティブとサービスを活用しながら、データと密に連動した、そして、パフォーマンス面でも優れた各種コンポーネントを追加することができます。ウェブアプリケーションをインタラクティブなものにする上で有用です。

優れた点：Angular Materialは、Material Designガイドラインに従ったビルド済みUIコンポーネントを導入するのにうってつけです。優れたデザインかつカスタマイズ可能なUIコンポーネントが豊富で、Angularアプリケーションに簡単に統合できます。ナビゲーションメニュー、ボタン、フォーム、ダイアログボックスなどがあります。

例えば、アプリケーションにボタンコンポーネントを追加するには、mat-buttonディレクティブを使用し、必要に応じてカスタマイズするだけでOKです。

以下にコードの一例を示します。

<button mat-button color="primary">Click me!</button>

このコードにより、原色を用いたボタンコンポーネントが生成されます。イベントハンドラを追加したり、テキストやアイコンの外観を変更したりすることで、ボタンをさらにカスタマイズできます。

2. NG-Bootstrap

NG-Bootstrapは、Bootstrap CSSを土台に構築されたオープンソースのライブラリで、多くの開発者が慣れ親しんでいるコンポーネントやデザインパターンが揃っています。習得までにかかる時間が短く、プロジェクトにすぐに導入できます。Angularアプリケーションを迅速かつ効率的に構築するための信頼できる選択肢です。

NG-Bootstrap Angularコンポーネントライブラリ（カルーセルの例）
NG-Bootstrap Angularコンポーネントライブラリ（カルーセルの例）

機能：NG-BootstrapはBootstrapコンポーネントの機能を拡張するもので、BootstrapコンポーネントをAngularディレクティブとして使用できるようになります。Angularとシームレスに動作する、レスポンシブかつモバイルフレンドリーなウェブアプリケーションを簡単に作成可能です。

優れた点：NG-Bootstrapの主な利点の1つが、アクセシブル・リッチ・インターネット・アプリケーション（ARIA）のW3C仕様を含むアクセシビリティ機能のサポートです。NG-Bootstrapは、モーダルダイアログの分野でも強さを見せます。ng-bootstrapモーダルコンポーネントにより、サイズ、背景、キーボードサポートなどを柔軟にカスタマイズしながら、モーダルダイアログを簡単に作成することができます。

NG-Bootstrapを使って基本的なモーダルダイアログを作成する例を以下に示します。

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
  </div>
</ng-template>
<button class="btn btn-primary" (click)="open(content)">Launch demo modal</button>

この例では、ng-template要素に、ヘッダー、ボディ、フッターを含むモーダルダイアログのコンテンツがあります。コードの最後にあるbutton要素をクリックするとモーダルが開きます。open()メソッドがモーダルの表示に使用され、ng-template要素を引数として受け取ります。

3. Clarity

Clarityはオープンソースのライブラリで、コンポーネントを横断して一貫した視覚言語（ボタンなど）を使用することで、統一感のある直感的なUIを構築することができます。また、多数の解説、APIリファレンスなど、広範囲にわたって情報が文書化されているため、学習や日々の使用が捗ります。

イラスト─Clarity Angularコンポーネントライブラリの公式サイトより
イラスト─Clarity Angularコンポーネントライブラリの公式サイトより

機能：Clarityのデザインシステムは、関連するコンテンツをグループ化する「カード」というコンセプトに基づいています。カードを使うことで、個々のコンテンツを構造化しながら、整理することができます。Clarityには、さまざまな形式でデータを表示できるカードコンポーネントが豊富に用意されています。そのカードコンポーネントには、ヘッダー、フッター、コンテンツセクションがあり、あらゆるスタイルやテーマで簡単にカスタマイズできます。

カードは、モーダル、ドロップダウン、ボタンなどの他のコンポーネントと組み合わせて、より複雑なUIデザインを作成するのに使うこともできます。カードベースのデザインの全体的な目標は、複雑なインターフェースを簡単に作成できる、柔軟かつモジュールに基づいたシステムを提供することです。

優れた点：Clarityでは細かくフォームをコントロールできます。例えば、入力フィールド、セレクトボックス、ラジオボタンなど。またClarityには、棒グラフ、折れ線グラフ、円グラフなどのデータ視覚化機能が搭載されており、データをわかりやすく整理して表示することができます。

以下は、HTMLのフォームでClarityの入力フィールドコンポーネントを使用する一例です。

<clr-input-container>
  <label>Username</label>
  <input clrInput placeholder="Enter your username">
</clr-input-container>

このコードでは、ラベルとプレースホルダテキスト付きでフォーム入力フィールドを作成しています。clr-input-containerとclrInputディレクティブはClarityライブラリから利用することができ、これに応じて入力フィールドのスタイルを簡単に設定可能です。

4.Kendo UI

Kendo UIは、パフォーマンスを念頭に構築された商用ライブラリで、高速読み込みとスムーズなユーザー体験の実現に定評があります。また、アプリケーションの見た目や風合いの改善が期待できるテーマやスタイリングオプション、豊富なドキュメント、専任のサポートチームも頼もしい存在です。

Kendo UI Angularコンポーネントライブラリ（データグリッドの例）
Kendo UI Angularコンポーネントライブラリ（データグリッドの例）

機能：Kendo UIは、読み込みの高速化とスムーズなユーザーエクスペリエンスのために、仮想化や遅延読み込みなどの技術を採用しています。つまり、Kendo UIで構築するアプリケーションは、大規模なデータセットを扱う場合でも、高速で応答性に優れたものに。また、Kendo UIはモジュラーアーキテクチャを導入しているため、開発者は必要なコンポーネントのみを使用し、ライブラリのサイズを抑えながらパフォーマンスの向上を目指すことができます。

優れた点：Kendo UIは、大規模なデータ管理や複雑なユーザーインタラクションを必要とするエンタープライズレベルのアプリケーションに特に向いています。例えば、グリッドコンポーネントは、フィルタリング、ソート、グループ化などの機能をサポートしており、大規模なデータセットを管理しやすいかたちでユーザーに提示することができます。

以下は、シンプルなKendo UIグリッドをHTMLで作成する方法の一例です。

<kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name" width="200"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="120"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="Units In Stock" width="120"></kendo-grid-column>
</kendo-grid>

このコードを使うことで、AngularアプリケーションにKendo UIグリッドを表示できます。kendo-gridコンポーネントにさまざまな設定オプションを渡すことで、グリッドをカスタマイズ可能です。

5. PrimeNG

PrimeNGは、使いやすくカスタマイズしやすい設計のオープンソースのライブラリです。また、高度なアクセシビリティ機能と国際化サポートを備えており、グローバルなアプリケーションに向いています。

PrimeNG Angularコンポーネントライブラリの公式ロゴ
PrimeNG Angularコンポーネントライブラリの公式ロゴ

機能：PrimeNGライブラリには、開発者がAngularアプリケーションに簡単に統合できる、ビルド済みのUIコンポーネントが用意されています。Angularの組み込みディレクティブとライフサイクルフックを使用し、フレームワークとのシームレスな統合を実現可能です。また、様々な設定オプションやカスタマイズをサポートしているので、コンポーネントを特定のニーズに合わせて調整できます。

優れた点：PrimeNGの大きな特徴のひとつが国際化対応です。このライブラリは多言語をサポートし、ほとんどのコンポーネントに翻訳サービスを提供しています。Angularのローカリゼーションフレームワークとメッセージファイルを使うことで導入でき、簡単にカスタマイズや更新が可能です。

PrimeNGで国際化を行うには、サポートしたい言語の翻訳ファイルを作成します。このファイルに、アプリケーションで使用したいすべてのコンポーネントの翻訳を格納することになります。PrimeNGで国際化を有効にするには、コンポーネントのtranslate属性をtrueに設定します。そうすることで、コンポーネントが翻訳ファイルを解釈し、ユーザーに特定のテキストが表示されます。

以下は、PrimeNGで国際化をサポートしたp-calendarコンポーネントの使い方の一例です。

<p-calendar [(ngModel)]="date" [showIcon]="true" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [locale]="en"></p-calendar>

この例では、p-calendarコンポーネントのtranslate属性がtrueに設定され、[locale]属性は英語（en）の言語コードとして指定されています。これにより、その言語を選択したユーザーに対してカレンダーが英語で表示されます。

6. Nebular

Nebularは4つのテーマ、40以上のAngular UIコンポーネントを誇ります。ウェブ開発会社Akveoが作成したこのライブラリには、ユーザー認証モジュールと、特定のリソースへのアクセスを細かく制御するのに便利なACLベースのセキュリティモジュールも付属します。Nebularモジュールをもとに作られたngx-adminキットを活用し、独自の管理ダッシュボードアプリケーションを作成することもできます。

Nebular Angularコンポーネントライブラリ（スマートテーブルの例）
Nebular Angularコンポーネントライブラリ（スマートテーブルの例）

機能：NebularのUIはAkveoのEva Design Systemという仕様に基づいており、SketchやFigmaのようなデザインツールで作業を開始するのに便利なアセットも用意されています。

NebularでCSSを扱う際には、理解のしやすいかたちでスタイリングオプションを参照することができます。例えば、色の変数としてprimary、success、info、warning、dangerがあります。もちろん、これにとどまらず、Sassファイルとしてインポートすることでより高度なスタイリングを実現可能です。

Nebularのコンポーネントライブラリには、レイアウト、カード、リスト、アコーディオン、ナビゲーション補助、フォーム要素、データテーブル、モーダル、オーバーレイに加え、スピナー、日付ピッカー、プログレスバーなどのウィジェットが同梱されています。

Nebularのアコーディオンコンポーネントのメタデータは以下のようになります。

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'nb-accordion-demo',
  templateUrl: './accordion-demo.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionDemoComponent {}

テンプレートは次のようになります。

<nb-accordion>
  <nb-accordion-item>
    <nb-accordion-item-header>First Item Heading</nb-accordion-item-header>
    <nb-accordion-item-body>
      Toggled content for First Item.
     </nb-accordion-item-body>
  </nb-accordion-item>
  <nb-accordion-item>
    <nb-accordion-item-header>Second Item Heading</nb-accordion-item-header>
    <nb-accordion-item-body>
      Toggled content for Second Item.
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>

優れた点：Nebularライブラリとngx-admin管理ダッシュボードキットが無料で使えることで、このような洗練されたツールの価値を一層引き上げる要素となっています。認証モジュールとセキュリティモジュールからは、Akveoによる管理パネルコンポーネントへの注力や思い入れが感じ取れます。

Nebularはまた、右から左に読む言語（RTL）もサポートしています。RTL（およびLTR）レイアウトをサポートするCSSマークアップや、getDirection()やsetDirection()のような、実行時にレイアウトの方向を検出して変更するメソッドが搭載されています。

7. NG-Lightning

NG-Lightningは、Salesforce Lightning Design System（LDS）をAngularに寄せた、興味深い選択肢となっています。このシステムでは、SalesforceのLightningフレームワークを使用するSalesforce開発者向けに、HTMLとCSS要素、つまり設計図とデザインガイドラインが提供されています。LDSの主要な要素が、HTMLとCSSを含むこのオープンソースのAngularウィジェット集に反映されています。

NG-Lightning Angularコンポーネントライブラリ（アラートの例）
NG-Lightning Angularコンポーネントライブラリ（アラートの例）

機能：NG-Lightningでは、他のコンポーネントライブラリとは異なる依存関係が見られます。公式のAngular Component Dev Kitに依存していることに加え、NG-LightningアプリケーションがSalesforce LDSと同じCSSリポジトリに紐付けられます。このCSSは、Salesforce UXの公式リポジトリからダウンロードするか、CDNを介して接続することができます。

一方でTypeScriptに基づいたビュー構築のアプローチは、Angular開発者になじみがあるものとなっています。上に示したアラートコンポーネントのメタデータを利用するには、例えば以下のようなコードが利用できます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo-alert-basic',
  templateUrl: './basic.html',
})
export class DemoAlertBasic {
  showTopAlert = false;

  onClose(reason: string) {
    console.log(`Closed by ${reason}`);
  }
}

公式のNG-Lightningコンポーネントテンプレートの例は次のとおりです。

<div class="slds-notify_container">
  <ngl-alert *ngIf="showTopAlert" variant="warning" iconName="warning" (close)="onClose($event); showTopAlert = false;">
    <h2 class="slds-text-heading_small">
      Your browser is outdated. Your Salesforce experience may be degraded.
      <a href="javascript:void(0);">More Information</a>
    </h2>
  </ngl-alert>
<;/div>

<ngl-alert class="slds-theme_alert-texture" variant="offline" iconName="offline" (close)="onClose('click')">
  <h2>You are in offline mode.<a href="javascript:void(0);">More Information</a></h2>
</ngl-alert>

<ngl-alert class="slds-m-top_small" variant="error">Your browser is currently not supported.</ngl-alert>

<button class="slds-m-top_medium" type="button" [disabled]="showTopAlert" nglButton (click)="showTopAlert = true">Show alert in container</button>

優れた点：SalesforceのLDSに基づき、NG-Lightningはウェブアクセシビリティに真剣に取り組み開発されていることがわかります。Angularのようなフレームワークの特徴である、動的に生成されるインターフェースの操作は、視覚や身体の障がいを抱えるエンドユーザーにとってしばしば困難な場合があります。一方でNG-LightningはW3CのARIA仕様ガイドラインを遵守し、スクリーンリーダーのような支援技術をサポートする設計です。

8. Syncfusion UI

Syncfusion UIは、モジュールを意識することで軽量化を可能にするライブラリです。アプリケーションに必要なコンポーネントのみを選択し、最終的なバンドルサイズを抑えることができます。他のコンポーネントに影響を与えることなく、新しいコンポーネントを追加したり、既存のコンポーネントを変更したりして、ライブラリの保守、拡張、更新が容易になります。

Syncfusion UI Angularコンポーネントライブラリ（カードの例）
Syncfusion UI Angularコンポーネントライブラリ（カードの例）

機能：ページの読み込みに際し、Syncfusion UIライブラリがマークアップと設定オプションに基づいて必要なコンポーネントを初期化、作成します。例えば、グリッドコンポーネントはデータの並べ替え、フィルタリング、グループ化を可能にします。チャートコンポーネントでは、折れ線グラフ、棒グラフ、円グラフなど様々な形式でデータを表示できます。

ライブラリには、データ操作や検証などのタスクを簡素化するユーティリティ関数やツールも用意されています。また、複雑なデータ構造を扱うのに便利なデータマネージャと、ユーザーによる入力内容の検証に使用できるエンジンもあります。

優れた点：Syncfusionは、カスタマイズとテーマ設定の面で柔軟で、これを使うことで一貫性のあるプロフェッショナルな見た目のUIを素早く作成できます。また、REST API、OData、SignalRなどのデータソースをサポートしています。

SyncfusionのグリッドコンポーネントをAngularアプリケーションに組み込んだ例が以下のとおりです。

<ejs-grid [dataSource]="data">
    <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right"     width="120"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2"  width="120"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
    </e-columns>
</ejs-grid>

このコードでは、ソースからのデータを表示するシンプルなグリッドを作成しています。dataSourceプロパティに表示するデータを設定し、e-columns要素でグリッドの列を定義します。各e-column要素が、表示するフィールド、ヘッダーテキスト、列幅など、グリッドの列を定義します。この例では、format属性を使ってグリッドに表示されるデータをフォーマットする方法も示しています。

9. Onsen UI

Onsen UIは、ハイブリッドアプリケーションやウェブモバイルアプリケーションを構築するのに便利なオープンソースのUIライブラリです。他のサードパーティライブラリよりも定番フロントエンドフレームワークとシームレスに統合することで、手間をかけることなくインタラクティブなUIを構築できます。

Onsen UI Angularコンポーネントライブラリ（リストの例）
Onsen UI Angularコンポーネントライブラリ（リストの例）

機能：Onsen UIはGoogleのマテリアルデザインの理論に基づいており、アプリケーションUIを美しく、ユーザーフレンドリーなものにする上で頼れる選択肢です。幅広い組み込みテーマを使用して、アプリケーションの風合いを整えることができます。

優れた点：Onsen UIは、使いやすさとネイティブアプリのようなクロスプラットフォームアプリケーション作成において強さを発揮します。モバイルデバイス向けに最適化されており、UIコンポーネントをアプリケーションの要件に合わせて柔軟にカスタマイズすることができます。 また、タッチイベントの遅延を解消するFastClickサポートや、アプリケーションの読み込み時間を短縮するレイジーロード/遅延読み込みなどの機能も備えています。

以下は、Onsen UIを使ってシンプルなボタンを作成するコードの一例です。

<ons-button modifier="large--cta">Click me!</ons-button>

このコードでは「Click me!」というテキストとlarge--ctaという修飾クラスを持つボタンを作成しています。

まとめ

コンポーネントライブラリは現在、ウェブ開発における標準的な手法として広く受け入れられています。UIコンポーネント開発を加速させる、便利であり効率的な選択肢です。Angularの人気フロントエンド開発フレームワークとしての人気を支える、1つの大事な要素だと言えるでしょう。

今回の記事では、そのまま使えてカスタマイズも可能な選択肢をいくつもご紹介しました。UIコンポーネントを使いこなし、手間を省きながら質の高い、そして一貫性のあるユーザーインターフェースを構築することができます。最終的にどのライブラリを選択するかは、プロジェクト毎の要件や開発者の好み次第です。

Angularを使った開発には、Kinstaのアプリケーションホスティングとデータベースホスティングプラットフォームをおすすめします。お客様のアプリケーションを世界中に届ける準備がひととおり整ったソリューションです。

Salman Ravoof

独学のウェブ開発者、ライター、クリエイターでもあり、大の無料オープンソースソフトウェア（FOSS）好き。その他の好きなものは、科学、哲学、写真、芸術、猫、そして食。詳しい仕事情報はウェブサイトおよびXアカウントで公開している。