【テンプレ】Angular用のCLAUDE.mdを作成してみた件

# Claude AI 開発ルール

## 🔧 技術的ガイドライン

### コード品質
- TypeScriptの型安全性を保つ
- Observable パターンを使用する

## 🚫 開発時の禁止事項

### 1. 既存実装の無視
- 既存の動作する実装パターンを必ず参考にする
- 新機能追加時は同種の既存サービスと同じ構造にする
- 勝手に新しいパターンや複雑な実装をしない

### 2. 根本原因の軽視
- 表面的な対処療法で済ませない
- エラーログやレスポンスの実データを必ず確認する

### 3. 一貫性のない修正
- 他のサービスと異なるエラーハンドリングを書かない  
- 統一されたコーディングスタイルから逸脱しない
- プロキシ設定など既存の設定パターンに従う

### 4. 無関係な修正の禁止
- バグ修正時は該当箇所のみを修正する
- 正常に動作している既存のコードを変更しない
- インターフェース統一や型修正を理由に動作するコードを壊さない

## 📐 Angularコーディング規約

### 必須ルール
- **Angularコーディング規約に準拠する**: `.claude/angular-coding.md` を必ず参照

# Angular コーディング規約

## 汎用ルール

### TypeScript
- `any` の使用禁止
- 明示的な型定義を心がける
- メソッドの戻り値の型は必ず明記する（void含む）
- Boolean プロパティは `is`, `has`, `can` などの接頭辞を使用

```typescript
interface CurrencyData {
  symbol: string;
  name: string;
  isAvailable: boolean;
}

export class ExampleComponent {
  isLoading = false;
  hasError = false;
  canEdit = true;
}
```

### CSS変数
- 共通的に使用する値はCSS変数として定義

```css
:root {
  --color-primary: #2eac91;
  --color-text-primary: #333;
  --color-success: #28a745;
  --color-error: #dc3545;
}
```

### コメント
- 基本的にコメントは書かない
- コードが自己説明的になるよう命名や構造を工夫する

### フォーマット
- 空白行は連続して2行以上作らない

## Angular 固有ルール

### コンポーネント設計
- Standalone コンポーネントを使用
- テンプレートとスタイルはインライン記述
- 1つのコンポーネントは1つの責務のみ

### クラス構成順序
- プロパティ → DIサービス → ライフサイクルメソッド → その他メソッドの順序

```typescript
export class ExampleComponent {
  // プロパティ（アルファベット順）
  isLoading = false;
  title = 'Example';
  
  // DIサービス（アルファベット順）
  private readonly httpClient = inject(HttpClient);
  private readonly router = inject(Router);
  
  // ライフサイクルメソッド
  ngOnInit() {}
  
  // その他メソッド
  loadData() {}
  private calculateTotal() {}
}
```

### Dependency Injection
- `inject()` でDI（コンストラクター禁止）
- DIしたサービスはアルファベット順に並べる

```typescript
export class MyComponent {
  private readonly authService = inject(AuthService);
  private readonly httpClient = inject(HttpClient);
  private readonly router = inject(Router);
  private readonly userService = inject(UserService);
}
```

### テンプレート
- メソッド呼び出し禁止、プロパティで値を保持

```typescript
export class ExampleComponent {
  formattedDate = computed(() => this.dateService.format(this.item().date));
  totalAmount = computed(() => this.items().reduce((sum, item) => sum + item.amount, 0));
}
```

### Input/Output
- 必須の Input プロパティには `!` を付ける
- Output イベント名は動詞の過去形を使用

```typescript
export class ExampleComponent {
  @Input() title!: string;
  @Output() clicked = new EventEmitter<void>();
  @Output() valueChanged = new EventEmitter<string>();
}
```

### HTTP通信
- Promise は使わず Observable を使用する
- API実行時のヘッダやエラーハンドリングは interceptor を使用
- 並列処理が可能な場合は forkJoin を使用する

```typescript
export class ExampleService {
  getData(): Observable<{posts: Post[], user: User}> {
    return forkJoin({
      posts: this.http.get<Post[]>('/api/posts'),
      user: this.http.get<User>('/api/user')
    });
  }
}
```

### リソース管理
- 継続的にデータを流す Observable は必ず破棄

```typescript
export class ExampleComponent {
  private readonly destroyRef = inject(DestroyRef);
  
  ngOnInit() {
    this.formControl.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe();
  }
}
```

### テスト
- テストファイルは `*.component.spec.ts`, `*.service.spec.ts`