【ITニュース解説】Announcing NgRx v22: Resource Extensions, Dynamic Deep Signals, a Light Theme, and more!

NgRx v22の最新リリースは、Angularアプリケーションの状態管理フレームワークに多くの注目すべき新機能、バグ修正、および改善をもたらした。これらの更新は、開発者がより堅牢で保守しやすいアプリケーションを構築する上で大いに役立つだろう。

まず「Resource Extensions」について解説する。Angularには、HTTPリクエストを通じて非同期でデータを取得・管理するresourceやhttpResourceといった便利なAPIがある。しかし、これらのAPIには、データが読み込み中の時やエラーが発生した時に、ユーザーインターフェース（UI）の表示をどうするかという点で課題があった。例えば、データを再読み込みしている間、以前のデータが表示されずに画面が空白になってしまったり、エラー発生時に値が取得できず、予期せずエラー画面が表示されてしまったりするケースだ。NgRx v22では、この課題を解決するために「Resource Extensions」が導入された。これは、既存のリソースの振る舞いをカスタマイズできる一連のユーティリティで、リソースを「ラップ」して必要な部分だけを変更できる。具体的には、withPreviousValueOnLoadingを使うと、データを再読み込みしている間も、直前に取得した値を表示し続けることができるため、画面のちらつきを防ぎ、スムーズなユーザー体験を提供する。また、withValueOnErrorを使うと、エラー発生時に特定のデフォルト値を返すように設定できるため、アプリケーションが予期せぬエラーで停止する代わりに、ユーザーにわかりやすい代替情報を表示できる。これらの拡張機能は、個々のリソースに適用するだけでなく、provideResourceExtensionsを使ってアプリケーション全体や特定のコンポーネントで一括して設定することも可能だ。これにより、アプリケーション全体で一貫した読み込み中やエラー時の振る舞いを簡単に実現できる。

次に「Dynamic Deep Signals」について説明しよう。「シグナル」はAngularにおける最新の状態管理の仕組みで、アプリケーションの状態を宣言的に管理し、変更があった場合に自動的にUIを更新する強力な機能である。NgRxのsignalStateやSignalStoreを使うと、アプリケーションの状態をシグナルとして定義し、その一部を細かく切り出して利用できる。しかし、これまでは、状態の型が「本」または「null」のように複数の型（ユニオン型）を持つ場合、その中の「本」が持つタイトルなどの詳細なプロパティをシグナルとして直接扱うのが難しかった。データがない場合の「null」が混ざることで、ネストされたシグナルとしての利点が失われ、全体が一つのフラットなシグナルとして扱われてしまう問題があったのだ。NgRx v22では、この点が改善された。今後は、状態がユニオン型であっても、その中にオブジェクトリテラルが含まれていれば、それぞれのオブジェクトリテラルに対して動的に「DeepSignal」（深い階層のシグナル）が生成されるようになった。これにより、データがある時にはその中のプロパティをシグナルとして直接利用し、データがない時には別の振る舞いをする、といったより柔軟で直感的な状態管理が可能になる。これは、複雑なデータの状態をよりシンプルに、そして安全に扱えるようになるため、開発の効率とコードの可読性を大幅に向上させる。

さらに、「SignalStoreFeatureType」という新機能も追加された。NgRxのSignalStoreは、アプリケーションの様々な状態や機能をモジュール化して管理するための強力なツールである。特に、複数の「機能」（Feature）を組み合わせて使うことで、複雑な状態管理ロジックを再利用可能な部品として構築できる。しかし、ある機能が別の機能によって提供される状態やデータに依存する場合、依存元の機能が提供するデータの型を、依存先の機能で手動で再定義する必要があった。これは、依存元の機能に変更があった際に、依存先の機能の型定義も手動で更新しなければならないという、保守性の問題を引き起こしていた。SignalStoreFeatureTypeは、この課題を解決するためのユーティリティである。これを使うと、他の機能がどのような状態やメンバー（プロパティやメソッド）を提供するのかという型情報を自動的に抽出し、それを別の機能の入力型として再利用できるようになった。これにより、型定義の重複が排除され、機能間の依存関係がより強固になり、コードの変更に対する耐性が向上する。結果として、より保守しやすく、拡張しやすいSignalStoreの機能構築が可能になる。

開発環境の面では、「ESLint v10 Compatibility」が重要な更新点である。ESLintはJavaScriptやTypeScriptのコード品質を維持するための静的解析ツールであり、開発プロセスにおいてコードの一貫性とエラーの早期発見に貢献する。NgRx v22は、ESLintの最新バージョンであるv10に対応した。これにより、開発者は最新のESLint環境でNgRxプロジェクトを安心して開発できるようになる。ただし、ESLint v8や従来の.eslintrc形式の設定ファイルはサポート対象外となり、今後は「フラットな設定構文」のみがサポートされる点には注意が必要だ。

ユーザーインターフェースの改善としては、「ドキュメントのライトテーマ」が追加されたことも見逃せない。NgRxの公式ドキュメントサイトは、すでにダークテーマが提供されていたが、v22からはライトテーマも選択できるようになった。これにより、ユーザーは自分の好みや作業環境に合わせてテーマを切り替えられ、より快適にドキュメントを閲覧できる。テーマの選択は記憶され、オペレーティングシステムの設定も尊重される。さらに、アクセシビリティへの配慮も強化され、WCAG AAコントラスト要件を満たす色の調整や、キーボードフォーカスの視覚的な改善、アニメーションを減らす設定（prefers-reduced-motion）への対応なども行われた。これは、より多くの人々がドキュメントにアクセスしやすくなるための重要なステップである。

その他の改善点として、@ngrx/store-devtoolsにactionCreators設定オプションが追加され、Redux DevToolsという状態管理デバッグツールからアクションを手動でディスパッチできるようになり、デバッグの利便性が向上した。@ngrx/entityでは、エンティティのID選択ロジックの型推論が改善され、開発者がより正確な型情報を受け取れるようになった。また、@ngrx/data、@ngrx/effects、@ngrx/component-storeなどのSchematics（コード生成ツール）は、Angularの新しい推奨される依存性注入方法であるinject関数を使用するように更新され、生成されるコードがより現代的になった。

今回のリリースには、いくつかの非推奨化や破壊的変更も含まれているが、ほとんどの場合、NgRxが提供するマイグレーションツールを実行することで、アプリケーションを自動的に最新バージョンにアップグレードできるため、スムーズな移行が可能だ。最新のNgRx v22を利用するには、Angular v22.x、Angular CLI v22.x、TypeScript v6.0.x、RxJS ^6.5.xまたは^7.5.xが最低要件となる。アップグレードは、ng update @ngrx/store@22またはng update @ngrx/signals@22コマンドで実行できる。

NgRxプロジェクトは、コミュニティの貢献によって支えられており、今回のリリースも多くの開発者やスポンサーの協力なしには実現しなかった。継続的な発展のためには、コミュニティからの積極的な参加とサポートが不可欠である。これらの新機能と改善は、Angular開発者にとって、より効率的で、より優れたアプリケーションを構築するための強力なツールとなるだろう。