2021年に使いたいAngularサードパーティライブラリ10選
こんばんは！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
ドラッグ操作で幅をリサイズできる分割ビューの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から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
最後は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を盛り上げていきましょう！
Discussion