【2022年】Angularのお勧めライブラリ12選!UIコンポーネント・グラフ・カレンダー。

【2022年】Angularのお勧めライブラリ12選!UIコンポーネント・グラフ・カレンダー。

この記事では、UIコンポーネントをはじめとするAngularのサードパーティー製ライブラリを12個ピックアップして紹介する。

既に業務でAngularを使用している人も現在ポートフォリオ作成のためのフレームワーク選びをしている人も参考になると思うので最後まで読んでいってほしい。

なお、ここで紹介しているライブラリはすべて著者が実際にテストしており、現在も定期的にメンテナンスされているライブラリをセレクトするようにした。

UIコンポーネント・ライブラリ

まずはライブラリの王道とも言えるUIコンポーネントのライブラリから紹介していきたい。

Angular Material

公式サイト:: https://material.angular.io
GitHub:: https://github.com/angular/components

Angular Materialはいわずと知れたAngularの公式マテリアルデザインライブラリ。

Angularを業務で使用するなら一度は使ってみておきたいライブラリだ。

ただし、マテリアルデザインは好みが分かれるうえにブームが過ぎた感じはあるので、もう少しニュートラルなデザインがほしいなら後に紹介するNGX Bootstrapを使ったほうがいいかもしれない。

Angular Materialについてもっと知りたい人はこちらの記事を読んでほしい。

  • 公式ライブラリである安定性
  • ドキュメントやネット上の情報が豊富
  • 直感的な操作性でユーザーフレンドリー
  • レスポンシブデザインに非対応

NGX Bootstrap

公式サイト:: https://valor-software.com/ngx-bootstrap
GitHub:: https://github.com/valor-software/ngx-bootstrap

NGX BootstrapはAngularプロジェクトにBootstrapを手軽に導入するためのライブラリ。

Bootstrapはこの章で紹介している他のUIライブラリとは異なり、独自のコンポーネントを追加するためのライブラリでは無く、HTML標準のコンポーネントにCSSクラスを追加することによって希望するデザインに整える。

また、Bootstrapのレスポンスデザイン対応は理解しやすく定評がある。

なお、Angularプロジェクトでbootstrapを使用するためのライブラリには「NG-Bootstrap」もあり、そちらは別のチームによって開発されている別のライブラリだ。

この記事ではアップデートが頻繁におこなわれているNGX-Bootstrapのほうをオススメしている。

  • デザインに特化しているので簡単
  • ヘルパークラスが豊富
  • 直感的なレスポンシブ対応

Prime NG

公式サイト:: https://primefaces.org/primeng
GitHub:: https://github.com/primefaces/primeng

Prime NGはAngularのためのUIコンポーネントライブラリ。

JavaServerFacesのUIコンポーネントであるPrimefacesを手掛けたUI開発のエキスパートであるトルコのPrimeTek Informatics社が制作している。

Prime NGにはプロによって制作されたテンプレートが豊富に用意されており、プロダクトのイメージに合ったテンプレートを探すことができる。

基本的には無料のライブラリであり、個人で開発をするのであれば個人的に一番オススメするのはこのPrime NGだ。

  • UIコンポーネント専門企業の信頼性
  • 90種類以上のコンポーネント
  • 要件に合わせてカスタマイズしやすい
  • 定期的なアップデート

NG-ZORRO

公式サイト:: https://ng.ant.design
GitHub:: https://github.com/NG-ZORRO/ng-zorro-antd

NG-ZORROは中国のデベロッパーによって作られたUIコンポーネントライブラリ。

オンラインマーケットAlibabaで採用されているAnt Designシステムをベースに作られており、特に中国では人気があるコンポーネントライブラリだ。

スタンダードで使いやすいデザインとなっているが、今のとこと英語で書かれたドキュメントは充実していないようだ。

  • TypeScriptで書かれたライブラリ
  • 60種類以上のUIコンポーネント
  • 軽量で高パフォーマンス

Kendo UI

公式サイト:: https://www.telerik.com/kendo-angular-ui
GitHub:: https://github.com/telerik/kendo-ui-core

