【初心者】Cursorで「作業記録アプリ」を爆速開発③｜AI駆動開発のコツを公開

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

/Generate Cursor Rules 
下記のプロジェクトルールを作成してください。
　・アプリの要件定義
　・アーキテクチャ設計
　・コンポーネント設計
　・コーディング規約

#開発アプリの概要
基本情報
概要: 日々の作業内容、時間を簡単に記録・管理できるWebアプリケーション
技術: React、ローカルストレージ

🎯 解決する課題
誰の: 日々の積み重ねを実感できない人
何を: 「何をどれだけ達成したか分からない」という成果が実感できない問題
どうやって: ゲーミフィケーション要素を取り入れて達成感を演出する
 
⚙️ 主要機能
作業記録
 - ワンクリックでの作業開始/停止/終了記録
 - 作業内容のメモ・コメント登録
作業ストリーク（連続記録）
 - 「3日連続1時間以上作業」「5日連続タスク完了」など小さなストリークを可視化
 - ストリーク継続中は画面上の植物やペットが成長する演出（ユーザーが親しみやすいものを選択）
 - ストリークが途切れても「新記録に挑戦！」として前向きにリスタート
カレンダー表示
 - 日付ごとに実行したタスクを、カテゴリ別に色を分けて表示
 - 各日のタスク数や作業時間が棒グラフや濃淡で表現
 - 特定の日付をクリックするだけでその日の詳細なタスク内容にアクセス

🔧 技術的工夫
ローカルストレージ活用でオフライン対応とプライバシー保護を実現
無料APIの効率的活用でコスト0運用

---
alwaysApply: true
---

# コーディング規約

## 1. 命名規則

### コンポーネント

- PascalCase を使用

```typescript
const TaskList = () => { ... }
const UserProfile = () => { ... }
```

### 関数・変数

- camelCase を使用

```typescript
const handleSubmit = () => { ... }
const userData = { ... }
```

### 定数

- SNAKE_CASE を使用

```typescript
const MAX_TASKS = 100;
const API_ENDPOINT = "https://api.example.com";
```

## 2. TypeScript 規約

### 型定義

- インターフェースにはプレフィックス'I'を付けない
- 型エイリアスは目的を明確に示す名前をつける

```typescript
interface Task {
  id: string;
  title: string;
  completed: boolean;
}

type TaskStatus = "pending" | "in_progress" | "completed";
```

### Null/Undefined

- null の代わりに undefined を使用
- オプショナルチェイニングを活用

```typescript
const value = obj?.prop?.subProp;
```

## 3. React コンポーネント規約

### コンポーネント定義

- 関数コンポーネントを使用
- Props 型定義を必須化

```typescript
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};
```

### フック規約

- カスタムフックは'use'プレフィックスを使用
- 依存配列は必ず指定

```typescript
const useTaskStatus = (taskId: string) => {
  const [status, setStatus] = useState<TaskStatus>("pending");

  useEffect(() => {
    // 処理
  }, [taskId]);

  return status;
};
```

## 4. スタイリング規約

### CSS Modules

- コンポーネント名と同じ名前で.module.css ファイルを作成
- クラス名はケバブケース

```css
.task-container {
  margin: 1rem;
}
```

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

- モバイルファーストアプローチ
- メディアクエリのブレークポイントを統一

## 5. コメント規約

### JSDoc

- 公開コンポーネントとフックには必ず JSDoc を記述

```typescript
/**
 * タスクの詳細を表示するコンポーネント
 * @param {TaskDetailProps} props - タスク詳細のProps
 * @returns {JSX.Element} タスク詳細のUI
 */
```

### インラインコメント

- 複雑なロジックには説明を追加
- TODO/FIXME コメントには課題番号を記載
---

---
alwaysApply: true
---

# アーキテクチャ設計

## ディレクトリ構造

