【初心者】Cursorで「家計簿アプリ」を爆速開発②｜AI駆動開発のコツを公開

---
description: 
globs: 
alwaysApply: true
---
# コーディング規約

## 全般
- TypeScriptを使用し、型定義を厳密に行う
- ESLintとPrettierを使用してコードの品質とフォーマットを統一
- コメントは日本語で記述

## 命名規則
- コンポーネント: PascalCase (例: `ExpenseList.tsx`)
- 関数・変数: camelCase (例: `getMonthlyTotal`)
- 定数: SNAKE_CASE (例: `MAX_AMOUNT`)
- インターフェース: 接頭辞に`I`をつける (例: `IExpense`)
- 型定義: 接頭辞に`T`をつける (例: `TCategory`)

## コンポーネント
- 関数コンポーネントとHooksを使用
- Props型は必ず定義
- コンポーネントは単一責任の原則に従う
- 再利用可能なコンポーネントは`components/common`に配置

## スタイリング
- CSS Modulesを使用
- レスポンシブデザインはモバイルファーストで実装
- カラーコードは変数化して管理

## テスト
- Jest + React Testing Libraryを使用
- コンポーネントの主要機能は必ずテストを作成
- テストファイルは実装ファイルと同じディレクトリに配置

---
description: 
globs: 
alwaysApply: true
---
# プロジェクト構造

## ディレクトリ構成
```
src/
├── components/          # コンポーネントディレクトリ
│   ├── common/         # 共通UIコンポーネント
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   └── Card/
│   ├── expense/        # 支出関連コンポーネント
│   │   ├── ExpenseForm/
│   │   ├── ExpenseList/
│   │   └── ExpenseItem/
│   ├── income/         # 収入関連コンポーネント
│   │   ├── IncomeForm/
│   │   ├── IncomeList/
│   │   └── IncomeItem/
│   ├── budget/         # 予算関連コンポーネント
│   │   ├── BudgetForm/
│   │   └── BudgetChart/
│   └── analysis/       # 分析関連コンポーネント
│       ├── MonthlyReport/
│       └── CategoryAnalysis/
├── pages/              # ページコンポーネント
│   ├── Dashboard/
│   ├── Expenses/
│   ├── Income/
│   ├── Budget/
│   └── Analysis/
├── hooks/              # カスタムフック
│   ├── useExpense.ts
│   ├── useIncome.ts
│   └── useBudget.ts
├── store/              # Redux関連
│   ├── actions/
│   ├── reducers/
│   └── types/
├── utils/              # ユーティリティ関数
│   ├── calculations.ts
│   ├── formatters.ts
│   └── validators.ts
├── types/             # 共通の型定義
│   └── index.ts
├── styles/            # グローバルスタイル
│   ├── variables.css
│   └── global.css
└── assets/           # 画像やアイコンなど
    ├── images/
    └── icons/
```

## 主要ファイル
- [src/App.tsx](mdc:src/App.tsx): アプリケーションのルートコンポーネント
- [src/index.tsx](mdc:src/index.tsx): エントリーポイント
- [package.json](mdc:package.json): 依存関係の管理
- [tsconfig.json](mdc:tsconfig.json): TypeScript設定

## ファイル命名規則
- コンポーネント: `ComponentName.tsx`
- スタイル: `ComponentName.module.css`
- テスト: `ComponentName.test.tsx`
- カスタムフック: `useHookName.ts`
- 型定義: `types.ts`

---
description: 
globs: 
alwaysApply: true
---
# プロジェクト概要

## 目的
家計の収支を簡単に管理・分析ができるようになることで、優先度の低い支出を明らかにし、
限られた収入の中で家計を最適化できるようになる。

## ゴール
- ユーザーが収支を簡単に記録・管理できる
- 収支の傾向を視覚的に分析できる
- 予算管理と支出の最適化をサポートする

## 主要タスク
1. 基本機能の実装
   - 収支の記録・編集・削除機能
   - カテゴリ管理機能
   - 月次予算設定機能

2. 分析機能の実装
   - 月次レポート生成
   - グラフ表示機能
   - 予算達成状況の可視化

3. UI/UX改善
   - レスポンシブデザイン対応
   - アクセシビリティ対応
   - パフォーマンス最適化

## 進捗管理
- 詳細な作業項目と進捗状況は[progress.md](mdc:progress.md)で管理
- 作業状態は以下の4段階で管理：
  - ❌ 未着手：まだ作業を開始していない状態
  - ⏳ 待機中：依存タスクの完了待ちなどの状態
  - 🔄 進行中：現在作業を実施している状態
  - ✅ 完了：作業が完了し、レビューも通過した状態

- 作業フロー：
  1. 新規タスク着手時は`progress.md`で作業内容を確認
  2. 作業開始時にステータスを更新（❌→🔄）
  3. 作業完了時にステータスを更新（🔄→✅）
  4. 依存タスクがある場合は待機状態に更新（🔄→⏳）

---
description: 
globs: 
alwaysApply: true
---
# コンポーネント構造

## 基本構造
```tsx
// インポート
import React from 'react';
import styles from './ComponentName.module.css';

// 型定義
interface IComponentProps {
  // propsの型定義
}

// コンポーネント
export const ComponentName: React.FC<IComponentProps> = (props) => {
  // ステートとフック
  // イベントハンドラ
  // 副作用
  // レンダリング
};
```

