【テンプレ配布】Kiroの仕様駆動開発をClaude Codeで再現する方法！ドキュメント3点セットで実現

.
├── .claude/
│   ├── CLAUDE.md          # プロジェクトルール
│   └── commands/
│       └── kiro.md        # 仕様生成
├── specs/
│   ├── requirements.md    # 要件定義
│   ├── design.md          # 設計文書
│   └── tasks.md           # タスク一覧

/kiro TODOアプリに優先度機能を追加

### ストーリー1: TODOの作成

**As a** ユーザー
**I want** 新しいTODOタスクを作成できる
**So that** やるべきことを記録できる

**受け入れ基準:**
- [ ] タスクのタイトルを入力できる
- [ ] 作成日時が自動的に記録される

## フェーズ1: 基盤構築

- [x] **Task 1**: プロジェクトセットアップ
- [x] **Task 2**: 開発環境の設定

## フェーズ2: コア機能実装

- [ ] **Task 3**: TODOの作成機能
- [ ] **Task 4**: TODOの一覧表示

## 進捗追跡
- 完了: 2/6
- 進行中: 1
- 未着手: 3

# テンプレートから新しいリポジトリを作成
# GitHubで「Use this template」をクリック

npm create vite@latest todo-app

# Kiroスタイル用ファイルをコピー
cp -r example-project/ todo-app/
cd todo-app/

├── .claude/
│   ├── CLAUDE.md          # プロジェクトルール
│   └── commands/
│       ├── kiro.md        # 仕様初期化
│       └── sync-spec.md   # 仕様同期
├── specs/
│   ├── requirements.md    # 要件定義
│   ├── design.md          # 設計文書
│   └── tasks.md           # タスク一覧

claude

/kiro TODOアプリの作成

/kiro is running… todoアプリ作成

⏺ TODOアプリ作成の仕様を順次作成していきます。まず要件定義から始めます。

⏺ Update Todos
  ⎿ ☐ specs/requirements.md -
      ユーザーストーリーと受け入れ基準を作成
    ☐ specs/design.md -
      システムアーキテクチャと技術スタックを定義
    ☐ specs/tasks.md -
      実装タスクの一覧と依存関係を整理

⏺ 要件定義を作成しました。これを確認してから、設計とタスクの仕様を作成しま
  す。

  要件の概要：

  - 7つのユーザーストーリー: タスクの作成、一覧表示、完了切り替え、編集、
  削除、フィルタリング、データ永続化
  - 非機能要件: パフォーマンス、使いやすさ、ブラウザサポート

  要件に問題がなければ、次に設計仕様（design.md）を作成しますが、よろしい
  でしょうか？

# TODOアプリ要件定義

## プロジェクト概要
シンプルで使いやすいTODOアプリケーションを作成する。ユーザーが日々のタスクを効率的に管理できるWebアプリケーション。

## ユーザーストーリー

### 1. タスクの作成
**As a** ユーザー
**I want** 新しいタスクを作成できる
**So that** やるべきことを記録できる

**受け入れ基準:**
- [ ] タスクのタイトルを入力できる
- [ ] Enterキーまたは追加ボタンでタスクを作成できる
- [ ] 空のタスクは作成できない
- [ ] 作成したタスクはリストに即座に表示される

### 2. タスクの一覧表示
**As a** ユーザー
**I want** すべてのタスクを一覧で見る
**So that** 何をすべきか把握できる

**受け入れ基準:**
- [ ] すべてのタスクがリスト形式で表示される
- [ ] 各タスクにはタイトルが表示される
- [ ] 完了/未完了の状態が視覚的に区別できる
- [ ] タスクがない場合は適切なメッセージが表示される

### 3. タスクの完了/未完了の切り替え
**As a** ユーザー
**I want** タスクの完了状態を切り替える
**So that** 進捗を管理できる

