スキル angular-state-management
📦

angular-state-management

安全

Angular 状態管理の実装

Angular の状態管理は複数の解決策があり複雑です。このスキルでは、メンテナンス性の高いアプリケーションを構築するための Signal、NgRx、コンポーネントストア、および RxJS パターンの意思決定フレームワークと実装パターンを提供します。

対応: Claude Codex Code(CC)
🥉 75 ブロンズ
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「angular-state-management」を使用しています。 Signal と NgRx Store はいつ使うべきですか？

期待される結果:

  • Signal を使用する場合：シンプルなローカル状態、少数のコンポーネント間の共有状態、計算された派生値、軽量ソリューションが必要な場合
  • NgRx Store を使用する場合：複雑なクロス機能依存関係、タイムトラベルデバッグが必要、厳格な単方向データフローが必要、大規模チームの調整が必要な場合

「angular-state-management」を使用しています。 Signal を使用したユーザー状態サービスを作成

期待される結果:

  • サービスには以下が含まれます：プライベートな書き込み可能 signal、asReadonly() を使用したパブリック readonly signal、派生状態のための計算値、状態更新メソッド

セキュリティ監査

安全
v1 • 2/24/2026

Static analysis flagged 70 potential issues. Manual review confirms all findings are false positives. The 'Ruby/shell backtick execution' findings are triggered by markdown code fences and TypeScript template literals. 'Weak cryptographic algorithm' is triggered by words like 'sha' in 'shared' and 'source'. Network-related findings are legitimate documentation URLs and code examples. This is a genuine Angular state management documentation skill with no security concerns.

3
スキャンされたファイル
691
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
50
コミュニティ
100
セキュリティ
96
仕様準拠

作れるもの

適切な状態ソリューションの選択

シンプルな状態には Signal を、機能スコープの状態にはコンポーネントストアを、複雑なフローを持つエンタープライズアプリケーションには NgRx Store を使用するタイミングに関するガイダンスを取得します。

モダンな Signal パターンの実装

計算値を持つ Signal ベースのサービス、Observable からの変換、適切な不変パターンを作成する方法を学びます。

NgRx SignalStore のセットアップ

withState、withMethods、withComputed を使用した NgRx SignalStore を設定し、ボイラープレートなしで型安全な機能状態管理を実現します。

これらのプロンプトを試す

基本状態ソリューションクエリ 
[ユースケースを説明] という Angular アプリがあります。Signal、コンポーネントストア、NgRx のどれを使うべきですか？決定に影響する要因は何ですか？
Signal サービス実装 
[状態を説明] を管理するための Signal ベースのサービスを作成してください。書き込み可能な signal、計算値、状態更新メソッドを含めてください。
NgRx Store セットアップ 
[機能を説明] 用の NgRx Store をセットアップしてください。createActionGroup によるアクション、リデューサー、セレクター、非同期操作のためのエフェクトを含めてください。
BehaviorSubject からの移行 
この RxJS BehaviorSubject サービスを現代の Angular Signals に変換してください。適切なリアクティビティを持つ前後のパターンを示してください。

ベストプラクティス

  • 新しい Angular アプリケーションでは Signal を優先 - これが推奨されるモダンなアプローチです
  • 自動更新を確保するために、すべての派生状態に computed() を使用する
  • グローバル状態ではなく、それを使用する機能の近くに状態を配置する
  • タイムトラベルデバッグ、厳格なパターン、エンタープライズ調整が必要な場合は NgRx を使用する

回避

  • signal の直接変異は避ける - 常に set() または update() メソッドを使用する
  • 状態を過度にグローバル化しない - 複雑さを減らすために可能な限りローカルに保つ
  • 明確なブリッジングパターンなしに RxJS と Signal を混合しない
  • 状態のためにコンポーネント内で subscribe しない - テンプレートで signal を直接使用する

よくある質問

Angular で最もシンプルな状態管理は何ですか？
Signal が最もシンプルです。書き込み可能な状態には signal() を、派生値には computed() を使用します。追加のライブラリは不要です。
Signal よりも NgRx を使うべきなのはいつですか？
複雑な状態フローを持つ大規模アプリケーション、タイムトラベルデバッグが必要な場合、複数のチームが同じコードベースで作業する場合に NgRx を使用します。
Signal と RxJS を混合できますか？
はい。toSignal() を使用して Observable を Signal に変換し、toObservable() を使用して Signal を Observable に変換できます。Angular はビルトインサポートを提供しています。
NgRx SignalStore とは何ですか？
SignalStore は、計算値とメソッドを持つリアクティブな状態を提供する新しい NgRx パターンです。従来の NgRx Store よりも軽量です。
BehaviorSubject から Signal に移行するにはどうすればよいですか？
BehaviorSubject を signal() に置き換えます。.next() を .set() または .update() に置き換え、.asObservable() を .asReadonly() に置き換えます。
このスキルは私のためにコードを書いてくれますか？
はい、このスキルはコード例とパターンを生成します。プロジェクトにコピーして使用できます。ファイルは直接修正しません。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-state-management

参照

main

ファイル構成

📄 metadata.json

📄 README.md

📄 SKILL.md