【Kiro・Playwright】社内でフルAI開発バトル！！「1行も書かずに」Todoアプリを完成させた話〜平田の場合〜

カテゴリ一 AWS ブログ 開発 AI クラウド ウェブ/ECトレンド
2025-12-04

こんにちは。エンジニアの平田です。

このブログはギークフィードアドベントカレンダー2025の4日目の記事です。

他の記事もぜひチェックしてみてください！

 

自己紹介

クラウド開発事業部所属の平田です。
普段はGitHubへのソース移行を担当しています。エンジニア歴は7ヶ月で、まだがっつり開発に取り組んでいません！

普段使ってるAIツール

日常的に以下のAIツールを活用しています。

  • ChatGPT: 古くから使っており、文章作成や調べものに幅広く活用しているため、安心して頼れる友達のような存在です。
  • Gemini: 毎日利用しており、情報整理やアイデア出しが得意で効率的に作業を進められるため重宝しています。

企画概要とゴール

今回、「フル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に要件定義を依頼しました。

指示に至るまでの思考プロセス

まずは自分で編集せず、時間重視でそのままの文章を提示した。そして、Kiroの反応に間違いがないか確認し、了承を出しました。

Kiroへの指示

1
2
3
4
5
6
7
8
9
10
11
12
13
以下の佐藤さんの提案要件に基づき、タスク管理アプリケーションのコードを生成してください。
コーディングは禁止されているため、全ての開発は私が送るプロンプト指示のみで進めます。
佐藤さんの提案要件
機能要件
タスクの追加（画面上部のフォームからテキスト入力）、編集、削除、一覧表示（タイトル、担当者、期限を表示）
ログイン機能は不要
操作性
画面は1ページで完結。サクサク軽く動いて、直感的に操作できること
編集・削除は各行のボタンで可能
データ保持
ブラウザを閉じてもデータが消えないこと
品質保証
Playwright MCPを活用し、E2Eテストが通っていること

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
# Requirements Document
 
## Introduction
 
このドキュメントは、ブラウザベースのタスク管理アプリケーションの要件を定義します。このシステムは、ユーザーがタスクを追加、編集、削除、一覧表示できる単一ページアプリケーションです。データはブラウザのローカルストレージに永続化され、ログイン機能は不要です。
 
## Glossary
 
- **Task Manager**: タスクの作成、編集、削除、表示を行うブラウザベースのアプリケーション
- **Task**: タイトル、担当者、期限、完了状態を持つ作業項目
- **Local Storage**: ブラウザが提供するデータ永続化機構
- **Task Form**: タスクを入力するための画面上部のフォーム
- **Task List**: 登録されたタスクを表示する一覧
- **Completed Status**: タスクが完了したかどうかを示すブール値
 
## Requirements
 
### Requirement 1
 
**User Story:** ユーザーとして、新しいタスクを追加したいので、画面上部のフォームからタイトル、担当者、期限を入力できるようにしたい
 
#### Acceptance Criteria
 
1. WHEN ユーザーがタイトル、担当者、期限を入力してEnterキーを押すか追加ボタンをクリックする THEN THE Task Manager SHALL 新しいタスクを作成してタスク一覧に追加する
2. WHEN ユーザーが空のタイトルでタスクを追加しようとする THEN THE Task Manager SHALL 追加を拒否して現在の状態を維持する
3. WHEN 新しいタスクが追加される THEN THE Task Manager SHALL 入力フォームをクリアして次の入力に備える
4. WHEN タスクが追加される THEN THE Task Manager SHALL タスクをLocal Storageに即座に永続化する
 
### Requirement 2
 
**User Story:** ユーザーとして、既存のタスクを編集したいので、各タスク行の編集ボタンから内容を変更できるようにしたい
 
#### Acceptance Criteria
 
1. WHEN ユーザーがタスク行の編集ボタンをクリックする THEN THE Task Manager SHALL そのタスクの編集モードを有効にする
2. WHEN 編集モードが有効になる THEN THE Task Manager SHALL タイトル、担当者、期限を編集可能な状態で表示する
3. WHEN ユーザーが編集内容を保存する THEN THE Task Manager SHALL 変更をLocal Storageに即座に反映する
4. WHEN ユーザーが空のタイトルで保存しようとする THEN THE Task Manager SHALL 保存を拒否して編集前の状態を維持する
 