**受け入れ基準:**
- [ ] チェックボックスまたはクリックで状態を切り替えられる
- [ ] 完了したタスクは打ち消し線が表示される
- [ ] 状態の変更は即座に反映される
- [ ] 完了したタスクも一覧に残る

### 4. タスクの編集
**As a** ユーザー
**I want** 既存のタスクを編集する
**So that** 内容を更新できる

**受け入れ基準:**
- [ ] タスクをクリックまたは編集ボタンで編集モードに入れる
- [ ] タイトルを直接編集できる
- [ ] Enterキーまたは保存ボタンで変更を保存できる
- [ ] Escキーでキャンセルできる
- [ ] 空の内容には更新できない

### 5. タスクの削除
**As a** ユーザー
**I want** 不要なタスクを削除する
**So that** リストを整理できる

**受け入れ基準:**
- [ ] 各タスクに削除ボタンがある
- [ ] 削除ボタンをクリックすると確認ダイアログが表示される
- [ ] 確認後、タスクがリストから削除される
- [ ] 削除は取り消しできない

### 6. タスクのフィルタリング
**As a** ユーザー
**I want** 完了/未完了でタスクをフィルタリングする
**So that** 必要なタスクだけを見ることができる

**受け入れ基準:**
- [ ] 「すべて」「未完了」「完了済み」のフィルターオプションがある
- [ ] フィルターの切り替えが即座に反映される
- [ ] 現在のフィルター状態が視覚的にわかる
- [ ] フィルター適用中もタスクの操作が可能

### 7. データの永続化
**As a** ユーザー
**I want** タスクがブラウザを閉じても保存される
**So that** データを失わない

**受け入れ基準:**
- [ ] ブラウザのローカルストレージにデータが保存される
- [ ] ページをリロードしてもタスクが復元される
- [ ] タスクの作成/編集/削除が自動的に保存される
- [ ] ストレージエラー時は適切なエラーメッセージが表示される

## 非機能要件

- **パフォーマンス**: タスクの追加/編集/削除は100ms以内に完了する。1000件のタスクでも快適に動作する
- **使いやすさ**: レスポンシブデザインでモバイルでも使いやすい。キーボードショートカットをサポート。アクセシビリティに配慮（WAI-ARIA対応）
- **ブラウザサポート**: Chrome（最新版）、Firefox（最新版）、Safari（最新版）、Edge（最新版）

> ok

⏺ Update Todos
  ⎿  ☒ specs/requirements.md - ユーザーストーリーと受け入れ基準を作成
     ☐ specs/design.md - システムアーキテクチャと技術スタックを定義
     ☐ specs/tasks.md - 実装タスクの一覧と依存関係を整理

⏺ TODOアプリの仕様ファイルをすべて作成しました：

  📁 作成した仕様ファイル

  1. specs/requirements.md - 7つのユーザーストーリーと受け入れ基準
  2. specs/design.md - React/TypeScript/Viteを使用したSPAアーキテクチャ
  3. specs/tasks.md - 20個の実装タスクを5つのフェーズに分割

  これで仕様定義が完了しました。実装を開始する準備ができています。

# TODOアプリ設計文書

## アーキテクチャ概要

シングルページアプリケーション（SPA）として実装。フロントエンドのみで完結し、データはブラウザのローカルストレージに保存する。

## 技術スタック

- **言語**: TypeScript 5.x
- **フレームワーク**: React 18.x
- **ビルドツール**: Vite 5.x
- **スタイリング**: CSS Modules
- **状態管理**: React Context API + useReducer
- **テスト**: Vitest + React Testing Library
- **リンター**: ESLint + Prettier

## コンポーネント構成

