【初心者】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: MVP（基本機能実装）
### 0. プロジェクトルールの作成
- [×] コーディング規約・コンポーネント構造・プロジェクト構造ルールの策定
- [×] ルールファイル（.cursor/rules/ 配下など）への記述
### 1. プロジェクトセットアップ
- [x] プロジェクト初期化
- [x] 型定義の作成
- [x] 必要なパッケージのインストール
  - [-] ~~react-beautiful-dnd~~ → @dnd-kit/core に変更
  - [x] @dnd-kit/core
  - [x] @dnd-kit/sortable
  - [x] @dnd-kit/utilities
### 2. カンバンボードの基本構造
- [x] コンポーネント構造の実装
  - [x] `components/organisms/TodoBoard.tsx`（メインのボードコンポーネント）
  - [x] `components/organisms/TodoList.tsx`（Todo リストコンポーネント）
  - [x] `components/molecules/TodoItem.tsx`（Todo アイテムコンポーネント）
- [x] ドラッグ&ドロップの基本機能
  - [x] カラム内でのドラッグ&ドロップ
  - [x] カラム間でのドラッグ&ドロップ
### 3. Todo の基本操作
- [x] 作成機能
  - [x] 作成フォームの UI 実装
  - [x] バリデーション
  - [x] 作成ロジック
- [x] 表示機能
  - [x] カード形式での表示
  - [x] 詳細モーダル
- [x] 編集機能
  - [x] 編集フォームの UI 実装
  - [x] 更新ロジック
- [x] 削除機能
  - [x] 削除確認 UI
  - [x] 削除ロジック
### 4. データ永続化
- [x] LocalStorage の実装
  - [x] 保存機能
  - [x] 読み込み機能
  - [x] 自動保存
### 5. 基本的なスタイリング
- [x] グローバルスタイルの設定
- [x] ボードのレイアウト
- [x] カラムのスタイリング
- [x] カードのスタイリング
## 🎨 フェーズ 2: 機能拡張
### 1. 検索機能
- [x] 検索バーの UI 実装
- [x] インクリメンタル検索
- [x] 検索結果の表示
### 2. フィルタリング機能
- [x] フィルター UI
  - [x] 優先度フィルター
  - [x] カテゴリーフィルター
  - [x] 期限フィルター
- [x] フィルタリングロジック
### 3. UI 改善
- [x] ドラッグ&ドロップのアニメーション
- [x] ローディング状態の表示
- [x] エラー表示
- [x] トースト通知
### 4. テスト
- [ ] ユニットテスト
  - [ ] コンポーネントテスト
  - [ ] ユーティリティ関数テスト
- [ ] 統合テスト
  - [ ] ドラッグ&ドロップテスト
  - [ ] フィルタリングテスト
## ✨ フェーズ 3: 完成度向上
### 1. パフォーマンス最適化
- [ ] メモ化（useMemo, useCallback）
- [ ] 不要な再レンダリングの防止
- [ ] 仮想スクロール対応
### 2. アクセシビリティ
- [ ] キーボード操作
- [ ] スクリーンリーダー対応
- [ ] WAI-ARIA 対応
### 3. レスポンシブ対応
- [ ] デスクトップレイアウト（3 カラム）
- [ ] タブレットレイアウト（2 カラム）
- [ ] モバイルレイアウト（1 カラム）
- [ ] タッチデバイス対応
### 4. ダークモード
- [ ] カラーテーマの作成
- [ ] テーマ切り替え機能
- [ ] テーマ設定の保存
### 5. E2E テスト
- [ ] 基本操作のテスト
- [ ] ドラッグ&ドロップのテスト
- [ ] レスポンシブ対応のテスト
## 📝 進捗管理の使い方
- `[ ]` : 未着手のタスク
- `[x]` : 完了したタスク
- `[-]` : 進行中のタスク
- `[!]` : 問題が発生しているタスク
## 🐛 既知の問題
- なし
## 📋 次回のミーティングアジェンダ
1. フェーズ 1 の進捗確認
2. 実装上の課題の共有
3. 優先順位の調整
4. 次のマイルストーンの設定

npm start