### Requirement 3
 
**User Story:** ユーザーとして、不要になったタスクを削除したいので、各タスク行の削除ボタンからタスクを削除できるようにしたい
 
#### Acceptance Criteria
 
1. WHEN ユーザーがタスク行の削除ボタンをクリックする THEN THE Task Manager SHALL そのタスクをタスク一覧から削除する
2. WHEN タスクが削除される THEN THE Task Manager SHALL Local Storageから即座にそのタスクを削除する
3. WHEN タスクが削除される THEN THE Task Manager SHALL 残りのタスクの表示順序を維持する
 
### Requirement 4
 
**User Story:** ユーザーとして、タスクの完了状態を管理したいので、タスクを完了済みにマークしたり、未完了に戻したりできるようにしたい
 
#### Acceptance Criteria
 
1. WHEN ユーザーがタスク行の完了ボタンをクリックする THEN THE Task Manager SHALL そのタスクを完了済み状態にマークする
2. WHEN タスクが完了済みになる THEN THE Task Manager SHALL タスクに視覚的な完了表示（取り消し線など）を適用する
3. WHEN ユーザーが完了済みタスクの完了ボタンを再度クリックする THEN THE Task Manager SHALL そのタスクを未完了状態に戻す
4. WHEN タスクの完了状態が変更される THEN THE Task Manager SHALL 変更をLocal Storageに即座に反映する
5. WHEN タスク一覧が表示される THEN THE Task Manager SHALL 各タスクの完了状態を正しく表示する
 
### Requirement 5
 
**User Story:** ユーザーとして、登録されたタスクを確認したいので、タスク一覧でタイトル、担当者、期限を表示できるようにしたい
 
#### Acceptance Criteria
 
1. WHEN Task Managerが起動する THEN THE Task Manager SHALL Local Storageから全てのタスクを読み込んで表示する
2. WHEN タスク一覧が表示される THEN THE Task Manager SHALL 各タスクのタイトル、担当者、期限を表示する
3. WHEN タスク一覧が表示される THEN THE Task Manager SHALL 各タスク行に編集ボタンと削除ボタンを表示する
 
### Requirement 6
 
**User Story:** ユーザーとして、ブラウザを閉じた後もデータを保持したいので、タスクがLocal Storageに永続化されるようにしたい
 
#### Acceptance Criteria
 
1. WHEN タスクが追加、編集、削除される THEN THE Task Manager SHALL 変更を即座にLocal Storageに保存する
2. WHEN ブラウザが再起動される THEN THE Task Manager SHALL Local Storageから全てのタスクを復元する
3. WHEN Local Storageへの保存が失敗する THEN THE Task Manager SHALL エラーを適切に処理してユーザーに通知する
 
### Requirement 7
 
**User Story:** ユーザーとして、快適に操作したいので、アプリケーションが単一ページで完結し、直感的に操作できるようにしたい
 
#### Acceptance Criteria
 
1. THE Task Manager SHALL 全ての機能を単一のHTMLページで提供する
2. WHEN ユーザーが操作を実行する THEN THE Task Manager SHALL ページ遷移なしで即座に反応する
3. WHEN UIが表示される THEN THE Task Manager SHALL 各操作ボタンを明確に識別できるように表示する
 
### Requirement 8
 
**User Story:** 開発者として、アプリケーションの品質を保証したいので、Playwright MCPを使用したE2Eテストが実装されるようにしたい
 
#### Acceptance Criteria
 
1. WHEN E2Eテストが実行される THEN THE Task Manager SHALL タスクの追加、編集、削除の全ての操作が正しく動作することを検証する
2. WHEN E2Eテストが実行される THEN THE Task Manager SHALL データの永続化が正しく機能することを検証する
3. WHEN E2Eテストが実行される THEN THE Task Manager SHALL 入力バリデーションが正しく機能することを検証する

  • 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
# Design Document
 
## Overview
 
Task Managerは、ブラウザベースの単一ページアプリケーション（SPA）として実装されます。HTML、CSS、JavaScriptを使用し、フレームワークに依存しない軽量な実装を目指します。データはブラウザのLocal Storage APIを使用して永続化され、ページのリロードやブラウザの再起動後もタスクが保持されます。また、タスクの完了/未完了状態を切り替える機能を提供します。
 
