Component
    ↓ 依存
ScoreService（Facade：操作 + 算出ロジック）
    ↓ 依存
ScoreStateManager（状態保持）

/** Signalsの例 */
export class ScoreStateManager {
  #scoreStateList = signal<ScoreState[]>([]);
 
  public addUser(username: string): void {
    const newUser: ScoreState = { username, civilScore: 0, /* 他のスコアも初期化 */ };
    this.#scoreStateList.update((scores) => [...scores, newUser]);
  }
 
  public removeUser(username: string): void {
    this.#scoreStateList.update((scores) => scores.filter((s) => s.username !== username));
  }
 
  public updateCivilScore(username: string, score: number): void {
    this.#scoreStateList.update((scores) =>
      scores.map((s) => (s.username === username ? { ...s, civilScore: score } : s))
    );
  }
  // 他のスコア更新メソッドも同様のパターン
 
  public asReadonly() {
    return { scores: this.#scoreStateList.asReadonly() };
  }
}

/** Action定義 */
export const ScoreActions = createActionGroup({
  source: 'Score',
  events: {
    'Add User': props<{ username: string }>(),
    'Remove User': props<{ username: string }>(),
    'Update Civil Score': props<{ username: string; score: number }>(),
    // 他のスコア更新Actionも同様に定義...
  },
});
 
/** Reducer定義 */
export const scoreReducer = createReducer(
  initialState,
  on(ScoreActions.addUser, (state, { username }) => ({
    ...state,
    scores: [...state.scores, { username, ...DEFAULT_SCORE }],
  })),
  on(ScoreActions.removeUser, (state, { username }) => ({
    ...state,
    scores: state.scores.filter((s) => s.username !== username),
  })),
  on(ScoreActions.updateCivilScore, (state, { username, score }) => ({
    ...state,
    scores: state.scores.map((s) =>
      s.username === username ? { ...s, civilScore: score } : s
    ),
  })),
  // 他のスコア更新も同様...
);

**NgRx版**
Component → ScoreService（Facade） → Store + Actions + Reducers + Selectors
 
**Signals版**
Component → ScoreService（Facade） → ScoreStateManager

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly #state;
  readonly #computedScores: Signal<Score[]>;
 
  constructor(private readonly scoreStateManager: ScoreStateManager) {
    this.#state = scoreStateManager.asReadonly();
    // computedシグナルでスコア計算結果をメモ化
    this.#computedScores = this.#calculateScores();
  }
 
  // コンポーネント向けAPI
  public getScore(): Score[] {
    return this.#computedScores();
  }
 
  public updateScore(username: string, score: UpdateScore): void {
    this.scoreStateManager.updateCivilScore(username, score.civilScore);
    this.scoreStateManager.updateScienceScore(username, score.scienceScore);
    // 他のスコアも同様に更新...
  }
 
  // 科学スコアを含む合計点を算出
  #calculateScores(): Signal<Score[]> {
    return computed(() => {
      return this.#state.scores().map((score) => {
        // 3種セット数（最小値）× 7点のボーナス
        const scienceSet = Math.min(
          score.scienceScore.compass,
          score.scienceScore.gear,
          score.scienceScore.tablet,
        );
        // 各シンボルの二乗 + セットボーナス
        const scienceScoreSum =
          scienceSet * 7 +
          score.scienceScore.gear ** 2 +
          score.scienceScore.compass ** 2 +
          score.scienceScore.tablet ** 2;
 
        return {
          ...score,
          scienceScore: { ...score.scienceScore, sum: scienceScoreSum },
          sum: score.civilScore + score.militaryScore + scienceScoreSum + /* 他のスコア */,
        };
      });
    });
  }
}

? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai
 ◯ Windsurf       [ https://docs.windsurf.com/windsurf/cascade/memories#rules        ]
 ◯ None
 ◯ Agents.md      [ https://agents.md/                                               ]
❯◉ Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory            ]
 ◯ Cursor         [ https://docs.cursor.com/en/context/rules                         ]
 ◯ Gemini         [ https://ai.google.dev/gemini-api/docs                            ]
 ◯ GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]

You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
 
## TypeScript Best Practices
 
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain
 
## Angular Best Practices
 
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
  - `NgOptimizedImage` does not work for inline base64 images.
 
## Accessibility Requirements
 
- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
 
### Components
 
- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `computed()` for derived state
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
- Prefer inline templates for small components
- Prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- When using external templates/styles, use paths relative to the component TS file.
 
## State Management
 
- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead
 
## Templates
 
- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.
- Do not write arrow functions in templates (they are not supported).
 
## Services
 
- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection