バージョンアップ情報
NgRx情報
NgRxとは
NgRxはAngularフレームワークでリアクティブなアプリケーションを構築するためのライブラリ群です。
ReduxパターンとRxJSを活用し、アプリケーションのグローバルおよびローカルな状態管理を効率的に行うことより、副作用を明示的に管理し、クリーンなコンポーネントアーキテクチャの促進を助けます。
主な機能
NgRxの主な機能（パッケージ）は以下の通りです。
1．管理
Store
Reduxにインスパイアされ、RxJSを活用したグローバルな状態管理を提供します。
状態の一貫性を保ちながら、スケーラブルなアプリケーションを開発します。
Effects
アプリケーションのサイドエフェクト（例：API呼び出し）をStoreの外部で処理し、コンポーネントの関心ごとを分離します。
Router Store
Angular Routerと@ngrx/storeを統合し、ナビゲーションイベントを状態として管理可能にします。
Entity
レコードコレクションの管理を簡素化するためのエンティティ状態アダプターを提供します。
Signals
コンポーネント間のリアクティブなデータ共有を支援するユーティリティセットです。
ComponentStore
コンポーネントやローカルの状態を単独で管理するためのライブラリです。
2．データ管理
Data
エンティティデータの取得、キャッシュ、更新を容易にする拡張機能で、データ管理の煩雑さを軽減します。
3．ビュー拡張
Component
リアクティブなAngularテンプレートの構築を支援し、UI層のパフォーマンスを向上させます。
4．開発者ツール
Store Devtools
状態の変化を可視化し、デバッグを容易にするツールで、時間を遡って状態を確認できるタイムトラベルデバッグをサポートします。
Schematics
NgRxを利用したAngularアプリケーションのスキャフォールディングを行い、規模の大きなプロジェクトの構築を助けます。
ESLint Plugin
コードの品質を保つために、ベストプラクティスを促進するルールセットを提供し、自動修正機能も備えています。
NgRxのユースケース
NgRxのユースケースは以下の通りです。
※以下はいずれもNgRxの公式ブログで公開されている情報です。
NgRx コンポーネントを使用したリアクティブ Angular テンプレートの構築
@ngrx/componentライブラリは、ゾーンフルおよびゾーンレスモードで宣言可能な要素を含み、観測可能なイベントのレンダリングに用いることができます。
特に注目されているのは、ngrxPushパイプと*ngrxLetディレクティブです。
NｇrxPushパイプは、asyncパイプの代替として、観測可能な値を効率よくテンプレートに表示し、同じ値が連続して発行されてもホストコンポーネントを汚さないようにすることができます。
*ngrxLetは、観測イベントの値が真偽値にかかわらず埋め込みビューを作成し、複数の観測可能な状態を追跡することができます。
スタンドアロン Angular 機能で NgRx パッケージを使用
Angularバージョン14で導入されたスタンドアロンAPIは、NgModulesを使用せずにAngularアプリケーションを構築でき、コンポーネントやディレクティブ、パイプをモジュールへの宣言なしで利用可能です。
NgRxの機能もモジュールなしで設定可能のため、機能ごとのリデューサーやエフェクトを関数を使用して登録できます。
動作環境
NgRxはAngularのリアクティブライブラリのため、Angularが利用可能な環境で動作します。
Angularの最新バージョンv19.x（2025/1時点）での動作環境は以下の通りです。
- Node.jsv18.19.1以降
- テキストエディタ Visual Studio Code（推奨）
NgRxのライセンス
NgRxのライセンスはMITライセンスです。MITライセンスは、X Window System (X11)などのソフトウェアに適用されていることから、X11ライセンス、またはXライセンスとも表記されます。
MITライセンスは、数あるソフトウェアライセンスの中で最も制約が少なく、ソースコードの無償の使用のほか、改変、再配布することも認められています。
参考情報
オープンソース年間サポートサービス
OpenStandiaではOSSを安心してご利用いただけるように、オープンソース年間サポートサービスをご提供しております。
サポートしているOSSは下記ページをご参照ください。