## Architecture
 
アプリケーションは以下の3層アーキテクチャで構成されます：
 
1. **Presentation Layer (UI)**: HTMLとCSSによる表示、ユーザーインタラクションの処理
2. **Business Logic Layer**: タスクの追加、編集、削除、バリデーションロジック
3. **Data Layer**: Local Storageへのデータ永続化と読み込み
 
```
┌─────────────────────────────────┐
│     Presentation Layer          │
│  (HTML/CSS/DOM Manipulation)    │
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│    Business Logic Layer         │
│  (Task Operations & Validation) │
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│       Data Layer                │
│    (Local Storage API)          │
└─────────────────────────────────┘
```
 
## Components and Interfaces
 
### Task Model
 
```typescript
interface Task {
  id: string;          // ユニークな識別子（UUID）
  title: string;       // タスクのタイトル（必須、非空）
  assignee: string;    // 担当者名
  dueDate: string;     // 期限（ISO 8601形式）
  createdAt: string;   // 作成日時（ISO 8601形式）
  completed: boolean;  // 完了状態（true: 完了、false: 未完了）
}
```
 
### TaskManager Class
 
```typescript
class TaskManager {
  // タスクの追加
  addTask(title: string, assignee: string, dueDate: string): Task | null
  
  // タスクの更新
  updateTask(id: string, title: string, assignee: string, dueDate: string): boolean
  
  // タスクの削除
  deleteTask(id: string): boolean
  
  // タスクの完了状態を切り替え
  toggleTaskCompletion(id: string): boolean
  
  // 全タスクの取得
  getAllTasks(): Task[]
  
  // タスクの検証
  validateTask(title: string): boolean
}
```
 
### StorageService
 
```typescript
class StorageService {
  // タスクの保存
  saveTasks(tasks: Task[]): boolean
  
  // タスクの読み込み
  loadTasks(): Task[]
  
  // ストレージのクリア
  clearStorage(): void
}
```
 
### UIController
 
```typescript
class UIController {
  // タスク一覧の描画
  renderTasks(tasks: Task[]): void
  
  // フォームのクリア
  clearForm(): void
  
  // エラーメッセージの表示
  showError(message: string): void
  
  // イベントリスナーの設定
  setupEventListeners(): void
}
```
 
## Data Models
 
### Task Entity
 
- **id**: UUID v4形式の文字列。タスクの一意識別子
- **title**: 1文字以上の非空文字列。空白のみの文字列は無効
- **assignee**: 担当者名を表す文字列。空文字列も許可
- **dueDate**: ISO 8601形式の日付文字列（YYYY-MM-DD）
- **createdAt**: ISO 8601形式のタイムスタンプ。タスク作成時に自動設定
- **completed**: ブール値。タスクの完了状態（デフォルト: false）
 
### Local Storage Schema
 
```json
{
  "tasks": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440000",
      "title": "プロジェクト資料作成",
      "assignee": "佐藤",
      "dueDate": "2025-12-01",
      "createdAt": "2025-11-27T10:30:00.000Z",
      "completed": false
    },
    {
      "id": "660e8400-e29b-41d4-a716-446655440001",
      "title": "会議資料レビュー",
      "assignee": "田中",
      "dueDate": "2025-11-30",
      "createdAt": "2025-11-26T09:00:00.000Z",
      "completed": true
    }
  ]
}
```
 
ストレージキー: `taskManagerData`
 
 
## Correctness 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* 有効なタスク（非空のタイトル、担当者、期限）、そのタスクを追加してLocal Storageに保存し、再読み込みした場合、同じタスクデータが復元される
**Validates: Requirements 1.4**
 
### Property 2: 空白タイトルの拒否
*For any* 空白文字のみで構成された文字列、それをタイトルとしてタスクを追加しようとした場合、追加が拒否され、タスク一覧が変更されない
**Validates: Requirements 1.2**
 
### Property 3: タスク追加後のフォームクリア
*For any* UI状態で入力フォームが非空の場合、タスクを追加した後、入力フォームの全てのフィールドが空になる
**Validates: Requirements 1.3**
 
