【2024年】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といったライブラリを使用している際に必要となることが多い。