2021年に使いたいAngularサードパーティライブラリ10選

公開:2020/12/24
更新:2020/12/28
6 min読了の目安(約5900字TECH技術記事

こんばんは!Google Developers Expert for Angularのlacolacoです。この記事はAngularアドベントカレンダー 2020、25日目の記事です。

毎年最終日を書かせてもらってますが、いつものような「一年のふりかえりと来年の予想」ではなく、今年はカジュアルにライブラリ紹介させてもらおうと思います。
気になったものがあればぜひ来年趣味や仕事のプロジェクトで使ってみてください。

Angular専用ライブラリ

ngneat/reactive-forms

ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉

AngularのReactive Formsとほとんど互換性を保ったまま、本家に不足している型チェックをサポートしたライブラリです。
公式のロードマップでAngular Formsの厳密な型付けは計画されていますが、まだすぐにproduction readyなものが出てくる気配はないので、少なくとも2021年前半はサードパーティを頼って問題ないでしょう。

開発者が使いやすい @angular/forms の厳格なタイピングを実現 - Angular開発ロードマップ

これの他にも型付けサポートがついたAngular用のフォームライブラリはいくつかありますが、ngneat/reactive-formsは公式のReactive FormsとのAPI互換性を重視している点で、入れやすく剥がしやすそうなところを評価しました。
公式の型付きフォームが来た後の乗り換えも困難にならずに済むのではないでしょうか。

ngx-formly

ngx-formly/ngx-formly: JSON powered / Dynamic forms for Angular

次もフォーム系ですが、こちらはJSONオブジェクトから動的にフォームを組み立てるためのライブラリです。
こちらも似たようなものはいくつかありましたが、Angular GDEも開発チームにいますし一番よくできていてメンテも活発なのはngx-formlyのようです。
生成されるフォームのオブジェクトは公式のReactive Formsなので、既存のコードとも親和性高く使えるでしょう。

rx-angular

rx-angular/rx-angular: Reactive Extensions for Angular

こちらは新進気鋭で最近話題のnx-angularです。
"Reactive Extensions for Angular"ってそれが"NgRx"じゃなかったのかいと突っ込みたくなりますが、NgRxよりもさらに先鋭的にAngularでのリアクティブプログラミングを推し進めていくプロジェクトです。
rx-angularプロジェクトで実験され検証されたものはNgRxにも還元されていくでしょう。

現在のrx-angularの主眼は、Zone.jsなしでAngularをリアクティブにするための実行基盤づくりです。
公式ロードマップでもZoneless サポートは掲げられていますので、その先取りと考えて使ってみてもいいかもしれません。

swimlane/ngx-charts

swimlane/ngx-charts: Declarative Charting Framework for Angular

D3.jsを使ったSVGベースのチャートライブラリです。サードパーティのチャートライブラリをラップしているわけではなく、直接SVGを操作するAngularコンポーネント群です。
抽象化層がないため他のサードパーティアダプター系のチャートライブラリよりもパフォーマンスが良いことが売りです。

ngneatチームと並び、最近swimlane社のライブラリはよさげなものが多いです。やはり自社プロダクトで使われているもののOSS化はクオリティがある程度担保されますね。

ngneat/hotkeys

ngneat/hotkeys: 🤖 A declarative library for handling hotkeys in Angular applications

ngneatから2つ目です。自分で実装しようとすると非常に面倒なホットキーの実装が簡単にできるライブラリです。
本当にngneatチームはかゆいところに手が届くライブラリを作りますね。

angular-split

angular-split/angular-split: 🍌 Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.

ドラッグ操作で幅をリサイズできる分割ビューのUIコンポーネントライブラリです。
これも自分で実装しようとするとけっこう面倒ですが、汎用性高く作ってあって採用しやすそうです。

ng-mocks

ike18t/ng-mocks: Angular 5+ component, directive, and pipe mocking library

Angularのテストにおけるモックオブジェクトの作成を支援するライブラリです。
コンポーネントやディレクティブ、パイプなどにそれぞれ合わせたAPIによって、モックを作る手間が大幅に省けます。
既存のTestBedを使ったテストコードにはおそらくほとんど変更は不要で、 beforeEach などのセットアップ部分だけで利用できます。

ngneatも spectatorという便利なテスト用ライブラリを出しているのですが、こちらは一般的なAngularのテストコードとの乖離がけっこう大きく、導入しやすさという点ではng-mocksに軍配があがるでしょう。

ngneat/inspector

ngneat/inspector: 🕵️ An angular library that lets you inspect and change Angular component properties

ngneatから3つ目です。これはライブラリですが、Angularのデバッグ用ツールです。
読み込んでからアプリケーションを起動すると画面上にデバッグ用のUIが表示され、画面内の任意のコンポーネントの状態を確認、更新できます。
ブラウザの拡張機能が不要なので誰でもすぐに使えますし、どのブラウザでも使えます。
公式のDevToolsも開発されている最中ですが、特にChrome以外でデバッグしたいときに役立つのではないでしょうか。

汎用ライブラリ

ts-snippet

cartant/ts-snippet: A TypeScript snippet compiler for any test framework

TypeScriptの型に関するテストを書くのに便利なライブラリです。
基本的にテストコードも型チェックされてしまうので、「コンパイルエラーになること」をテストするのはけっこう面倒です。
あるいは、型推論の結果をテストしたいというときにもts-snippetは便利です。たとえば次のようなテストが書けます。

    expectSnippet(`
      import * as Rx from "rxjs";
      const source = Rx.Observable.of(1);
    `).toInfer("source", "Observable<number>");

アプリケーションというよりはライブラリ作者向けですね。AngularのライブラリはもれなくTypeScriptのライブラリでもありますから、型に関するテストを書きたいときはおすすめです。

msw

mswjs/msw: Seamless REST/GraphQL API mocking library for browser and Node.

こちらは最近話題のMock Service Workerです。
HTTPリクエストのレスポンスをモックするアプローチとしては、一般的なAngularアプリだとHttpClientをそもそも呼ばないようサービスを実装したり、HttpInterceptorを使ったり、あるいはInMemoryWebApiを使ったりするかと思います。
mswはHTTPリクエストをService Workerで受けてレスポンスを返すというアプローチです。
この利点は、アプリケーションとブラウザの間では本番同様にHTTPリクエストを送り、HTTPレスポンスもきちんとブラウザを通して返ってくることです。モックを外したときにアプリケーション側の変更がほとんどありません。
テストのときにも、HttpClientTestingModuleの代わりにmswを使うアプローチは有効でしょう。

Using MSW (Mock Service Worker) in an Angular project - Tim Deschryver

Redux Toolkit

reduxjs/redux-toolkit: The official, opinionated, batteries-included toolset for efficient Redux development

最後はReduxチームの公式エクステンション、Redux Toolkitです。
ReduxはReactエコシステムで使われるイメージが強いかと思いますが、実はNgRxとRedux Toolkitを併用することができます。
特に forFeature() を多用するプロジェクトにおいては、Redux Toolkitと組み合わせることで冗長なボイラープレートコードを大幅に減らせます。

詳細は先日書いたこちらの記事もご覧ください:
Angular: Using NgRx Store with Redux Toolkit 🚀

終わりに

個人的な感覚ですが、昨今のAngularコミュニティ全体の雰囲気として、公式に頼りすぎているように思います。
公式のサポートが増えて安心して開発しやすくなるのはもちろんいいことですが、Googleとしてのクオリティで提供するためにAngularチームは事前の調査や検証、設計などにコストを掛けています。
パッと作って出されてもそれは逆にAngularの価値を毀損することもあるでしょう。

そのかわり、新しい発想やイノベーションを起こす力はコミュニティが支えてあげないといけないと思っています。
コミュニティの中で生まれて育ったプラクティスが、公式にブラッシュアップされ第一級サポートとなる。そうしたエコシステムのサイクルを促進するためにも、先進的なサードパーティライブラリは応援していくべきでしょう。
応援とは、使ってみて良かったら広めることです。使いにくかったらフィードバックする。コントリビューションまでできれば最高ですね。

Ivyによって解放されたさまざまな可能性が、今後サードパーティの発展を加速させると思っています。
ぜひみなさんもイケてるサードパーティライブラリを見つけたらSNSやブログ、コミュニティのチャットなどで紹介してみてください。
2021年もコミュニティからAngularを盛り上げていきましょう!