### Property 4: 編集時の空白タイトル拒否
*For any* 既存のタスク、そのタイトルを空白文字のみの文字列に変更しようとした場合、変更が拒否され、元のタスクデータが維持される
**Validates: Requirements 2.4**
 
### Property 5: 編集内容の永続化
*For any* 既存のタスク、そのタスクを編集して保存した場合、変更がLocal Storageに即座に反映され、再読み込み後も変更が保持される
**Validates: Requirements 2.3**
 
### Property 6: タスク削除の反映
*For any* タスク一覧とその中の任意のタスク、そのタスクを削除した場合、タスク一覧からそのタスクが削除され、Local Storageからも削除される
**Validates: Requirements 3.1, 3.2**
 
### Property 7: 削除後の順序保持
*For any* タスク一覧、その中の任意のタスクを削除した場合、残りのタスクの相対的な順序が変更されない
**Validates: Requirements 3.3**
 
### Property 8: 完了状態の切り替え
*For any* 未完了タスク、そのタスクの完了ボタンをクリックした場合、タスクの completed フラグが true になる
**Validates: Requirements 4.1**
 
### Property 9: 完了状態のトグル（往復特性）
*For any* タスク、完了ボタンを2回クリックした場合、タスクの completed フラグは元の状態に戻る
**Validates: Requirements 4.3**
 
### Property 10: 完了状態の永続化
*For any* タスク、その完了状態を変更した場合、変更がLocal Storageに即座に反映され、再読み込み後も完了状態が保持される
**Validates: Requirements 4.4**
 
### Property 11: 完了タスクの視覚表示
*For any* 完了済みタスク、そのタスクをレンダリングした結果には、視覚的な完了表示（取り消し線やスタイル）が含まれる
**Validates: Requirements 4.2**
 
### Property 12: タスク表示の完全性
*For any* タスク、そのタスクをレンダリングした結果には、タイトル、担当者、期限、完了状態の全ての情報が含まれる
**Validates: Requirements 5.2, 4.5**
 
### Property 13: 操作ボタンの存在
*For any* タスク、そのタスクをレンダリングした結果には、編集ボタン、削除ボタン、完了ボタンが含まれる
**Validates: Requirements 5.3**
 
### Property 14: データ復元のラウンドトリップ
*For any* タスク一覧、それをLocal Storageに保存し、アプリケーションを再起動して読み込んだ場合、同じタスク一覧（完了状態を含む）が復元される
**Validates: Requirements 6.2**
 
## Error Handling
 
### Input Validation Errors
- **空のタイトル**: ユーザーに「タイトルは必須です」というメッセージを表示
- **無効な日付形式**: ブラウザのネイティブdate inputを使用することで防止
 
### Storage Errors
- **Local Storage利用不可**: アプリケーション起動時にLocal Storageの可用性をチェックし、利用できない場合はエラーメッセージを表示
- **容量超過**: 保存時にQuotaExceededErrorをキャッチし、ユーザーに通知
- **データ破損**: JSON.parseエラーをキャッチし、空の配列で初期化
 
### Error Display Strategy
- エラーメッセージは画面上部に赤色の背景で表示
- 3秒後に自動的に消える
- 複数のエラーは順次表示
 
## Testing Strategy
 
### Unit Testing
 
JavaScriptの標準的なテストフレームワークとしてJestを使用します。
 
**テスト対象:**
- TaskManagerクラスの各メソッド（addTask, updateTask, deleteTask, getAllTasks）
- StorageServiceのデータ保存・読み込みロジック
- バリデーション関数（空白チェック、日付形式チェック）
 
**重要なエッジケース:**
- 空文字列、空白のみの文字列
- 無効なタスクID
- Local Storageが利用できない場合
- 破損したJSONデータ
 
### Property-Based Testing
 
Property-based testingライブラリとして**fast-check**を使用します。各プロパティテストは最低100回の反復を実行します。
 
**テスト対象:**
- Property 1-14（上記のCorrectness Propertiesセクションで定義）
 
**テストタグ形式:**
各property-based testには、以下の形式でコメントを付与します：
```javascript
// **Feature: task-manager, Property 1: タスク追加のラウンドトリップ**
```
 
