こんにちは。エンジニアのAmmarです。
このブログはギークフィードアドベントカレンダー2025の10日目の記事です。
他の記事もぜひチェックしてみてください！
目次
自己紹介
クラウド開発事業部所属のAmmarです。
エンジニア歴は3年で、主にNode.jsを使った開発をしています。
普段使ってるAIツール
日常的に以下のAIツールを活用しています。
- Cursor: 開発の際のコード提案など。携わっている案件で定義したルールのもとにチャットが回答してくれます。
企画概要とゴール
今回、「フルAI開発バトル」という企画に参加しました。
ルールはシンプルかつ過酷です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# 禁止事項：エディタで直接コードを書く・修正すること - 許されるのは「AIへの指示」のみ。人間の役割は「Architect/Reviewer」、つまりAIをマネジメントして成果物を判断することです。 # お題 社員の生産性を上げる日々の業務管理ツールを作ってください。 ## 必須要件： - KiroとPlaywright MCPを使うこと - スペック駆動開発を行うこと（vibe codingはNG） - Todoを追加・編集・削除できること - 追加は画面上部のフォームから可能 - 編集・削除は各行の操作ボタンで行う - 一覧でTodoを確認できること - 一覧にはタイトル、担当者、期限を表示 - サクサク軽く操作できること - 画面は1ページで完結 - PlaywrightでCRUD周りのテストをすること |
詳しいルールや目的はアドベントカレンダー1日目の記事で紹介しております。
作業プロセス
要件の理解と整理
提示した要件を読み、求められる最低限の機能を理解し、なかったらアプリが使えない機能があるかなど気になる点がありませんでしたので早速Specs定義に進みました。
運営への質問事項
Kiroの使い方に慣れるのに集中しすぎて運営へ質問出来ることに気づきませんでした。。。
Specs定義
要件を整理した上で、スペック駆動開発の第一歩として、Kiroに要件定義を依頼しました。
指示に至るまでの思考プロセス
スペック駆動開発の場合requirements.md, design.md, tasks.mdを作ってくれますので簡潔に作りたいものとその要件で指示しました。
Kiroへの指示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
軽量なタスク管理ツールを作りたいです。 機能要件 タスクの追加(画面上部のフォームからテキスト入力)、編集、削除、一覧表示(タイトル、 担当者、期限を表示) ログイン機能は不要 操作性 画面は1ページで完結。サクサク軽く動いて、直感的に操作できること 編集・削除は各行のボタンで可能 データ保持 ブラウザを閉じてもデータが消えないこと 品質保証 Playwright MCPを活用し、E2Eテストが通っていること |
途中で追加要件がありましたのであらためて指示し
|
1 2 3 |
追加要件 完了したタスクを元に戻す機能 |
最後に期限が過ぎたタスクの期限表示を赤色にしたくなりましたので依頼しました。
|
1 2 3 |
追加機能 期限過ぎたら日付を赤にする |
Kiroの出力
出力はすべての指示の結果です。
- requirements.md
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
# Requirements Document ## Introduction 軽量なタスク管理ツールは、ユーザーがタスクを追加、編集、削除、一覧表示できるシンプルなWebアプリケーションです。ログイン機能は不要で、1ページで完結し、ブラウザのローカルストレージを使用してデータを永続化します。直感的な操作性とサクサク動く軽快さを重視し、Playwright MCPを活用したE2Eテストで品質を保証します。 ## Glossary - **Task Manager**: タスク管理ツールシステム全体 - **Task**: タイトル、担当者、期限、完了状態を持つタスクエンティティ - **Local Storage**: ブラウザのローカルストレージAPI - **Task Form**: タスクを追加するための入力フォーム - **Task List**: タスクの一覧を表示するUI要素 - **Completed Task**: 完了状態としてマークされたタスク ## Requirements ### Requirement 1 **User Story:** ユーザーとして、新しいタスクを追加したいので、画面上部のフォームからタイトル、担当者、期限を入力できるようにしたい #### Acceptance Criteria 1. WHEN ユーザーがタスクフォームにタイトル、担当者、期限を入力してEnterキーを押すか追加ボタンをクリックする THEN Task Manager SHALL 新しいタスクを作成してタスクリストに追加する 2. WHEN ユーザーが空のタイトルでタスクを追加しようとする THEN Task Manager SHALL 追加を拒否して現在の状態を維持する 3. WHEN 新しいタスクが追加される THEN Task Manager SHALL 入力フォームをクリアして次の入力に備える 4. WHEN タスクが追加される THEN Task Manager SHALL タスクをLocal Storageに即座に永続化する 5. WHEN タスクフォームが表示される THEN Task Manager SHALL タイトル、担当者、期限の入力フィールドを提供する ### Requirement 2 **User Story:** ユーザーとして、既存のタスクを編集したいので、各タスク行の編集ボタンから内容を変更できるようにしたい #### Acceptance Criteria 1. WHEN ユーザーがタスク行の編集ボタンをクリックする THEN Task Manager SHALL そのタスクを編集モードに切り替える 2. WHEN タスクが編集モードになる THEN Task Manager SHALL タイトル、担当者、期限を編集可能な入力フィールドとして表示する 3. WHEN ユーザーが編集内容を保存する THEN Task Manager SHALL 変更をタスクリストに反映してLocal Storageを更新する 4. WHEN ユーザーが編集をキャンセルする THEN Task Manager SHALL 元の値を復元して通常表示モードに戻る 5. WHEN タスクの編集内容が空のタイトルになる THEN Task Manager SHALL 保存を拒否してエラーフィードバックを表示する ### Requirement 3 **User Story:** ユーザーとして、不要になったタスクを削除したいので、各タスク行の削除ボタンからタスクを削除できるようにしたい #### Acceptance Criteria 1. WHEN ユーザーがタスク行の削除ボタンをクリックする THEN Task Manager SHALL そのタスクをタスクリストから削除する 2. WHEN タスクが削除される THEN Task Manager SHALL Local Storageから該当タスクを即座に削除する 3. WHEN タスクが削除される THEN Task Manager SHALL タスクリストの表示を更新して削除されたタスクを非表示にする 4. WHEN 削除操作が実行される THEN Task Manager SHALL 他のタスクの順序と内容を保持する ### Requirement 4 **User Story:** ユーザーとして、すべてのタスクを一覧で確認したいので、タイトル、担当者、期限が表示されるタスクリストを見たい #### Acceptance Criteria 1. WHEN ユーザーがアプリケーションを開く THEN Task Manager SHALL すべてのタスクをタイトル、担当者、期限とともに表示する 2. WHEN タスクリストが表示される THEN Task Manager SHALL 各タスク行に編集ボタンと削除ボタンを表示する 3. WHEN タスクリストが更新される THEN Task Manager SHALL 変更を即座に画面に反映する 4. WHEN タスクが存在しない THEN Task Manager SHALL 空の状態を適切に表示する ### Requirement 5 **User Story:** ユーザーとして、ブラウザを閉じても作業内容を失いたくないので、データが永続化されるようにしたい #### Acceptance Criteria 1. WHEN ユーザーがタスクを追加、編集、削除する THEN Task Manager SHALL 変更をLocal Storageに即座に保存する 2. WHEN ユーザーがアプリケーションを再度開く THEN Task Manager SHALL Local Storageから保存されたタスクを読み込んで表示する 3. WHEN Local Storageからデータを読み込む THEN Task Manager SHALL データの整合性を検証する 4. WHEN Local Storageが利用できない THEN Task Manager SHALL エラーを適切に処理してユーザーに通知する ### Requirement 6 **User Story:** ユーザーとして、軽快に操作したいので、1ページで完結してサクサク動くアプリケーションを使いたい #### Acceptance Criteria 1. THE Task Manager SHALL 単一ページアプリケーション(SPA)として実装する 2. WHEN ユーザーが操作を実行する THEN Task Manager SHALL ページリロードなしで即座に応答する 3. WHEN UIが更新される THEN Task Manager SHALL スムーズなアニメーションとフィードバックを提供する 4. THE Task Manager SHALL 最小限の依存関係で軽量に実装する ### Requirement 7 **User Story:** ユーザーとして、完了したタスクを管理したいので、タスクを完了状態にマークしたり元に戻したりできるようにしたい #### Acceptance Criteria 1. WHEN ユーザーがタスク行の完了ボタンまたはチェックボックスをクリックする THEN Task Manager SHALL そのタスクを完了状態としてマークする 2. WHEN タスクが完了状態になる THEN Task Manager SHALL タスクの表示を視覚的に変更する（取り消し線、色の変更など） 3. WHEN ユーザーが完了済みタスクの完了ボタンまたはチェックボックスをクリックする THEN Task Manager SHALL そのタスクを未完了状態に戻す 4. WHEN タスクの完了状態が変更される THEN Task Manager SHALL 変更をLocal Storageに即座に永続化する 5. WHEN アプリケーションを再度開く THEN Task Manager SHALL タスクの完了状態を保持して表示する ### Requirement 8 **User Story:** ユーザーとして、期限が過ぎたタスクを視覚的に識別したいので、期限切れのタスクの日付を赤色で表示したい #### Acceptance Criteria 1. WHEN タスクの期限が現在日時より過去である THEN Task Manager SHALL その期限日付を赤色で表示する 2. WHEN タスクの期限が現在日時以降である THEN Task Manager SHALL その期限日付を通常の色で表示する 3. WHEN タスクが完了状態である THEN Task Manager SHALL 期限が過ぎていても赤色表示しない 4. WHEN タスクに期限が設定されていない THEN Task Manager SHALL 期限表示を行わない 5. WHEN アプリケーションを開く THEN Task Manager SHALL すべてのタスクの期限状態を評価して適切な色で表示する ### Requirement 9 **User Story:** 開発者として、アプリケーションの品質を保証したいので、Playwright MCPを活用したE2Eテストが通ることを確認したい #### Acceptance Criteria 1. WHEN E2Eテストが実行される THEN Task Manager SHALL タスクの追加、編集、削除、一覧表示、完了状態の切り替えのすべての機能が正しく動作することを検証する 2. WHEN E2Eテストが実行される THEN Task Manager SHALL データの永続化が正しく機能することを検証する 3. WHEN E2Eテストが実行される THEN Task Manager SHALL エラーハンドリングが適切に機能することを検証する 4. THE Task Manager SHALL Playwright MCPを使用してE2Eテストを実装する |
- design.md
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 |
# Design Document ## Overview 軽量なタスク管理ツールは、バニラJavaScript（またはTypeScript）とHTML/CSSを使用したシンプルな単一ページアプリケーション（SPA）として実装します。フレームワークの依存を最小限に抑え、ブラウザのネイティブAPIを活用することで、軽量で高速な動作を実現します。 データの永続化にはブラウザのLocal Storage APIを使用し、状態管理はシンプルなイベント駆動アーキテクチャで実装します。UIの更新は効率的なDOM操作により即座に反映され、ユーザーに快適な操作体験を提供します。 ## Architecture ### アーキテクチャパターン **Model-View-Controller (MVC)** パターンを採用し、関心の分離を実現します： - **Model**: タスクデータとビジネスロジック、Local Storageとのやり取り - **View**: DOM操作とUI表示ロジック - **Controller**: ユーザー入力の処理とModelとViewの調整 ### コンポーネント構成 ``` task-manager/ ├── index.html # エントリーポイント ├── src/ │ ├── models/ │ │ ├── Task.ts # タスクエンティティ │ │ └── TaskRepository.ts # データ永続化層 │ ├── views/ │ │ ├── TaskFormView.ts # タスク追加フォームUI │ │ └── TaskListView.ts # タスク一覧UI │ ├── controllers/ │ │ └── TaskController.ts # アプリケーションロジック │ └── main.ts # アプリケーション初期化 ├── styles/ │ └── main.css # スタイルシート └── tests/ └── e2e/ └── task-manager.spec.ts # Playwright E2Eテスト ``` ## Components and Interfaces ### Task Model ```typescript interface Task { id: string; // 一意識別子（UUID） title: string; // タスクタイトル（必須、非空） assignee: string; // 担当者名（オプション） dueDate: string; // 期限（ISO 8601形式、オプション） completed: boolean; // 完了状態（デフォルト: false） createdAt: string; // 作成日時（ISO 8601形式） updatedAt: string; // 更新日時（ISO 8601形式） } interface TaskInput { title: string; assignee?: string; dueDate?: string; } ``` ### TaskRepository Interface ```typescript interface ITaskRepository { // すべてのタスクを取得 getAll(): Task[]; // IDでタスクを取得 getById(id: string): Task | null; // 新しいタスクを追加 add(taskInput: TaskInput): Task; // タスクを更新 update(id: string, taskInput: Partial<TaskInput>): Task | null; // タスクを削除 delete(id: string): boolean; // すべてのタスクを削除 clear(): void; } ``` ### View Interfaces ```typescript interface ITaskFormView { // フォームの値を取得 getFormData(): TaskInput; // フォームをクリア clearForm(): void; // バリデーションエラーを表示 showError(message: string): void; // エラー表示をクリア clearError(): void; // 送信イベントのリスナーを登録 onSubmit(handler: (data: TaskInput) => void): void; } interface ITaskListView { // タスクリストを描画 render(tasks: Task[]): void; // 編集イベントのリスナーを登録 onEdit(handler: (id: string) => void): void; // 削除イベントのリスナーを登録 onDelete(handler: (id: string) => void): void; // 完了状態切り替えイベントのリスナーを登録 onToggleComplete(handler: (id: string) => void): void; // 保存イベントのリスナーを登録（編集モード） onSave(handler: (id: string, data: TaskInput) => void): void; // キャンセルイベントのリスナーを登録（編集モード） onCancel(handler: (id: string) => void): void; } ``` ### Controller Interface ```typescript interface ITaskController { // アプリケーションを初期化 initialize(): void; // タスクを追加 addTask(taskInput: TaskInput): void; // タスクを編集モードに切り替え editTask(id: string): void; // タスクの編集を保存 saveTask(id: string, taskInput: TaskInput): void; // タスクの編集をキャンセル cancelEdit(id: string): void; // タスクを削除 deleteTask(id: string): void; // タスクの完了状態を切り替え toggleTaskComplete(id: string): void; // ビューを更新 refreshView(): void; } ``` ## Data Models ### Task Entity タスクエンティティは以下の特性を持ちます： - **id**: UUIDv4を使用した一意識別子 - **title**: 必須フィールド、空文字列や空白のみは不可 - **assignee**: オプションフィールド、空文字列の場合は未割り当てとして扱う - **dueDate**: オプションフィールド、ISO 8601形式（YYYY-MM-DD） - **completed**: 完了状態フラグ、デフォルトはfalse - **createdAt**: タスク作成時に自動設定 - **updatedAt**: タスク更新時に自動更新（完了状態の変更時も更新） ### Data Validation - タイトルは必須で、トリム後に1文字以上必要 - 期限は有効な日付形式である必要がある - すべての文字列フィールドは最大長制限を持つ（title: 200文字、assignee: 100文字） ### Local Storage Schema ```typescript // ストレージキー const STORAGE_KEY = 'task-manager-tasks'; // ストレージ形式 interface StorageData { version: string; // スキーマバージョン（"1.0"） tasks: Task[]; // タスク配列 lastModified: string; // 最終更新日時 } ``` ## C orrectness Properties *A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.* ### Property 1: タスク追加でリストが成長する *For any* タスクリストと有効なタスクデータ（非空のタイトル）、タスクを追加すると、タスクリストの長さが1増加する **Validates: Requirements 1.1** ### Property 2: 無効なタイトルは拒否される *For any* 空文字列または空白のみで構成された文字列、それをタイトルとしてタスクを追加しようとすると、追加が拒否され、タスクリストは変更されない **Validates: Requirements 1.2** ### Property 3: タスク追加後にフォームがクリアされる *For any* タスクフォームの状態、有効なタスクを追加すると、フォームのすべての入力フィールドが空になる **Validates: Requirements 1.3** ### Property 4: データ永続化のラウンドトリップ *For any* タスクセット、それらをLocal Storageに保存してから読み込むと、元のタスクセットと同等のデータが取得される **Validates: Requirements 1.4, 2.3, 3.2, 5.2** ### Property 5: 編集モードへの遷移 *For any* タスク、編集ボタンをクリックすると、そのタスクが編集モードに切り替わり、編集可能な入力フィールドが表示される **Validates: Requirements 2.1, 2.2** ### Property 6: 編集のキャンセルで元の値を保持 *For any* タスク、編集モードで値を変更してからキャンセルすると、元のタスクデータが変更されずに保持される **Validates: Requirements 2.4** ### Property 7: 無効な編集は拒否される *For any* 編集中のタスク、タイトルを空文字列または空白のみに変更して保存しようとすると、保存が拒否され、エラーメッセージが表示される **Validates: Requirements 2.5** ### Property 8: タスク削除でリストから除外される *For any* タスクリストと削除対象のタスク、そのタスクを削除すると、タスクリストからそのタスクが除外され、他のタスクは変更されない **Validates: Requirements 3.1, 3.4** ### Property 9: アプリケーション起動時にタスクを表示 *For any* Local Storageに保存されたタスクセット、アプリケーションを開くと、すべてのタスクがタイトル、担当者、期限とともに表示される **Validates: Requirements 4.1** ### Property 10: 各タスクに操作ボタンが表示される *For any* 表示されたタスク、そのタスク行には編集ボタンと削除ボタンが含まれる **Validates: Requirements 4.2** ### Property 11: UI更新の即時反映 *For any* タスク操作（追加、編集、削除）、操作完了後に画面が即座に更新され、変更が反映される **Validates: Requirements 4.3** ### Property 12: データ整合性の検証 *For any* Local Storageから読み込まれたデータ、それが有効なスキーマに準拠していない場合、適切にエラー処理され、アプリケーションは安全な状態を維持する **Validates: Requirements 5.3** ### Property 13: ページリロードなしの操作 *For any* ユーザー操作（タスクの追加、編集、削除）、操作実行時にページリロードが発生しない **Validates: Requirements 6.2** ### Property 14: 完了状態の切り替え *For any* タスク、完了ボタンをクリックすると、タスクの完了状態が反転する（未完了→完了、完了→未完了） **Validates: Requirements 7.1, 7.3** ### Property 15: 完了状態の視覚的表現 *For any* 完了状態のタスク、そのタスクは視覚的に区別される表示（取り消し線、色の変更など）を持つ **Validates: Requirements 7.2** ### Property 16: 完了状態の永続化 *For any* タスクの完了状態変更、変更後にLocal Storageに保存し、再読み込み時に完了状態が保持される **Validates: Requirements 7.4, 7.5** ### Property 17: 期限切れタスクの視覚的表示 *For any* 未完了タスクで期限が現在日時より過去の場合、期限日付が赤色で表示される **Validates: Requirements 8.1, 8.2** ### Property 18: 完了タスクは期限切れ表示しない *For any* 完了状態のタスク、期限が過去であっても期限日付は赤色表示されない **Validates: Requirements 8.3** ## Error Handling ### バリデーションエラー - **空のタイトル**: ユーザーにわかりやすいエラーメッセージを表示し、フォームの状態を維持 - **無効な日付形式**: 日付フィールドに無効な値が入力された場合、エラーメッセージを表示 - **文字数制限超過**: 最大文字数を超えた場合、入力を制限またはエラーを表示 ### ストレージエラー - **Local Storage利用不可**: Local Storageが無効またはクォータ超過の場合、ユーザーに通知し、メモリ内でのみ動作 - **データ破損**: 読み込んだデータが不正な場合、デフォルト値（空のタスクリスト）で初期化し、ユーザーに通知 - **JSON解析エラー**: パース失敗時は空のタスクリストで初期化 ### UI/UXエラーハンドリング - すべてのエラーメッセージは日本語で表示 - エラーは非侵襲的な方法で表示（トースト通知またはインラインメッセージ） - エラー発生時もアプリケーションは使用可能な状態を維持 ## Testing Strategy ### Property-Based Testing **使用ライブラリ**: fast-check（JavaScriptのプロパティベーステストライブラリ） **テスト設定**: - 各プロパティテストは最低100回の反復実行 - ランダムなタスクデータを生成するジェネレータを実装 - 各プロパティテストには設計ドキュメントのプロパティ番号を明示的にタグ付け - タグ形式: `**Feature: task-manager, Property {number}: {property_text}**` **テスト対象プロパティ**: - Property 1-18: すべての正確性プロパティをプロパティベーステストで実装 - エッジケース: 空のタスクリスト、Local Storage無効、データ破損、期限切れタスク **ジェネレータ設計**: ```typescript // タスクデータジェネレータ const taskInputArbitrary = fc.record({ title: fc.string({ minLength: 1, maxLength: 200 }).filter(s => s.trim().length > 0), assignee: fc.option(fc.string({ maxLength: 100 })), dueDate: fc.option(fc.date().map(d => d.toISOString().split('T')[0])) }); // 無効なタイトルジェネレータ const invalidTitleArbitrary = fc.oneof( fc.constant(''), fc.string().filter(s => s.trim().length === 0) ); ``` ### Unit Testing **使用ライブラリ**: Vitest（高速で軽量なテストフレームワーク） **テスト対象**: - TaskRepositoryの各メソッド（CRUD操作） - バリデーション関数 - データ変換関数 - エラーハンドリング **テストカバレッジ**: - 各コンポーネントの主要な機能パス - 重要なエッジケース（空の入力、境界値） - エラー条件 ### E2E Testing **使用ライブラリ**: Playwright（Playwright MCPを活用） **テストシナリオ**: 1. タスクの追加フロー - フォームに入力してタスクを追加 - タスクがリストに表示されることを確認 - Local Storageに保存されることを確認 2. タスクの編集フロー - 既存タスクの編集ボタンをクリック - 値を変更して保存 - 変更が反映されることを確認 - キャンセル操作の確認 3. タスクの削除フロー - 削除ボタンをクリック - タスクがリストから消えることを確認 - Local Storageから削除されることを確認 4. タスクの完了状態切り替えフロー - 完了ボタンをクリックしてタスクを完了状態にする - 視覚的な変化を確認 - 再度クリックして未完了状態に戻す - Local Storageに完了状態が保存されることを確認 5. データ永続化フロー - タスクを追加し、完了状態を変更 - ページをリロード - タスクと完了状態が保持されていることを確認 6. エラーハンドリング - 無効な入力でのエラー表示 - Local Storage無効時の動作 **Playwright MCP統合**: - Playwright MCPツールを使用してブラウザ操作を自動化 - スクリーンショット比較による視覚的回帰テスト - アクセシビリティチェック ## Implementation Notes ### 技術スタック - **言語**: TypeScript（型安全性と開発体験の向上） - **ビルドツール**: Vite（高速な開発サーバーとビルド） - **テスト**: Vitest（ユニットテスト）、fast-check（プロパティベーステスト）、Playwright（E2Eテスト） - **スタイリング**: CSS（フレームワーク不要、軽量化のため） ### パフォーマンス最適化 - 仮想DOMなしの効率的なDOM更新 - イベント委譲によるメモリ効率の向上 - デバウンス処理（必要に応じて） - Local Storageへの書き込みは非同期的に実行 ### アクセシビリティ - セマンティックHTML要素の使用 - キーボードナビゲーションのサポート - ARIAラベルの適切な使用 - フォーカス管理 ### ブラウザ互換性 - モダンブラウザ（Chrome、Firefox、Safari、Edge）の最新2バージョンをサポート - Local Storage APIの利用可能性チェック - ES2020+の機能を使用（必要に応じてトランスパイル） |
- tasks.md
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
# Implementation Plan - [x] 1. プロジェクト構造とビルド環境のセットアップ - Viteプロジェクトを初期化 - TypeScript設定ファイルを作成 - 必要な依存関係をインストール（Vitest、fast-check、Playwright） - ディレクトリ構造を作成（src/models、src/views、src/controllers、styles、tests） - _Requirements: 6.1, 6.4_ - [x] 2. Taskモデルとバリデーション機能の実装 - Task型とTaskInput型を定義 - タスクバリデーション関数を実装（タイトルの空チェック、文字数制限） - UUID生成関数を実装 - タイムスタンプ生成関数を実装 - _Requirements: 1.2, 2.5_ - [x] 2.1 Property 2のプロパティベーステストを実装 - **Property 2: 無効なタイトルは拒否される** - **Validates: Requirements 1.2** - [x] 2.2 Taskモデルにcompletedフィールドを追加 - Task型にcompleted: booleanフィールドを追加 - デフォルト値をfalseに設定 - 既存データの互換性処理（completedがない場合はfalseとして扱う） - _Requirements: 7.1_ - [x] 3. TaskRepositoryの実装 - TaskRepositoryクラスを実装 - Local Storageへの保存・読み込み機能を実装 - CRUD操作（getAll、getById、add、update、delete、clear）を実装 - データ整合性検証機能を実装 - エラーハンドリング（Local Storage利用不可、データ破損）を実装 - _Requirements: 1.4, 3.2, 5.1, 5.2, 5.3, 5.4_ - [x] 3.1 Property 4のプロパティベーステストを実装 - **Property 4: データ永続化のラウンドトリップ** - **Validates: Requirements 1.4, 2.3, 3.2, 5.2** - [x] 3.2 Property 12のプロパティベーステストを実装 - **Property 12: データ整合性の検証** - **Validates: Requirements 5.3** - [x] 4. TaskFormViewの実装 - TaskFormViewクラスを実装 - フォーム要素の取得とイベントリスナー登録 - getFormData、clearForm、showError、clearErrorメソッドを実装 - onSubmitイベントハンドラーを実装 - _Requirements: 1.1, 1.3, 1.5_ - [x] 4.1 Property 3のプロパティベーステストを実装 - **Property 3: タスク追加後にフォームがクリアされる** - **Validates: Requirements 1.3** - [x] 5. TaskListViewの実装 - TaskListViewクラスを実装 - タスクリストのレンダリング機能を実装 - 編集モードの切り替え機能を実装 - イベントリスナー登録（onEdit、onDelete、onSave、onCancel）を実装 - 空の状態の表示を実装 - _Requirements: 2.1, 2.2, 3.1, 4.1, 4.2, 4.4_ - [x] 5.1 Property 5のプロパティベーステストを実装 - **Property 5: 編集モードへの遷移** - **Validates: Requirements 2.1, 2.2** - [x] 5.2 Property 10のプロパティベーステストを実装 - **Property 10: 各タスクに操作ボタンが表示される** - **Validates: Requirements 4.2** - [x] 5.3 TaskListViewに完了状態の表示と切り替え機能を追加 - 完了状態のタスクに視覚的スタイル（取り消し線、色変更）を適用 - 完了チェックボックスをタスク行に追加 - onToggleCompleteイベントリスナーを実装 - _Requirements: 7.1, 7.2_ - [x] 6. TaskControllerの実装 - TaskControllerクラスを実装 - initialize、addTask、editTask、saveTask、cancelEdit、deleteTask、refreshViewメソッドを実装 - ModelとViewの連携ロジックを実装 - バリデーションエラーハンドリングを実装 - _Requirements: 1.1, 1.2, 2.1, 2.3, 2.4, 2.5, 3.1, 4.3_ - [x] 6.1 Property 1のプロパティベーステストを実装 - **Property 1: タスク追加でリストが成長する** - **Validates: Requirements 1.1** - [x] 6.2 Property 6のプロパティベーステストを実装 - **Property 6: 編集のキャンセルで元の値を保持** - **Validates: Requirements 2.4** - [x] 6.3 Property 7のプロパティベーステストを実装 - **Property 7: 無効な編集は拒否される** - **Validates: Requirements 2.5** - [x] 6.4 Property 8のプロパティベーステストを実装 - **Property 8: タスク削除でリストから除外される** - **Validates: Requirements 3.1, 3.4** - [x] 6.5 Property 11のプロパティベーステストを実装 - **Property 11: UI更新の即時反映** - **Validates: Requirements 4.3** - [x] 6.6 Property 13のプロパティベーステストを実装 - **Property 13: ページリロードなしの操作** - **Validates: Requirements 6.2** - [x] 6.7 TaskControllerにtoggleTaskCompleteメソッドを追加 - toggleTaskCompleteメソッドを実装 - タスクの完了状態を反転させる - Local Storageに変更を永続化 - ビューを更新 - _Requirements: 7.1, 7.3, 7.4_ - [x] 6.8 Property 14のプロパティベーステストを実装 - **Property 14: 完了状態の切り替え** - **Validates: Requirements 7.1, 7.3** - [x] 6.9 Property 15のプロパティベーステストを実装 - **Property 15: 完了状態の視覚的表現** - **Validates: Requirements 7.2** - [x] 6.10 Property 16のプロパティベーステストを実装 - **Property 16: 完了状態の永続化** - **Validates: Requirements 7.4, 7.5** - [x] 7. HTMLとCSSの実装 - index.htmlを作成（セマンティックHTML、ARIAラベル） - main.cssを作成（レスポンシブデザイン、アニメーション） - タスクフォームのスタイリング - タスクリストのスタイリング - エラーメッセージのスタイリング - _Requirements: 1.5, 6.3_ - [x] 7.1 完了状態のスタイリングを追加 - 完了タスクの取り消し線スタイルを追加 - 完了タスクの色変更スタイルを追加 - 完了チェックボックスのスタイリング - _Requirements: 7.2_ - [x] 8. アプリケーションの初期化とエントリーポイント - main.tsを実装 - アプリケーションの初期化ロジックを実装 - DOMContentLoadedイベントでアプリケーションを起動 - _Requirements: 4.1, 5.2, 6.1_ - [x] 8.1 Property 9のプロパティベーステストを実装 - **Property 9: アプリケーション起動時にタスクを表示** - **Validates: Requirements 4.1** - [x] 9. チェックポイント - すべてのテストが通ることを確認 - すべてのテストが通ることを確認し、問題があればユーザーに質問する - [x] 10. Playwright E2Eテストの実装 - Playwright設定ファイルを作成 - タスク追加フローのE2Eテストを実装 - タスク編集フローのE2Eテストを実装 - タスク削除フローのE2Eテストを実装 - データ永続化フローのE2Eテストを実装 - エラーハンドリングのE2Eテストを実装 - Playwright MCPツールを活用してテストを実行 - _Requirements: 8.1, 8.2, 8.3, 8.4_ - [x] 10.1 完了状態切り替えのE2Eテストを追加 - タスク完了状態切り替えフローのE2Eテストを実装 - 視覚的変化の確認 - 完了状態の永続化確認 - _Requirements: 8.1_ - [x] 11. チェックポイント - 完了機能のテストが通ることを確認 - すべてのテストが通ることを確認し、問題があればユーザーに質問する - [x] 12. 最終チェックポイント - すべてのテストが通ることを確認 - すべてのテストが通ることを確認し、問題があればユーザーに質問する - [x] 13. TaskListViewに期限切れ判定ロジックを追加 - 期限が現在日時より過去かどうかを判定する関数を実装 - 完了タスクは期限切れ判定から除外 - レンダリング時に期限切れタスクに特別なCSSクラスを適用 - _Requirements: 8.1, 8.2, 8.3_ - [x] 13.1 Property 17のプロパティベーステストを実装 - **Property 17: 期限切れタスクの視覚的表示** - **Validates: Requirements 8.1, 8.2** - [x] 13.2 Property 18のプロパティベーステストを実装 - **Property 18: 完了タスクは期限切れ表示しない** - **Validates: Requirements 8.3** - [x] 14. 期限切れタスクのスタイリングを追加 - 期限切れタスクの日付を赤色で表示するCSSを追加 - _Requirements: 8.1_ - [x] 15. 期限切れ表示のE2Eテストを追加 - 期限切れタスクの赤色表示を確認するE2Eテストを実装 - 完了タスクは期限切れでも赤色にならないことを確認 - _Requirements: 9.1_ - [x] 16. 最終チェックポイント - 期限切れ機能のテストが通ることを確認 - すべてのテストが通ることを確認し、問題があればユーザーに質問する |
出力の判定と修正
Kiroの出力を確認し、期待通りか、修正が必要かを判断しました。
判定結果
問題なし
良かった点
- 要件はほぼ渡される状態で指示したにも関わらずドキュメントを作ってくれます。
- 途中でドキュメントの修正依頼も可能。
問題点
- 修正を依頼する場合、タスクリストの順番がずれてしまうか最終チェックポイントからタスクが追加される。
- Kiroの回答が表示されず、催促したら何もなかったように表示されることがありました。
Kiroとの対話
テスト実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
実施したE2Eテスト一覧 1. タスク追加フロー（4テスト） ✅ 有効なタスクを追加できる ✅ タスク追加後にフォームがクリアされる ✅ 複数のタスクを追加できる ✅ タスクがLocal Storageに保存される 2. タスク編集フロー（5テスト） ✅ タスクを編集モードに切り替えられる ✅ タスクの内容を編集して保存できる ✅ 編集をキャンセルすると元の値が保持される ✅ 編集後の内容がLocal Storageに保存される 3. タスク削除フロー（4テスト） ✅ タスクを削除できる ✅ 複数のタスクから特定のタスクを削除できる ✅ 削除後にLocal Storageが更新される ✅ すべてのタスクを削除すると空の状態が表示される 4. データ永続化フロー（3テスト） ✅ ページをリロードしてもタスクが保持される ✅ ブラウザを閉じて再度開いてもデータが保持される ✅ 編集と削除の操作が永続化される 5. エラーハンドリング（5テスト） ✅ 空のタイトルでタスクを追加しようとするとエラーが表示される ✅ 編集時に空のタイトルで保存しようとすると編集モードが維持される ✅ Local Storageが無効な場合でもアプリケーションが動作する ✅ 破損したLocal Storageデータを処理できる ✅ ページリロードなしで操作が完了する 6. 完了状態切り替えフロー（10テスト） ✅ タスクを完了状態にマークできる ✅ 完了状態のタスクを未完了に戻せる ✅ 複数のタスクの完了状態を個別に管理できる ✅ 完了状態がLocal Storageに保存される ✅ ページをリロードしても完了状態が保持される ✅ 複数タスクの完了状態がリロード後も保持される ✅ 完了状態の切り替えがページリロードなしで動作する ✅ 完了チェックボックスがチェック状態を反映する ✅ 編集中のタスクの完了状態を切り替えられる 7. 期限切れ表示フロー（8テスト） ✅ 期限切れタスクの日付が赤色で表示される ✅ 期限内のタスクの日付は通常の色で表示される ✅ 完了タスクは期限切れでも赤色表示されない ✅ 複数タスクで期限切れ判定が個別に機能する ✅ ページリロード後も期限切れ表示が保持される ✅ 期限切れタスクを完了状態にすると赤色表示が消える ✅ 完了タスクを未完了に戻すと期限切れ表示が復活する ✅ 期限が設定されていないタスクは期限切れ表示されない 8. UIとアクセシビリティ（3テスト） ✅ フォームに適切なARIAラベルが設定されている ✅ タスクリストに適切なロールが設定されている ✅ ボタンに適切なaria-labelが設定されている |
成果物
未完了タスク
完了タスク
所要時間
３～４時間
主な機能
- タスク作成、編集、削除、完了・未完了の切り替え
工夫点など
- 期限が過ぎたタスクに視覚的に表示
発見と学び
- 要件定義の重要さ：見た目のこだわりが要件定義に皆無でしたので、良くも悪くもKiroに任せました。
- コマンド実行する際に、Trustを選択してコマンドを信頼できるリストに追加することができます。
感想
良かった点
Kiroでスペック駆動開発を経験することが出来ました。
苦労した点
Kiroでスペック駆動開発が未経験のため操作の不慣れがありました。
今後に活かせること
今回はシンプルな管理ツールを作りました。ほぼ苦痛なく作れたと感じましたのでMVPなどを作る時に活かせると考えています。
この記事が、少しでもみなさんのにお役に立てば幸いです。
ここまでお読みいただき、ありがとうございました！
The following two tabs change content below.
【採用情報】一緒に働く仲間を募集しています