Kendo UIはProgress Software社によって開発されているUIコンポーネントライブラリ。

100を超えるUIコンポーネントを備えており、あらゆる要望に応えられるような充実したライブラリ。

有料のライブラリではあるが、ある程度規模の大きいプロジェクトで、手早く高品質なUIが欲しいという場合は導入を検討してみてもいいだろう。

  • 100を超えるUIコンポーネント
  • コンポーネントはすぐにプロジェクト使用可能
  • 高機能なスケジューラーコンポーネント
  • 完全なネイティブコンポーネントで高パフォーマンス

IgniteUI

公式サイト:: https://www.infragistics.com
GitHub:: https://github.com/IgniteUI/igniteui-angular

IgniteUIはUI&UXツールキットを専門に開発するInfragistics社によって開発されたUIコンポーネントライブラリ。

Kendo UIと同様に有料のライブラリだが、クオリティ・デザインともに非常にレベルが高い印象だ。

コンポーネントがどういった業種・シチュエーションで使われるのかをよく考えて作られており、カスタマイズの必要無しにすぐ導入することができそうだ。

  • 60種類以上の実用的で高品質なUIコンポーネント
  • グラフ・チャートのコンポーネントに強い
  • 業種ごとにカスタマイズされたデモプロジェクト
  • モダンでクールなデザイン

その他、注目のライブラリ

Angularのエキスパートならば抑えておきたい注目のライブラリを紹介したい。

NgRx

公式サイト:: https://ngrx.io
GitHub:: https://github.com/ngrx/platform

NgRxはアプリの状態管理をおこなうためのライブラリ。

NgRxはReduxにインスピレーションを受け作成されたAngularのためのライブラリでRxJsを内部で使用している。

Angularでは状態管理をサービスに委ねることが多いがアプリの規模が大きくなると煩雑になりやすい。

NgRxは特に多くのユーザーインタラクションを必要とするアプリにおいては有効だ。

ngx-pipes

GitHub:: https://github.com/danrevah/ngx-pipes

ngx-pipesはAngularパイプを拡張するライブラリ。

Angularにはデフォルトで標準パイプが用意されているが、おこなう処理によっては足りないと感じる部分も多い。

ngx-pipesでは特にstringやarrayのための便利な関数が用意されている。

Angularの標準ライブラリである「i18n」よりも随分とシンプルで使いやすく、Angular開発者の間では定番となっている。

なお、i18nについて詳しく知りたい人はこちらの記事を参考にしてほしい。

ngx-translate

公式サイト:: http://www.ngx-translate.com
GitHub:: https://github.com/ngx-translate/core

ngx-translateはAngularのための国際化(翻訳)ライブラリ。

ngx-moment

GitHub:: https://github.com/urish/ngx-moment

ngx-momentはmoment.jsをAngularで使用するためのライブラリ。

moment.jsは日付や時間を変換・フォーマットする際に便利なユーティリティー関数を数多く含むライブラリ、JavaScript開発者の間では定番のライブラリとなっている。

AngularFire2

GitHub:: https://github.com/angular/angularfire

AngularFireはAngularの公式Firebaseライブラリ。

FirebaseをAngularアプリで使用する際にはよく使われる。

SPA(シングルページアプリケーション)ではプッシュ通知やPWA(Progressive Web App)といった技術がスタンダードに使われるようになってきているが、それらの技術を使用するためにFirebaseは欠かせなくなってきている。

msw Mock Service Worker

公式サイト:: https://mswjs.io
GitHub:: https://github.com/mswjs/msw

msw(Mock Service Worker)は疑似(モック)APIを使用するためのライブラリ。

テストや開発においてはアプリを起動しているものの、本物のバックエンドシステムと通信をおこなうことが出来ない場面は多々ある。

mswはそういった場面で疑似的なAPIを作り、リクエストに対する任意のレスポンスを送信することができる。

mswは特にKarmaやStorybookといったライブラリを使用している際に必要となることが多い。