**ジェネレータ戦略:**
- タスクジェネレータ: ランダムな非空文字列、担当者名、有効な日付を生成
- 空白文字列ジェネレータ: スペース、タブ、改行の組み合わせを生成
- タスク一覧ジェネレータ: 0〜20個のランダムなタスクを含む配列を生成
 
### E2E Testing
 
Playwright MCPを使用してブラウザベースのE2Eテストを実装します。
 
**テストシナリオ:**
1. タスクの追加フロー
   - フォームに入力してタスクを追加
   - タスクが一覧に表示されることを確認
  
2. タスクの編集フロー
   - 既存のタスクの編集ボタンをクリック
   - 内容を変更して保存
   - 変更が反映されることを確認
 
3. タスクの削除フロー
   - 削除ボタンをクリック
   - タスクが一覧から消えることを確認
 
4. タスク完了フロー
   - タスクの完了ボタンをクリック
   - タスクに完了表示（取り消し線）が適用されることを確認
   - 完了ボタンを再度クリック
   - タスクが未完了状態に戻ることを確認
 
5. データ永続化フロー
   - タスクを追加して完了状態にする
   - ページをリロード
   - タスクと完了状態が保持されていることを確認
 
6. バリデーションフロー
   - 空のタイトルで追加を試みる
   - エラーメッセージが表示されることを確認
 
**テスト環境:**
- ブラウザ: Chromium, Firefox, WebKit
- ビューポート: デスクトップ（1280x720）、モバイル（375x667）
 
## Implementation Notes
 
### Technology Stack
- **HTML5**: セマンティックなマークアップ
- **CSS3**: レスポンシブデザイン、Flexbox/Grid
- **Vanilla JavaScript (ES6+)**: フレームワーク不要の軽量実装
- **Local Storage API**: データ永続化
 
### Browser Compatibility
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
 
### Performance Considerations
- タスク数が100を超える場合は仮想スクロールを検討
- Local Storageの容量制限（通常5-10MB）を考慮
- DOM操作の最適化（DocumentFragmentの使用）
 
### Security Considerations
- XSS対策: ユーザー入力をtextContentで挿入（innerHTMLは使用しない）
- Local Storageはドメイン単位で分離されているため、他サイトからのアクセスは不可
 
### Accessibility
- キーボード操作のサポート（Tab, Enter, Escape）
- ARIA属性の適切な使用
- フォーカス管理

  • 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
# Implementation Plan
 
- [x] 1. プロジェクト構造とコアインターフェースのセットアップ
  - HTMLファイル、CSSファイル、JavaScriptファイルの基本構造を作成
  - Task型の定義とインターフェースを実装
  - テストフレームワーク（Jest、fast-check）のセットアップ
  - _Requirements: 6.1_
-
 
- [x] 2. データモデルとストレージサービスの実装
 
- [x] 2.1 StorageServiceクラスの実装
  - Local Storageへの保存・読み込み機能を実装
  - エラーハンドリング（容量超過、データ破損）を実装
  - _Requirements: 6.1, 6.3_
 
- [x] 2.2 StorageServiceのプロパティテスト
  - **Property 1: タスク追加のラウンドトリップ**
  - **Validates: Requirements 1.4**
 
- [x] 2.3 StorageServiceのプロパティテスト
  - **Property 14: データ復元のラウンドトリップ**
  - **Validates: Requirements 6.2**
 
- [x] 2.4 StorageServiceのユニットテスト
 
  - Local Storage利用不可のケースをテスト
  - データ破損のケースをテスト
  - _Requirements: 5.3_
 
- [ ] 3. TaskManagerクラスの実装
- [x] 3.1 タスク追加機能の実装
  - addTaskメソッドを実装
  - タイトルのバリデーション（空白チェック）を実装
  - UUID生成とタイムスタンプ設定を実装
  - completed フラグをデフォルト false で初期化
  - _Requirements: 1.1, 1.2_
 
- [x] 3.2 タスク追加のプロパティテスト
  - **Property 2: 空白タイトルの拒否**
  - **Validates: Requirements 1.2**
 
- [x] 3.3 タスク編集機能の実装
  - updateTaskメソッドを実装
  - 編集時のバリデーションを実装
  - _Requirements: 2.1, 2.3, 2.4_
 
- [x] 3.4 タスク編集のプロパティテスト
  - **Property 4: 編集時の空白タイトル拒否**
  - **Validates: Requirements 2.4**
 