```
src/
├── components/
│   ├── App.tsx                 # ルートコンポーネント
│   ├── TodoInput.tsx           # タスク入力フォーム
│   ├── TodoList.tsx            # タスク一覧表示
│   ├── TodoItem.tsx            # 個別タスクコンポーネント
│   ├── TodoFilter.tsx          # フィルターボタン
│   └── EditModal.tsx           # 編集用モーダル（インライン編集の場合は不要）
├── contexts/
│   └── TodoContext.tsx         # TODOの状態管理
├── hooks/
│   ├── useTodos.ts             # TODO操作のカスタムフック
│   └── useLocalStorage.ts      # ローカルストレージ同期フック
├── types/
│   └── todo.ts                 # 型定義
└── utils/
    └── storage.ts              # ローカルストレージ操作

```

## データフロー

1. **タスク作成**: TodoInput → useTodos → TodoContext → LocalStorage
2. **状態更新**: TodoItem → useTodos → TodoContext → LocalStorage
3. **フィルタリング**: TodoFilter → TodoContext → TodoList（表示の更新）
4. **初期化**: App起動時 → LocalStorage → TodoContext → 各コンポーネント

## 型定義

```typescript
// types/todo.ts
interface Todo {
  id: string;           // UUID
  title: string;        // タスクのタイトル
  completed: boolean;   // 完了状態
  createdAt: Date;      // 作成日時
  updatedAt: Date;      // 更新日時
}

type FilterType = 'all' | 'active' | 'completed';

interface TodoState {
  todos: Todo[];
  filter: FilterType;
}
```

## 状態管理設計

### TodoContext

```typescript
interface TodoContextValue {
  todos: Todo[];
  filter: FilterType;
  addTodo: (title: string) => void;
  updateTodo: (id: string, title: string) => void;
  toggleTodo: (id: string) => void;
  deleteTodo: (id: string) => void;
  setFilter: (filter: FilterType) => void;
}
```

### Reducer Actions

```typescript
type TodoAction =
  | { type: 'ADD_TODO'; payload: { title: string } }
  | { type: 'UPDATE_TODO'; payload: { id: string; title: string } }
  | { type: 'TOGGLE_TODO'; payload: { id: string } }
  | { type: 'DELETE_TODO'; payload: { id: string } }
  | { type: 'SET_FILTER'; payload: { filter: FilterType } }
  | { type: 'LOAD_TODOS'; payload: { todos: Todo[] } };
```

## ローカルストレージ設計

- **キー**: `todo-app-data`
- **形式**: JSON文字列
- **保存タイミング**: 全ての状態変更時
- **エラーハンドリング**: try-catchで包み、エラー時はコンソールに出力

## UI/UX設計

### レイアウト

```
┌─────────────────────────────────────┐
│          TODOアプリ                  │
├─────────────────────────────────────┤
│  [          入力フィールド        ]  │
│  [追加]                             │
├─────────────────────────────────────┤
│  [すべて] [未完了] [完了済み]       │
├─────────────────────────────────────┤
│  □ タスク1              [編集][削除] │
│  ☑ タスク2              [編集][削除] │
│  □ タスク3              [編集][削除] │
└─────────────────────────────────────┘
```

### スタイリング方針

- モバイルファースト設計
- 最小幅: 320px
- 最大幅: 800px（中央寄せ）
- カラーパレット:
  - プライマリ: #007bff
  - 完了: #6c757d
  - 削除: #dc3545
  - 背景: #f8f9fa

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

- React.memoを使用してコンポーネントの再レンダリングを最小化
- useCallbackでイベントハンドラをメモ化
- 大量のタスクに対応するため、仮想スクロールの実装を検討（1000件以上の場合）

## アクセシビリティ

- すべてのインタラクティブ要素にaria-label
- キーボードナビゲーション対応
- フォーカス管理
- スクリーンリーダー対応

# TODOアプリ実装タスク一覧

## フェーズ1: 基盤構築

- [ ] **Task 1**: プロジェクトセットアップ
  - Viteでプロジェクトを初期化
  - TypeScript設定
  - 基本的なディレクトリ構造の作成
  - 依存関係: なし