```
src/
├── components/       # 再利用可能なUIコンポーネント
├── pages/           # ページコンポーネント
├── hooks/           # カスタムフック
├── services/        # ビジネスロジック
├── store/           # 状態管理
├── types/           # 型定義
├── utils/           # ユーティリティ関数
└── constants/       # 定数定義
```

## レイヤー構造

### 1. Presentation Layer

- UI コンポーネント
- ページコンポーネント
- カスタムフック

### 2. Application Layer

- サービス
- 状態管理（LocalStorage 連携）

### 3. Domain Layer

- エンティティ
- 値オブジェクト
- リポジトリインターフェース

### 4. Infrastructure Layer

- LocalStorage 実装
- 外部 API 連携

## 状態管理設計

### LocalStorage

- タスクデータ
- ユーザー設定
- ストリーク情報

### アプリケーション状態

- 現在の作業タスク
- タイマー状態
- UI 表示状態

## ファイル参照規則

- [App.tsx](mdc:src/App.tsx) - アプリケーションのエントリーポイント
- [index.tsx](mdc:src/index.tsx) - React アプリケーションのルート
- [components/](mdc:src/components) - 共通コンポーネント格納ディレクトリ
  description:
  globs:
  alwaysApply: false

---

---
alwaysApply: true
---

# Task Tracker プロジェクト要件定義

## プロジェクト概要

- 日々の作業内容と時間を記録・管理する Web アプリケーション
- 技術スタック: React + TypeScript + ローカルストレージ
- ターゲットユーザー: 日々の積み重ねを実感したい人

## 機能要件

### 1. タスク管理基本機能

- タスクの作成・編集・削除機能
- タスクステータス管理（未着手・進行中・完了）
- 作業時間の記録（開始/停止/終了）
- タスクへのメモ・コメント追加

### 2. ストリーク管理機能

- 連続作業日数のトラッキング
- 達成ストリークの表示
- ビジュアルフィードバック（植物/ペット成長）
- ストリーク途切れ時の前向きなリスタートメッセージ

### 3. カレンダー機能

- 日別タスク一覧表示
- カテゴリー別色分け表示
- 作業時間の可視化（棒グラフ/濃淡表現）
- 日付別詳細表示

## 非機能要件

### 1. パフォーマンス

- 初期読み込み時間：2 秒以内
- 操作レスポンス：0.5 秒以内

### 2. 可用性

- オフライン動作対応
- ブラウザ対応：最新の Chrome、Firefox、Safari、Edge

### 3. セキュリティ

- データはローカルストレージのみで管理
- センシティブなデータは暗号化して保存
  description:
  globs:
  alwaysApply: false

---

---
alwaysApply: true
---

# コンポーネント設計

## 共通コンポーネント

### TaskItem

```typescript
interface TaskItemProps {
  id: string;
  title: string;
  status: "pending" | "in_progress" | "completed";
  onUpdate: (task: Task) => void;
  onDelete: (id: string) => void;
}
```

### Timer

```typescript
interface TimerProps {
  initialTime?: number;
  onStart: () => void;
  onStop: () => void;
  onReset: () => void;
}
```

### Calendar

```typescript
interface CalendarProps {
  tasks: Task[];
  onDateSelect: (date: Date) => void;
}
```

### StreakDisplay

```typescript
interface StreakDisplayProps {
  streakData: StreakData;
  visualType: "plant" | "pet";
}
```

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

### Dashboard

- タスク一覧表示
- 現在の作業状況
- ストリーク表示
- クイックアクション

### TaskDetail

- タスク詳細情報
- 作業時間記録
- メモ・コメント管理

### CalendarView

- 月別・週別表示
- タスクサマリー
- 作業時間集計

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

1. 単一責任の原則

- 各コンポーネントは 1 つの明確な役割のみを持つ
- 複雑な機能は小さなコンポーネントに分割

2. Props インターフェース

- 全ての Props は明示的な型定義を持つ
- 必須の Props と任意の Props を明確に区別

3. 状態管理

