【ITニュース解説】Custom Store Features in NgRx Signal Store

Webアプリケーション開発、特にAngularのような大規模なフレームワークを使用する際、アプリケーション全体で共有されるデータを一元管理する「状態管理」は非常に重要な概念である。ユーザーのログイン情報、ショッピングカートの中身、UIの表示状態といったデータは、多くのコンポーネントから参照されたり更新されたりする。この状態管理を効率的に行うためのライブラリとして、AngularではNgRxが広く利用されている。開発を進める中で、異なる機能間で同じようなデータ構造やロジックが必要になる場面は少なくない。例えば、ユーザー情報と管理者情報の両方に「最終ログイン日時」という情報を持たせたい場合などが挙げられる。このような共通の機能を単純にコピーアンドペーストで実装してしまうと、コードの重複が発生し、将来的な修正や機能追加の際に複数の箇所を修正する必要が生じるなど、保守性の低下を招く原因となる。

この問題を解決するため、NgRxが提供する新しい状態管理のアプローチ「Signal Store」には、「カスタムストアフィーチャー」という強力な仕組みが用意されている。これは、複数のストアで共通して利用される状態やロジックを一つの独立した部品、すなわち「フィーチャー」として切り出し、再利用可能にするための機能である。これにより、共通の機能は一度だけ定義すればよくなり、コードの重複を避け、アプリケーション全体の構造をクリーンに保つことができる。カスタムフィーチャーは、状態を定義する withState、状態から派生した値を計算する withComputed、状態を更新するロジックをまとめた withMethods などを組み合わせて作成される。

具体的な例として、オンラインゲームのプレイヤー情報とチーム情報を管理するアプリケーションを考える。このアプリケーションには、プレイヤー個々の情報を管理する「PlayerStore」と、チームの情報を管理する「TeamStore」の二つのストアが存在する。プレイヤーには名前や役割があり、チームにはチーム名や勝利数といった固有の情報がある。ここで、プレイヤーとチームの両方に「ランク」という共通の概念を導入したいとする。ランクには「ブロンズ」「シルバー」「ゴールド」といった階級があり、「現在のランクは何か」という状態や、「ゴールドランクかどうかを判定する」といったロジックが必要になる。このランクに関する機能を、PlayerStore と TeamStore の両方に個別に実装するのは非効率である。そこでカスタムストアフィーチャーが役立つ。まず、「ランク」に関する状態とロジックを withRank という名前のカスタムフィーチャーとして独立させる。このフィーチャーには、rank という状態と、その値が gold であるかを判定する isGold という計算プロパティ、そしてランクを更新するためのヘルパー関数が含まれる。このフィーチャーは signalStoreFeature という関数を用いて定義される。

この withRank フィーチャーを作成した後、PlayerStore と TeamStore の定義にそれを組み込む。signalStore 関数で各ストアを作成する際に、プレイヤー名やチーム名といった固有の状態を定義する withState に加えて、引数として withRank() を渡すだけでよい。これにより、PlayerStore も TeamStore も、それぞれの固有の状態に加えて、rank の状態や isGold という計算プロパティを持つことができるようになる。例えば、PlayerStore はプレイヤー名、役割、そしてランクという三つの状態を管理するストアとなり、TeamStore はチーム名、勝利数、そしてランクを管理するストアとなる。このように、共通機能を一つのフィーチャーとして定義し、必要なストアに適用するだけで、コードを重複させることなく機能を拡張できる。

このようにして構築されたストアは、Angularのコンポーネントで直感的に利用できる。例えば、プレイヤーの情報を表示するコンポーネントでは、PlayerStore を注入し、テンプレート内で playerStore.name() や playerStore.rank() といった形で状態を直接参照して表示する。また、カスタムフィーチャーによって追加された playerStore.isGold() を使えば、「このプレイヤーはゴールドランクです」といったメッセージを条件付きで表示することも容易である。さらに、ボタンがクリックされた際に playerStore.promoteToGold() のようなメソッドを呼び出すことで、状態の更新も簡単に行える。TeamStore を利用するコンポーネントでも全く同様のことが可能となる。このカスタムストアフィーチャーというアプローチを用いることで、開発者は共通ロジックの重複を心配することなく、各ストアが本来持つべき責務に集中して実装を進めることができる。結果として、コードの再利用性が高まり、アプリケーション全体の保守性や可読性が大幅に向上するのである。