- [ ] **Task 2**: 開発環境の設定
  - ESLint、Prettierの設定
  - CSS Modulesの設定
  - package.jsonのスクリプト設定
  - 依存関係: Task 1

- [ ] **Task 3**: 型定義の作成
  - types/todo.tsの作成
  - 基本的な型インターフェースの定義
  - 依存関係: Task 1

## フェーズ2: コア機能実装

- [ ] **Task 4**: ローカルストレージユーティリティの実装
  - utils/storage.tsの作成
  - 保存・読み込み・エラーハンドリング
  - 依存関係: Task 3

- [ ] **Task 5**: TodoContextとReducerの実装
  - contexts/TodoContext.tsxの作成
  - Reducerロジックの実装
  - 依存関係: Task 3, Task 4

- [ ] **Task 6**: カスタムフックの実装
  - hooks/useTodos.tsの作成
  - hooks/useLocalStorage.tsの作成
  - 依存関係: Task 5

- [ ] **Task 7**: TodoInputコンポーネントの実装
  - components/TodoInput.tsxの作成
  - 入力フォームとバリデーション
  - 依存関係: Task 6

- [ ] **Task 8**: TodoItemコンポーネントの実装
  - components/TodoItem.tsxの作成
  - チェックボックス、編集、削除機能
  - 依存関係: Task 6

- [ ] **Task 9**: TodoListコンポーネントの実装
  - components/TodoList.tsxの作成
  - タスク一覧表示とフィルタリング
  - 依存関係: Task 8

- [ ] **Task 10**: TodoFilterコンポーネントの実装
  - components/TodoFilter.tsxの作成
  - フィルターボタンの実装
  - 依存関係: Task 6

- [ ] **Task 11**: Appコンポーネントの実装
  - components/App.tsxの作成
  - 全体レイアウトとContextProvider
  - 依存関係: Task 7, Task 9, Task 10

## フェーズ3: スタイリングとUX

- [ ] **Task 12**: 基本スタイルの実装
  - CSS Modulesファイルの作成
  - レスポンシブデザインの実装
  - 依存関係: Task 11

- [ ] **Task 13**: アニメーションとトランジションの追加
  - タスク追加・削除時のアニメーション
  - 状態変更時のトランジション
  - 依存関係: Task 12

- [ ] **Task 14**: キーボードショートカットの実装
  - Enter/Escキーのハンドリング
  - フォーカス管理
  - 依存関係: Task 11

## フェーズ4: テストと品質保証

- [ ] **Task 15**: ユニットテストの作成
  - コンポーネントテスト
  - カスタムフックのテスト
  - Reducerのテスト
  - 依存関係: Task 11

- [ ] **Task 16**: 統合テストの実施
  - ユーザーフロー全体のテスト
  - ローカルストレージとの連携テスト
  - 依存関係: Task 15

- [ ] **Task 17**: アクセシビリティの実装
  - ARIA属性の追加
  - スクリーンリーダー対応
  - 依存関係: Task 14

## フェーズ5: 最適化とデプロイ準備

- [ ] **Task 18**: パフォーマンス最適化
  - React.memoの適用
  - useCallbackの適用
  - 大量データ対応の検討
  - 依存関係: Task 11

- [ ] **Task 19**: ビルド設定の最適化
  - Viteのビルド設定
  - 本番環境用の最適化
  - 依存関係: Task 18

- [ ] **Task 20**: ドキュメント作成
  - README.mdの作成
  - 使用方法とセットアップ手順
  - 依存関係: Task 19

## 進捗追跡

- 完了: 0/20
- 進行中: 0
- 未着手: 20

## 実装順序の推奨

1. フェーズ1を順番に実施（基盤が必要）
2. フェーズ2はTask 4-6を先に実施（状態管理の基盤）
3. フェーズ2のTask 7-11は並行実施可能
4. フェーズ3-5は順次実施

> Reactプロジェクトをセットアップ済みなので Task1 は不要です

> /init

> specs/tasks.md に沿って開発を進めて