- ローカル状態は useState で管理
- グローバル状態はカスタムフックで抽象化

4. エラーハンドリング

- エラー境界の適切な設置
- ユーザーフレンドリーなエラーメッセージ

5. パフォーマンス最適化

- メモ化（useMemo, useCallback）の適切な使用
- 不要な再レンダリングの防止
  description:
  globs:
  alwaysApply: false

---

# Machi Quest 進捗管理
## 作業状態の定義
- ✅ 完了：作業が完了し、レビューも通過
- 🔄 進行中：現在作業を実施中
- ⏳ 待機中：依存タスクの完了待ちなど
- ❌ 未着手：まだ作業を開始していない
## 1. プロジェクト基盤構築
- ✅ プロジェクト初期化（Create React App + TypeScript）
- ✅ 開発用メモシステム構築
  - ✅ コンポーネント設計メモ
  - ✅ プロジェクトルール設定
- ❌ 基本設定ファイル
  - ❌ TypeScript 設定
  - ❌ ESLint 設定
  - ❌ Prettier 設定
  - ❌ パッケージ依存関係の整理
- ❌ ディレクトリ構造の作成
  - ❌ 型定義ディレクトリ
  - ❌ 定数ディレクトリ
  - ❌ ユーティリティディレクトリ
  - ❌ サービスディレクトリ
  - ❌ フックディレクトリ
  - ❌ コンテキストディレクトリ
  - ❌ コンポーネントディレクトリ
  - ❌ スタイルディレクトリ
## 2. データ型・定数・ユーティリティ
### 2.1 データ型定義
- ❌ ユーザー情報型
- ❌ 歩行記録型
- ❌ クエスト型
- ❌ コース型
### 2.2 定数定義
- ❌ アプリ定数
- ❌ クエスト定数
- ❌ エラーメッセージ定数
### 2.3 ユーティリティ関数
- ❌ 日付処理ユーティリティ
- ❌ 距離計算ユーティリティ
- ❌ バリデーション関数
## 3. データ管理・永続化
### 3.1 ローカルストレージ管理
- ❌ localStorage 操作カスタムフック
- ❌ データ永続化サービス
### 3.2 状態管理
- ❌ ユーザー情報コンテキスト
- ❌ アプリ設定コンテキスト
- ❌ 歩行記録コンテキスト
## 4. デザインシステム・スタイリング
### 4.1 デザインシステム
- ❌ テーマ定義
- ❌ グローバルスタイル
- ❌ レスポンシブブレークポイント定義
### 4.2 スタイリング基盤
- ❌ CSS Modules または Styled Components の設定
- ❌ コンポーネント別スタイルファイル
## 5. 共通コンポーネント実装
### 5.1 汎用コンポーネント
- ❌ Button コンポーネント
- ❌ Input コンポーネント
- ❌ Modal コンポーネント
- ❌ Loading コンポーネント
- ❌ ErrorBoundary コンポーネント
### 5.2 レイアウトコンポーネント
- ❌ Header コンポーネント
- ❌ Footer コンポーネント
- ❌ MainLayout コンポーネント
- ❌ Sidebar コンポーネント
## 6. コア機能実装
### 6.1 歩行記録機能（基盤機能）
- ❌ 歩行統計管理カスタムフック
- ❌ 歩行統計表示
- ❌ 歩数カウンター
- ❌ 達成バッジ表示
- ❌ 履歴グラフ
### 6.2 クエスト機能（ゲーム化要素）
- ❌ クエスト進捗管理カスタムフック
- ❌ クエスト一覧表示
- ❌ クエストカード
- ❌ クエスト進捗表示
- ❌ クエスト報酬表示
### 6.3 コース自動生成機能（メイン機能）
- ❌ 位置情報取得カスタムフック
- ❌ コース生成サービス
- ❌ コース生成メインコンポーネント
- ❌ コース生成フォーム
- ❌ コースプレビュー
- ❌ コース地図表示

npm start