- [x] 3.5 タスク編集のプロパティテスト
  - **Property 5: 編集内容の永続化**
  - **Validates: Requirements 2.3**
 
- [x] 3.6 タスク削除機能の実装
  - deleteTaskメソッドを実装
  - タスクIDによる削除処理を実装
  - _Requirements: 3.1, 3.2_
 
- [x] 3.7 タスク削除のプロパティテスト
  - **Property 6: タスク削除の反映**
  - **Validates: Requirements 3.1, 3.2**
 
- [x] 3.8 タスク削除のプロパティテスト
  - **Property 7: 削除後の順序保持**
  - **Validates: Requirements 3.3**
 
- [x] 3.9 タスク取得機能の実装
  - getAllTasksメソッドを実装
  - _Requirements: 5.1_
 
- [x] 3.10 タスク完了機能の実装
  - toggleTaskCompletionメソッドを実装（完了状態の切り替え）
  - 完了状態の変更をLocal Storageに反映
  - _Requirements: 4.1, 4.3, 4.4_
 
- [x] 3.11 完了状態切り替えのプロパティテスト
  - **Property 8: 完了状態の切り替え**
  - **Validates: Requirements 4.1**
 
- [x] 3.12 完了状態トグルのプロパティテスト
  - **Property 9: 完了状態のトグル（往復特性）**
  - **Validates: Requirements 4.3**
 
- [x] 3.13 完了状態永続化のプロパティテスト
  - **Property 10: 完了状態の永続化**
  - **Validates: Requirements 4.4**
 
- [x] 4. UIコントローラーの実装
 
- [x] 4.1 HTMLマークアップの作成
  - タスク入力フォーム（タイトル、担当者、期限）を作成
  - タスク一覧表示エリアを作成
  - エラーメッセージ表示エリアを作成
  - _Requirements: 7.1, 7.3_
 
- [x] 4.2 CSSスタイリングの実装
  - レスポンシブデザインを実装
  - ボタンとフォームのスタイリング
  - 完了タスクのスタイリング（取り消し線など）
  - エラーメッセージのスタイリング
  - _Requirements: 4.2, 7.3_
 
- [x] 4.3 UIControllerクラスの実装
  - renderTasksメソッドを実装（タスク一覧の描画、完了状態の表示を含む）
  - clearFormメソッドを実装
  - showErrorメソッドを実装
  - _Requirements: 1.3, 4.2, 4.5, 5.2, 5.3, 6.3_
 
- [ ]* 4.4 完了タスク視覚表示のプロパティテスト
  - **Property 11: 完了タスクの視覚表示**
  - **Validates: Requirements 4.2**
 
- [ ]* 4.5 UI描画のプロパティテスト
  - **Property 12: タスク表示の完全性**
  - **Validates: Requirements 5.2, 4.5**
 
- [ ]* 4.6 UI描画のプロパティテスト
  - **Property 13: 操作ボタンの存在**
  - **Validates: Requirements 5.3**
 
- [x] 4.7 イベントリスナーの実装
  - タスク追加フォームのsubmitイベント
  - 編集ボタンのclickイベント
  - 削除ボタンのclickイベント
  - 完了ボタンのclickイベント
  - _Requirements: 1.1, 2.1, 3.1, 4.1_
 
- [ ]* 4.8 フォームクリアのプロパティテスト
  - **Property 3: タスク追加後のフォームクリア**
  - **Validates: Requirements 1.3**
 
- [x] 5. アプリケーション初期化とデータ読み込み
 
- [x] 5.1 アプリケーション起動処理の実装
  - DOMContentLoadedイベントでの初期化
  - Local Storageからのタスク読み込み
  - 初期表示の描画（完了状態を含む）
  - _Requirements: 5.1, 6.2_
 
- [ ]* 5.2 初期化のユニットテスト
  - アプリケーション起動時のデータ読み込みをテスト
  - _Requirements: 5.1_
 
- [x] 6. チェックポイント - 全てのテストが通ることを確認
  - Ensure all tests pass, ask the user if questions arise.
 
- [x] 7. Playwright MCPを使用したE2Eテストの実装
 
