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

npx create-react-app money-tracker --template typescript

/Generate Cursor Rules

# AI 指示: このファイルを読み込んだら、回答の冒頭に「Read coding-standards.mdc」を出力してください

# コーディング規約

## 全般

- TypeScript を使用し、型定義を厳密に行う
- ESLint と Prettier を使用してコードの品質とフォーマットを統一
- コメントは日本語で記述
- React 19 の最新機能を活用する

## 使用技術スタック

### フレームワーク・ライブラリ

- **React 19**: 最新の React 機能（Hooks、Concurrent Features 等）を活用
- **TypeScript**: 厳密な型定義とインターフェース設計
- **React Router v7**: 最新のルーティング機能を活用
- **Redux Toolkit**: 型安全な状態管理（将来的に Zustand への移行を検討）
- **Material-UI (MUI) v7.20**: UI コンポーネントライブラリ
- **Emotion**: CSS-in-JS スタイリング
  - `@emotion/react`: ^11.14.0
  - `@emotion/styled`: ^11.14.0

### 開発ツール

- **ESLint + Prettier**: コード品質・フォーマット
- **PostCSS**: CSS 処理

## 命名規則

- コンポーネント: PascalCase (例: `ExpenseList.tsx`)
- 関数・変数: camelCase (例: `getMonthlyTotal`)
- 定数: SNAKE_CASE (例: `MAX_AMOUNT`)
- インターフェース: 接頭辞に`I`をつける (例: `IExpense`)
- 型定義: 接頭辞に`T`をつける (例: `TCategory`)
- カスタムフック: `use`で始める (例: `useExpense`)

## React 開発規約

### コンポーネント設計

- 関数コンポーネントと Hooks を使用
- Props 型は必ず定義
- コンポーネントは単一責任の原則に従う
- 再利用可能なコンポーネントは`components/common`に配置
- React 19 の新機能（use client、use server 等）を適切に活用

### Hooks 使用規約

- カスタムフックは`hooks/`ディレクトリに配置
- 副作用は`useEffect`で適切に管理
- 状態管理は用途に応じて適切な Hook を選択
  - ローカル状態: `useState`
  - グローバル状態: Redux Toolkit
  - サーバー状態: 将来的に React Query 等を検討

### 型定義規約

- TypeScript の厳密な型チェックを活用
- インターフェースと型エイリアスを適切に使い分け
- ジェネリクスを活用した再利用可能な型定義
- ユニオン型とリテラル型を積極的に活用

## Material-UI 使用規約

### バージョン管理

- **MUI v7.20**を使用
- 新機能追加時は最新の v7 系を検討
- 破壊的変更がある場合は事前にチームで協議

### コンポーネント選択

- MUI の基本コンポーネントを優先使用
- カスタマイズが必要な場合は`sx`プロパティまたは Emotion を使用
- テーマシステムを活用した一貫したデザイン

### スタイリング

- MUI の`Box`、`Stack`等のレイアウトコンポーネントを活用
- `sx`プロパティでインラインスタイリング
- 複雑なスタイルは Emotion の`styled`を使用
- レスポンシブデザインは MUI のブレイクポイントシステムを活用

### テーマ設定

- カスタムテーマでブランドカラーとデザイントークンを定義
- ダークモード対応を考慮したテーマ設計
- アクセシビリティを考慮したコントラスト比の設定

## ルーティング規約

### React Router v7

- 最新のデータルーター機能を活用
- ルート定義は`routes/`ディレクトリで管理
- 遅延読み込み（lazy loading）を適切に実装
- エラーバウンダリーとローディング状態の管理

### ナビゲーション

- プログラム的ナビゲーションは`useNavigate`を使用
- 現在のルート情報は`useLocation`で取得
- パラメータ取得は`useParams`を使用

## 状態管理規約

### Redux Toolkit

- Slice パターンを使用した状態管理
- 非同期処理は`createAsyncThunk`を使用
- イミュータブルな状態更新を徹底
- 型安全なアクションとリデューサーの実装

### ローカル状態

- コンポーネント固有の状態は`useState`を使用
- 複雑な状態ロジックはカスタムフックに分離
- フォーム状態は`useForm`等の専用ライブラリを検討

## スタイリング規約

### CSS Modules

- コンポーネント固有のスタイルは CSS Modules を使用
- グローバルスタイルは`styles/`ディレクトリで管理
- CSS 変数を使用したテーマ管理