## コンポーネントの分類

### ページコンポーネント
- URLに紐づくメインコンポーネント
- ルーティング、データフェッチ、状態管理を担当
- 配置: `src/pages/`

### 機能コンポーネント
- 特定の機能を持つ再利用可能なコンポーネント
- 例: ExpenseForm, BudgetChart, IncomeList
- 配置: `src/components/{domain}/`

### 共通コンポーネント
- UIの基本要素として再利用可能なコンポーネント
- 例: Button, Input, Modal, Card
- 配置: `src/components/common/`

## データフロー
- Reduxを使用して全体の状態を管理
- コンポーネント間のデータ受け渡しはpropsを使用
- グローバルな状態変更はアクションを介して実行

## エラー処理
- try-catchでエラーをハンドリング
- エラー状態はErrorBoundaryで管理
- ユーザーフレンドリーなエラーメッセージを表示

## 画面実装ルール
- 画面実装の際は必ず`ワイヤーフレーム.drawio`を参照すること
- ワイヤーフレームと異なる実装が必要な場合は、チームで協議の上で変更を決定
- レスポンシブ対応については、ワイヤーフレームの各ブレイクポイントの指示に従うこと
- コンポーネントの配置や余白は、ワイヤーフレームの指示を厳守

# 進捗管理

## 作業状態の定義

- ✅ 完了：作業が完了し、レビューも通過
- 🔄 進行中：現在作業を実施中
- ⏳ 待機中：依存タスクの完了待ちなど
- ❌ 未着手：まだ作業を開始していない

## 1. 基盤構築

- ✅ プロジェクト初期化（Create React App + TypeScript）
- ✅ ESLint + Prettier の設定
- ✅ 必要なパッケージのインストール
  - TypeScript 関連（@types/\*）
  - Redux 関連（@reduxjs/toolkit, react-redux）
  - ルーティング（react-router-dom）
  - スタイリング（tailwindcss, @emotion/react）
  - テスト（jest, @testing-library/\*）
- ✅ 環境変数の設定（.env）
- ✅ エラー処理の基盤実装
- ✅ ローディング状態の基盤実装

## 2. アプリケーション設計

- ✅ ディレクトリ構造の作成
- ✅ グローバルスタイルの設定
- ✅ ルーティング設計
- ✅ Redux ストアの設計
  - ✅ State 型定義
  - ✅ Slice 設計
  - ✅ Store 設定
- ✅ 共通型定義（収支、予算、カテゴリ等）
- ✅ API クライアントの実装（LocalStorage 用）

## 3. 共通コンポーネントの実装

- ✅ デザインシステムの定義
  - 色・フォント・スペーシング
  - コンポーネントの振る舞い
- ✅ Button コンポーネント
- ✅ Input コンポーネント
- ✅ Modal コンポーネント
- ✅ Card コンポーネント
- ✅ Form コンポーネント
- ✅ 共通コンポーネントのテスト作成
- ✅ Navigation コンポーネント
  - ✅ PC/スマホ対応レイアウト
  - ✅ アクティブ状態の表示
  - ✅ スマホ用追加ボタン
    - ✅ ボタンの配置
    - ✅ 取引登録フォームの表示

## 4. 画面実装

### 4.1 ダッシュボード画面

- ✅ 今月の収支サマリー
  - ✅ 収入・支出・収支バランスの表示
  - ✅ 予算達成状況の表示
- ✅ カレンダー形式での収支表示
  - ✅ 日別収支金額の表示
  - ✅ 収支バランスの色分け表示
  - ✅ 日付クリックで詳細表示
- ⏳ 収入・支出・収支の推移グラフ

### 4.2 収支管理画面

- ✅ 取引一覧表示
  - ✅ 日付でのグループ化表示
  - ✅ 金額、メモ、カテゴリの表示
  - ✅ レスポンシブデザイン対応
- ✅ 取引の登録・編集
  - ✅ 収入/支出切り替え
  - ✅ 日付選択
  - ✅ カテゴリ選択
  - ✅ 金額入力（電卓スタイル）
  - ✅ メモ入力
  - ✅ バリデーション実装
- ✅ 取引の削除
  - ✅ 削除確認ダイアログ
- ✅ 月次表示切替
  - ✅ 前月・翌月ナビゲーション
  - ✅ 今月へのショートカット

### 4.3 予算管理画面

- ✅ 月次予算の設定
  - ✅ カテゴリ別予算の設定
  - ✅ 予算の追加・編集・削除機能
  - ✅ 予算サマリーの表示
  - ✅ バリデーション実装
  - ✅ エラーハンドリング

### 4.4 カテゴリ管理画面

- ✅ カテゴリ一覧
  - ✅ 収入・支出カテゴリの分類
  - ✅ カテゴリの並び替え
  - ✅ カテゴリの有効/無効切替
- ✅ カテゴリの登録・編集
  - ✅ カテゴリ名の設定
  - ✅ 収入/支出の分類
  - ✅ 予算管理有無の設定
- ✅ カテゴリの削除
  - ✅ 削除確認ダイアログ
  - ✅ 関連データの処理