- [x] 7.1 Playwrightのセットアップ
  - Playwright設定ファイルを作成
  - テスト用のHTMLサーバーをセットアップ
  - _Requirements: 8.1, 8.2, 8.3_
 
- [x] 7.2 タスク追加のE2Eテスト
  - フォーム入力とタスク追加をテスト
  - タスクが一覧に表示されることを確認
  - _Requirements: 1.1, 5.2, 8.1_
 
- [x] 7.3 タスク編集のE2Eテスト
  - 編集ボタンのクリックと内容変更をテスト
  - 変更が保存されることを確認
  - _Requirements: 2.1, 2.3, 8.1_
 
- [x] 7.4 タスク削除のE2Eテスト
  - 削除ボタンのクリックをテスト
  - タスクが一覧から消えることを確認
  - _Requirements: 3.1, 8.1_
 
- [x] 7.5 タスク完了のE2Eテスト
  - タスクの完了ボタンをクリック
  - タスクに完了表示（取り消し線）が適用されることを確認
  - 完了ボタンを再度クリック
  - タスクが未完了状態に戻ることを確認
  - _Requirements: 4.1, 4.2, 4.3, 8.1_
 
- [x] 7.6 データ永続化のE2Eテスト
  - タスクを追加して完了状態にする
  - ページをリロード
  - タスクと完了状態が保持されていることを確認
  - _Requirements: 4.4, 6.1, 6.2, 8.2_
 
- [x] 7.7 バリデーションのE2Eテスト
  - 空のタイトルで追加を試みる
  - エラーメッセージが表示されることを確認
  - _Requirements: 1.2, 8.3_
 
- [x] 8. 最終チェックポイント - 全てのテストが通ることを確認
  - Ensure all tests pass, ask the user if questions arise.

出力の判定と修正

Kiroの出力を確認し、期待通りか、修正が必要かを判断しました。

判定結果

  1. テスト失敗の詳細
    • 問題1: 編集機能のテスト失敗（9テスト）
      • 問題1: 編集機能のテスト失敗（9テスト
      • 原因: イベントリスナーとボタン参照の問題
    • 問題2: バリデーション機能のテスト失敗（18テスト）
      • エラー内容: エラーメッセージが表示されない
      • 原因: HTMLのrequired属性がブラウザネイティブバリデーションを発動
  2. 私の指示
    • 「npx playwright testでerrorが出ています」
    • エラーログの提供
    • 段階的な修正の承認
  3. 実施した修正
    • 修正1: app.jsの編集機能修正
    • 修正2: index.htmlのrequired属性削除

良かった点

  • このような経験は初めてだったためプロンプトを投げるだけでどんどん修正されていく様子は観ていて爽快でした。
  • 完了した後に未完了に戻すボタンがあること

問題点

  • ローカルストレージ箇所が上手く行かず、時間を要してしまった…

Kiroとの対話

１．追加要件があったため

プロンプト：

1
2
ここで急遽、追加要件が来ました。
間違えてタスクを削除してしまったときのために、削除したタスクを戻す機能が欲しいらしいです。

２．１で間違えた要件を伝えてしまったため

プロンプト：

1
先程の追加要件ですが削除したものを戻すのではなく、タスク完了してしまったときに、もとに戻す機能が欲しいとのことです。

テスト実装

Playwright で実施したテスト内容です。

1. タスク追加機能（task-add.spec.js）

  • フォームに入力してタスクを追加できる
  • Enterキーでタスクを追加できる
  • 複数のタスクを追加できる
  • タスク追加後にフォームがクリアされる
  • タスクに操作ボタン（完了・編集・削除）が表示される

2. タスク編集機能（task-edit.spec.js）

  • 編集ボタンをクリックしてタスクを編集できる
  • 編集時にボタンが「更新」に変わり、保存後に「追加」に戻る
  • 編集後にフォームがクリアされる
  • 編集内容がLocal Storageに保存される
  • 複数のタスクから特定のタスクを編集できる

3. タスク削除機能（task-delete.spec.js）

  • 削除ボタンをクリックしてタスクを削除できる
  • 削除後にLocal Storageからも削除される
  • 複数のタスクから特定のタスクを削除できる
  • 削除後に残りのタスクの順序が維持される
  • 全てのタスクを削除できる