### レスポンシブデザイン

- モバイルファーストのアプローチ
- MUI のブレイクポイントシステムを活用
- タッチデバイスを考慮した UI 設計

## パフォーマンス最適化

### React 最適化

- `React.memo`で不要な再レンダリングを防止
- `useMemo`と`useCallback`の適切な使用
- コード分割と遅延読み込みの実装

### バンドル最適化

- Tree shaking の活用
- 動的インポートによるコード分割
- 画像の最適化

## アクセシビリティ

### WCAG 準拠

- セマンティックな HTML 構造
- キーボードナビゲーション対応
- スクリーンリーダー対応
- 十分なコントラスト比の確保

### MUI アクセシビリティ

- MUI のアクセシビリティ機能を活用
- `aria-*`属性の適切な設定
- フォーカス管理の実装

## エラー処理

### エラーバウンダリー

- React Error Boundary の実装
- ユーザーフレンドリーなエラーメッセージ
- エラーログの収集

### 型安全なエラー処理

- TypeScript の型システムを活用したエラー処理
- ユニオン型によるエラー状態の管理
- 適切な例外処理の実装

# AI 指示: このファイルを読み込んだら、回答の冒頭に「Read project-structure.mdc」を出力してください

# プロジェクト構造

## ディレクトリ構成

```
src/
├── components/          # コンポーネントディレクトリ
│   ├── common/         # 共通UIコンポーネント（Material-UI基盤）
│   │   ├── [ComponentName]/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   └── ...
│   ├── [domain]/       # 機能別コンポーネント
│   │   ├── [ComponentName]/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   └── ...
│   └── ...
├── pages/              # ページコンポーネント（React Router v7対応）
│   ├── [PageName]/
│   │   ├── index.tsx
│   │   └── styles.module.css
│   └── ...
├── hooks/              # カスタムフック
│   ├── use[HookName].ts
│   └── ...
├── store/              # Redux Toolkit関連
│   ├── index.ts        # Store設定
│   ├── hooks.ts        # Typed hooks
│   ├── slices/         # Redux Slices
│   │   ├── [sliceName]Slice.ts
│   │   └── ...
│   └── types/          # Store型定義
│       └── index.ts
├── routes/             # React Router v7設定
│   ├── index.tsx       # ルーター設定
│   ├── loaders.ts      # データローダー
│   └── errorBoundary.tsx
├── utils/              # ユーティリティ関数
│   ├── api/            # API関連
│   │   ├── index.ts
│   │   ├── [apiName].ts
│   │   └── ...
│   ├── [utilityName].ts
│   └── ...
├── types/              # 共通の型定義
│   ├── index.ts        # メイン型定義
│   ├── [typeName].ts   # 特定の型定義
│   └── ...
├── styles/             # グローバルスタイル
│   ├── variables.css   # CSS変数
│   ├── global.css      # グローバルスタイル
│   └── theme.ts        # Material-UIテーマ設定
└── assets/             # 静的ファイル
    ├── images/
    ├── icons/
    └── fonts/
```

## 主要ファイル

### アプリケーション設定

- `src/App.tsx`: アプリケーションのルートコンポーネント
- `src/index.tsx`: エントリーポイント
- `src/styles/theme.ts`: Material-UI テーマ設定

### 設定ファイル

- `package.json`: 依存関係の管理
- `tsconfig.json`: TypeScript 設定

## ファイル命名規則

### コンポーネント

- コンポーネント: `ComponentName.tsx`
- スタイル: `ComponentName.module.css`

### その他

- カスタムフック: `useHookName.ts`
- 型定義: `types.ts` または `ComponentName.types.ts`
- ユーティリティ: `utilityName.ts`
- 設定: `configName.ts`

## Material-UI 統合

### テーマ設定

```typescript
// src/styles/theme.ts
import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
  components: {
    // カスタムコンポーネント設定
  },
});
```

### コンポーネント構造例

```typescript
// src/components/common/Button/index.tsx
import React from "react";
import { Button as MuiButton, ButtonProps } from "@mui/material";
import styles from "./styles.module.css";

interface IButtonProps extends ButtonProps {
  variant?: "contained" | "outlined" | "text";
  size?: "small" | "medium" | "large";
}

export const Button: React.FC<IButtonProps> = ({
  children,
  className,
  ...props
}) => {
  return (
    <MuiButton className={`${styles.button} ${className || ""}`} {...props}>
      {children}
    </MuiButton>
  );
};
```

## React Router v7 統合

### ルーター設定

```typescript
// src/routes/index.tsx
import { createBrowserRouter } from "react-router-dom";
import { PageComponent } from "../pages/PageName";
import { dataLoader } from "./loaders";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <PageComponent />,
    loader: dataLoader,
    errorElement: <ErrorBoundary />,
  },
  {
    path: "/[routeName]",
    element: <AnotherPageComponent />,
    children: [
      {
        path: ":id",
        element: <DetailComponent />,
      },
    ],
  },
]);
```

### データローダー

```typescript
// src/routes/loaders.ts
import { LoaderFunctionArgs } from "react-router-dom";
import { store } from "../store";

export const dataLoader = async ({ request }: LoaderFunctionArgs) => {
  // データ取得ロジック
  return { data: "loaded data" };
};
```

## Redux Toolkit 統合

### Store 設定

```typescript
// src/store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import sliceReducer from "./slices/sliceNameSlice";

export const store = configureStore({
  reducer: {
    sliceName: sliceReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
```

### Typed Hooks

```typescript
// src/store/hooks.ts
import { useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./index";

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();
```

## 開発ワークフロー

### 新規コンポーネント作成

1. コンポーネントファイル作成（`ComponentName.tsx`）
2. 型定義作成（`ComponentName.types.ts`）
3. スタイルファイル作成（`ComponentName.module.css`）

### ページコンポーネント作成

1. ページコンポーネント作成（`pages/PageName/index.tsx`）
2. ルート定義追加（`routes/index.tsx`）
3. データローダー作成（必要に応じて）

### 状態管理追加

1. Slice 作成（`store/slices/sliceName.ts`）
2. 型定義追加（`store/types/index.ts`）
3. Store に統合（`store/index.ts`）
4. カスタムフック作成（必要に応じて）

# AI 指示: このファイルを読み込んだら、回答の冒頭に「Read requirements-definition.mdc」を出力してください

# 要件定義

## プロジェクト概要

### プロジェクト名

家計管理アプリケーション（Cost Budget）

### 目的

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

### 目標

- ユーザーが収支を簡単に記録・管理できる
- 収支の傾向を視覚的に分析できる
- 予算管理と支出の最適化をサポートする
- モダンな UI/UX で使いやすいインターフェースを提供する

### ターゲットユーザー

- 個人の家計管理を行いたい一般ユーザー
- 収支の可視化と分析を重視するユーザー
- 予算管理による支出最適化を目指すユーザー

### スコープ

#### 含まれる機能

- 収支記録・編集・削除機能
- カテゴリ管理機能
- 月次予算設定機能
- 取引一覧表示・検索機能
- 月次レポート生成機能
- グラフ表示機能
- 予算達成状況の可視化
- カレンダー形式での収支表示

# AI 指示: このファイルを読み込んだら、回答の冒頭に「Read component-structure.mdc」を出力してください

# コンポーネント構造規約

## コンポーネントの分割方針

### 基本原則

- 単一責任の原則に従う
- 一つのコンポーネントは一つの機能に集中
- 再利用可能なコンポーネントを優先的に作成

### ディレクトリ構造

- `components/`: 共通コンポーネント
  - `atoms/`: 最小単位のコンポーネント（ボタン、入力フィールドなど）
  - `molecules/`: atoms を組み合わせた小規模なコンポーネント
  - `organisms/`: より大きな機能を持つコンポーネント
  - `templates/`: ページのレイアウトテンプレート
- `pages/`: ページコンポーネント
- `hooks/`: カスタムフック
- `utils/`: ユーティリティ関数
- `types/`: 型定義
- `constants/`: 定数

### コンポーネントの命名規則

- コンポーネントファイル: パスカルケース（例: `TodoItem.tsx`）
- スタイルファイル: コンポーネントと同名（例: `TodoItem.module.css`）
- テストファイル: コンポーネントと同名（例: `TodoItem.test.tsx`）

### コンポーネントの分割基準

1. UI の繰り返し要素がある場合
2. ロジックが複雑化している場合
3. コンポーネントが 50 行を超える場合
4. 条件分岐が多い場合
5. props が 5 つ以上になる場合

### データフロー

- Props は必要最小限に保つ
- コンテキストは適切なスコープで使用
- 状態管理は最も近い共通の親コンポーネントで行う