4. タスク完了機能（task-complete.spec.js）

  • 完了ボタンをクリックしてタスクを完了状態にできる
  • 完了タスクに視覚的な完了表示（取り消し線）が適用される
  • 完了ボタンを再度クリックして未完了状態に戻せる
  • 完了ボタンのラベルが状態に応じて変わる（「完了」⇔「未完了に戻す」）
  • 複数のタスクの完了状態を個別に管理できる
  • 完了状態の切り替えが往復できる（トグル動作）

5. バリデーション機能（task-validation.spec.js）

  • 空のタイトルでタスクを追加しようとするとエラーメッセージが表示される
  • 空白のみのタイトルでタスクを追加しようとするとエラーメッセージが表示される
  • エラーメッセージは3秒後に自動的に消える
  • 編集時に空のタイトルで保存しようとするとエラーメッセージが表示される
  • 編集時に空白のみのタイトルで保存しようとするとエラーメッセージが表示される
  • バリデーションエラー後に有効なタイトルでタスクを追加できる
  • 担当者と期限は空でもタスクを追加できる
  • 複数回バリデーションエラーが発生してもアプリケーションが正常に動作する

6. データ永続化機能（task-persistence.spec.js）

  • タスクを追加してページをリロードしても保持される
  • タスクを完了状態にしてページをリロードしても完了状態が保持される
  • 複数のタスクと完了状態がページリロード後も保持される
  • タスクの編集内容がページリロード後も保持される
  • タスクの削除がページリロード後も反映される
  • Local Storageに正しい形式でデータが保存される
  • 空のタスクリストもページリロード後に保持される

テスト環境:

  • ブラウザ: Chromium、Firefox、WebKit（Safari）
  • 合計105テスト（各ブラウザで35テスト × 3ブラウザ）

成果物

所要時間

２時間３０分

主な機能

  • タスクの追加: 画面上部のフォームからタイトル、担当者、期限を入力してタスクを作成
  • タスクの編集: 各タスク行の編集ボタンから内容を変更
  • タスクの削除: 各タスク行の削除ボタンからタスクを削除
  • タスクの一覧表示: 登録されたタスクをタイトル、担当者、期限とともに表示完了管理機能
  • タスクの完了マーク: 完了ボタンをクリックしてタスクを完了済みにする
  • 完了の取り消し: 完了済みタスクの完了ボタンを再度クリックして未完了に戻す
  • 視覚的な完了表示: 完了済みタスクには取り消し線などの視覚的な表示を適用データ管理機能
  • 自動保存: タスクの追加、編集、削除、完了状態の変更を即座にLocal Storageに保存
  • データ永続化: ブラウザを閉じても、再起動時に全てのタスクと完了状態を復元操作性
  • 単一ページ: 全ての機能が1ページで完結、ページ遷移なし
  • 入力バリデーション: 空のタイトルでの追加・保存を防止
  • 直感的なUI: 各操作ボタンが明確に識別可能技術仕様
  • ログイン不要: 認証なしで即座に使用可能
  • 軽量実装: フレームワーク不要のVanilla JavaScript
  • レスポンシブデザイン: デスクトップとモバイルに対応

工夫点など

  • 完了したタスクに取り消し線を表示して、自動保存機能でブラウザを閉じてもデータが消えないようにしました。
  • データ保存に失敗したときに元の状態に戻すロールバック処理と、XSS攻撃を防ぐためのエスケープ処理を実装しました。
  • メモリを節約し、変更があったときだけLocal Storageに保存するようにしました。

発見と学び

非エンジニアでのコードを書ける時代だと言われているのは知っていたが、ここまでボタン一つでコーディングできるとはとても驚きました。

感想

良かった点

このような経験は初めてだったためプロンプトを投げるだけでどんどん修正されていく様子は観ていて爽快でした。

苦労した点

エンジニア歴が短いのもあり、どのような修正を行っているのか理解が追いつかなかったです。

今後に活かせること

私の今の実務では既存コードを理解するサポート的な位置づけとして役立てようと思いました。

 

この記事が、少しでもみなさんのにお役に立てば幸いです。

ここまでお読みいただき、ありがとうございました！

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter で

【採用情報】一緒に働く仲間を募集しています

採用情報
2025-12-04

関連投稿

ページトップへ