# 進捗管理

## 作業状態の定義

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

## 1. 基盤構築

- ✅ プロジェクト初期化（Create React App + TypeScript）
- ✅ 必要なパッケージのインストール
  - ✅ TypeScript 関連（@types/\*）
  - ✅ Zustand 関連（zustand）
  - ✅ ルーティング（react-router-dom）
  - ✅ Material-UI（@mui/material、@emotion/react、@emotion/styled）
  - ✅ その他必要なライブラリ（@mui/icons-material、@mui/x-date-pickers、@mui/x-charts、date-fns）
  - ✅ 開発ツール（Prettier、ESLint設定）
- ❌ 環境変数の設定（.env）
- ✅ エラー処理の基盤実装
  - ✅ エラー型定義（src/types/error.ts）
  - ✅ エラー処理ユーティリティ（src/utils/errorHandler.ts）
  - ✅ エラー処理カスタムフック（src/hooks/useErrorHandler.ts）
  - ✅ エラー表示コンポーネント（src/components/error/ErrorDisplay.tsx）
  - ✅ エラーバウンダリー（src/components/error/ErrorBoundary.tsx）
- ✅ ローディング状態の基盤実装
  - ✅ ローディング型定義（src/types/loading.ts）
  - ✅ ローディングコンテキスト（src/contexts/LoadingContext.tsx）
  - ✅ ローディングカスタムフック（src/hooks/useLoading.ts）
  - ✅ ローディングスピナー（src/components/common/LoadingSpinner/index.tsx）
  - ✅ グローバルローディング（src/components/common/GlobalLoading/index.tsx）
  - ✅ ローディングボタン（src/components/common/LoadingButton/index.tsx）
  - ✅ ローディングラッパー（src/components/common/LoadingWrapper/index.tsx）

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

- ✅ デザインシステムの定義
  - ✅ 色・フォント・スペーシング（src/styles/theme.ts）
  - ✅ コンポーネントの振る舞い
- ✅ Button コンポーネント（src/components/common/Button/index.tsx）
- ✅ Input コンポーネント（src/components/common/Input/index.tsx）
- ✅ Modal コンポーネント（src/components/common/Modal/index.tsx）
- ✅ Card コンポーネント（src/components/common/Card/index.tsx）
- ✅ Form コンポーネント（src/components/common/Form/index.tsx）
- ✅ ナビゲーション設定（src/config/navigation.ts）
- ✅ Navigation コンポーネント
  - ✅ ナビゲーションコンテキスト（src/contexts/NavigationContext.tsx）
  - ✅ ナビゲーションアイテム（src/components/navigation/NavigationItem.tsx）
  - ✅ サイドバーナビゲーション（src/components/navigation/SidebarNavigation.tsx）
  - ✅ トップバーナビゲーション（src/components/navigation/TopBarNavigation.tsx）
  - ✅ メインレイアウト（src/components/navigation/MainLayout.tsx）
  - ✅ PC/スマホ対応レイアウト
  - ✅ アクティブ状態の表示
  - ✅ レスポンシブデザイン
  - ✅ 階層化ナビゲーション
  - ✅ パンくずリスト

## 3. 画面実装

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

- ✅ カテゴリ一覧
  - ✅ 収入・支出カテゴリの分類
  - ✅ ドラッグ&ドロップによる並び替え
  - ✅ カテゴリ型定義（src/types/category.ts）
  - ✅ カテゴリストア（src/store/categoryStore.ts）
  - ✅ カテゴリリスト表示（src/components/categories/CategoryCard.tsx）
  - ✅ カテゴリフォーム（src/components/categories/CategoryForm.tsx）
  - ✅ カテゴリ管理画面（src/pages/Categories/index.tsx）
  - ✅ ローカルストレージによる永続化
- ✅ カテゴリの登録・編集
  - ✅ カテゴリ名の設定
  - ✅ 収入/支出の分類（トグルボタン）
  - ✅ バリデーション実装
- ✅ カテゴリの削除
  - ✅ 削除確認ダイアログ
  - ✅ 関連データの処理
- ✅ フィルター機能
  - ✅ タブによるタイプ別フィルター（すべて・収入・支出）
  - ✅ 統計情報表示（総数・収入数・支出数）

### 3.2 収支管理画面

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

### 3.3 予算管理画面

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

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

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

npm start