こんにちは。エンジニアの sakuma です。
このブログはギークフィードアドベントカレンダー2025の12日目の記事です。
他の記事もぜひチェックしてみてください！
目次
自己紹介
クラウド開発事業部所属の sakuma です。
普段は受託開発案件のPJリーダー、案件保守などなどを担当しています。エンジニア歴は6年で、主にC#、TypeScriptを使った開発をしています。
普段使ってるAIツール
日常的に以下のAIツールを活用しています。
- Github Copilot Pro: 料金が月額10$という、他のAIツールと比べてもかなりの安さで試せることから利用しています。
SerenaというMCPと組み合わせて利用することで、大きいコンテキストでも精度の高い出力を実現できます。
利用し始めてすぐに Claude Code や Cursor といった高性能なAIツールがでてきましたが、今のところ満足しているため、このまま使い続けてしまいそうです… - Kiro: プロトタイプ開発の案件にて利用しました。本ブログの目玉となっている新進気鋭のAIエディタです。
AIと共に仕様を作成し、それをベースに開発を進める「仕様駆動開発」をウリにしています。
詳しくは同ブログの内容を参考にしてください。 - Gemini: とりあえず文章の雛形を用意したり、簡単な質問をしてみたり、普段使い系の枠で利用しています。仕事以外での利用機会も考えると、一番触れている時間が長いかもしれないです。
企画概要とゴール
今回、「フルAI開発バトル」という企画に参加しました。
ルールはシンプルかつ過酷です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# 禁止事項：エディタで直接コードを書く・修正すること - 許されるのは「AIへの指示」のみ。人間の役割は「Architect/Reviewer」、つまりAIをマネジメントして成果物を判断することです。 # お題 社員の生産性を上げる日々の業務管理ツールを作ってください。 ## 必須要件： - KiroとPlaywright MCPを使うこと - スペック駆動開発を行うこと（vibe codingはNG） - Todoを追加・編集・削除できること - 追加は画面上部のフォームから可能 - 編集・削除は各行の操作ボタンで行う - 一覧でTodoを確認できること - 一覧にはタイトル、担当者、期限を表示 - サクサク軽く操作できること - 画面は1ページで完結 - PlaywrightでCRUD周りのテストをすること |
詳しいルールや目的はアドベントカレンダー1日目の記事で紹介しております。
作業プロセス
要件の理解と整理
お題と必須条件は非常にシンプルだったため、どういった部分に行間が潜んでいるかを考えました。
例えば一覧で、という部分についてはガントチャートのような表示でもカンバンボードのような表示でも要件を満たせるように思います。
他にはデータを永続化させる方法はどうするのかなど。業務管理ツールと考えると、その日で作業が終わらなかった場合は翌日に持ち込せるようにデータ保存はさせたいですが、DBを用意するのも面倒かなと思いました。
今回は上記2件 + 1件を個人的な都合の良い解釈ポイントと判断し、以下のように要件を追加しました。
- 作成したタスクはカンバンボード形式で表示
- データはLocalStorageを利用して永続化する
- Amazon S3 にアップロードして静的コンテンツとして利用する
運営への質問事項
特に質問などはしませんでした。
というのも、必須要件は既に出題されているので細かい部分は自分で勝手に解釈した方が面白いかなと思ったためです。
（今思い返すと、もう少し踏み込んで情報を取りにいった方が良い気がします…）
Specs定義
要件を整理した上で、スペック駆動開発の第一歩として、Kiroに要件定義を依頼しました。
指示に至るまでの思考プロセス
とりあえず作ってみるか！の勢いで、基本要件 + 上記の3要件をそのまま渡して動かしました。
出来上がったものを見ないと修正可否もわからないので、何はともあれアウトプットを確認したかったためです。
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 |
多機能な管理ツールに疲れた社員のために、 今日やるべきことだけを管理できる軽量なツールが欲しいんだよね。 一応要件も書いたから、それに沿っていい感じに作ってほしい! 完成したらAWS(自分のSandbox環境)にデプロイしておいて〜! 上記の要件に沿って、アプリを開発したいです 制約事項は以下の通りです。 機能要件 タスクの追加(画面上部のフォームからテキスト入力)、編集、削除、一覧表示(タイトル、担当者、期限を表示) ログイン機能は不要 操作性 画面は1ページで完結。サクサク軽く動いて、直感的に操作できること 編集・削除は各行のボタンで可能 データ保持 ブラウザを閉じてもデータが消えないこと データ保持にはLocalStorageを利用してください。 品質保証 Playwright MCPを活用し、E2Eテストが通っていること 表示はカンバンボード形式としてください。 最終的に S3 にアップロードして利用します。 |
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 |
# 要件定義書 ## はじめに 本システムは、多機能な管理ツールに疲れた社員のために、今日やるべきことだけを管理できる軽量なタスク管理ツールです。1ページで完結するシンプルなUIと、ログイン不要で即座に使える利便性を提供します。 ## 用語集 - **System**: 今日のタスク管理ツール（Daily Task Manager） - **Task**: ユーザーが管理する作業項目。タイトル、担当者、期限、ステータス、作成日時を持つ - **LocalStorage**: ブラウザのローカルストレージ機能。ページを閉じてもデータを保持する - **Task List**: システムに登録されているすべてのタスクの一覧 - **Kanban Board**: タスクをステータス別の列に分けて表示するボード形式のUI - **Status Column**: カンバンボード上のステータスを表す列（To Do、In Progress、Done） - **Drag and Drop**: マウスでTaskをドラッグして別のStatus Columnに移動する操作 ## 要件 ### 要件1 **ユーザーストーリー:** ユーザーとして、新しいタスクを素早く追加したい。そうすることで、思いついたタスクをすぐに記録できる。 #### 受入基準 1. THE System SHALL タスクタイトル入力フィールドを表示する 2. THE System SHALL 担当者入力フィールドを表示する 3. THE System SHALL 期限選択フィールドを表示する 4. WHEN ユーザーが追加ボタンをクリックする, THE System SHALL 入力された情報から新しいTaskを作成する 5. WHEN 新しいTaskが作成される, THE System SHALL そのTaskをTask Listに追加する ### 要件2 **ユーザーストーリー:** ユーザーとして、登録したタスクをカンバンボード形式で見たい。そうすることで、タスクの進捗状況を視覚的に把握できる。 #### 受入基準 1. THE System SHALL Kanban Boardを表示する 2. THE System SHALL 3つのStatus Column（To Do、In Progress、Done）を表示する 3. THE System SHALL 各Taskを該当するStatus Columnに表示する 4. THE System SHALL 各Taskのタイトルを表示する 5. THE System SHALL 各Taskの担当者を表示する 6. THE System SHALL 各Taskの期限を表示する 7. THE System SHALL 各Status Column内のTaskを作成日時の降順で表示する ### 要件3 **ユーザーストーリー:** ユーザーとして、タスクのステータスを変更したい。そうすることで、作業の進捗を管理できる。 #### 受入基準 1. THE System SHALL 各TaskにDrag and Drop機能を提供する 2. WHEN ユーザーがTaskを別のStatus Columnにドラッグする, THE System SHALL そのTaskのステータスを更新する 3. WHEN Taskのステータスが更新される, THE System SHALL Taskを新しいStatus Columnに移動する 4. WHEN Taskのステータスが更新される, THE System SHALL 更新されたTask ListをLocalStorageに保存する ### 要件4 **ユーザーストーリー:** ユーザーとして、完了したタスクを削除したい。そうすることで、ボードをすっきり保てる。 #### 受入基準 1. THE System SHALL 各Taskに削除ボタンを表示する 2. WHEN ユーザーが削除ボタンをクリックする, THE System SHALL 該当するTaskをTask Listから削除する 3. WHEN Taskが削除される, THE System SHALL 更新されたKanban Boardを表示する ### 要件5 **ユーザーストーリー:** ユーザーとして、ブラウザを閉じても登録したタスクが残っていてほしい。そうすることで、毎回入力し直す手間が省ける。 #### 受入基準 1. WHEN 新しいTaskが追加される, THE System SHALL Task ListをLocalStorageに保存する 2. WHEN Taskが削除される, THE System SHALL 更新されたTask ListをLocalStorageに保存する 3. WHEN Taskのステータスが更新される, THE System SHALL 更新されたTask ListをLocalStorageに保存する 4. WHEN ページが読み込まれる, THE System SHALL LocalStorageからTask Listを読み込む 5. IF LocalStorageにデータが存在しない, THEN THE System SHALL 空のTask Listを初期化する ### 要件6 **ユーザーストーリー:** ユーザーとして、入力エラーを防ぎたい。そうすることで、不完全なタスクが登録されるのを避けられる。 #### 受入基準 1. WHEN タスクタイトルが空である, THE System SHALL Taskの追加を拒否する 2. WHEN タスクタイトルが空である, THE System SHALL ユーザーにエラーメッセージを表示する 3. WHEN 担当者が空である, THE System SHALL Taskの追加を拒否する 4. WHEN 期限が空である, THE System SHALL Taskの追加を拒否する 5. WHEN Taskの追加が成功する, THE System SHALL 入力フィールドをクリアする 6. WHEN Taskの追加が成功する, THE System SHALL 新しいTaskをTo Do列に配置する ### 要件7 **ユーザーストーリー:** ユーザーとして、シンプルで直感的なUIを使いたい。そうすることで、ストレスなくタスク管理ができる。 #### 受入基準 1. THE System SHALL 1ページ内にすべての機能を表示する 2. THE System SHALL 200ミリ秒以内にページを読み込む 3. THE System SHALL ログイン画面を表示しない 4. THE System SHALL ページ読み込み時に即座に使用可能な状態にする 5. THE System SHALL レスポンシブデザインを適用する 6. THE System SHALL Drag and Drop操作時に視覚的なフィードバックを提供する |
- 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 |
# 設計書 ## 概要 今日のタスク管理ツールは、カンバンボード形式でタスクを管理するシンプルなWebアプリケーションです。Drag & Drop機能を実装するため、Reactを採用し、状態管理とUI更新を効率的に行います。LocalStorageを使用してデータを永続化し、ログイン不要で即座に使えるツールを提供します。 ## アーキテクチャ ### 技術スタック - **React 18**: UIコンポーネントと状態管理 - **TypeScript**: 型安全性とコード品質の向上 - **HTML5 Drag and Drop API**: タスクの移動機能 - **LocalStorage API**: データの永続化 - **CSS3**: レスポンシブデザインとスタイリング - **Vite**: 開発サーバーとビルドツール（軽量で高速、TypeScriptサポート） ### アーキテクチャ図 ```mermaid graph TB A[App Component] --> B[TaskForm Component] A --> C[KanbanBoard Component] C --> D[Column Component - To Do] C --> E[Column Component - In Progress] C --> F[Column Component - Done] D --> G[TaskCard Component] E --> G F --> G A --> H[LocalStorage Service] H --> I[Browser LocalStorage] ``` ### ディレクトリ構成 ``` daily-task-manager/ ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts ├── src/ │ ├── main.tsx # エントリーポイント │ ├── App.tsx # メインアプリケーション │ ├── App.css # グローバルスタイル │ ├── components/ │ │ ├── TaskForm.tsx # タスク追加フォーム │ │ ├── KanbanBoard.tsx # カンバンボード │ │ ├── Column.tsx # ステータス列 │ │ └── TaskCard.tsx # タスクカード │ ├── services/ │ │ └── storage.ts # LocalStorage操作 │ ├── types/ │ │ └── task.ts # 型定義 │ └── utils/ │ └── constants.ts # 定数定義 ``` ## コンポーネントとインターフェース ### 1. App Component **責務**: アプリケーション全体の状態管理とコンポーネントの統合 **State**: ```typescript { tasks: Task[] // すべてのタスク } ``` **主要メソッド**: ```typescript const addTask = (task: TaskFormData): void const deleteTask = (taskId: string): void const updateTaskStatus = (taskId: string, newStatus: TaskStatus): void ``` ### 2. TaskForm Component **責務**: 新規タスクの入力フォーム **Props**: ```typescript interface TaskFormProps { onAddTask: (task: TaskFormData) => void; } ``` **State**: ```typescript { title: string; assignee: string; deadline: string; error: string | null; } ``` **主要メソッド**: ```typescript const handleSubmit = (e: React.FormEvent): void const validateForm = (): boolean const resetForm = (): void ``` ### 3. KanbanBoard Component **責務**: カンバンボード全体のレイアウトとDrag & Dropの調整 **Props**: ```typescript interface KanbanBoardProps { tasks: Task[]; onUpdateStatus: (taskId: string, status: TaskStatus) => void; onDeleteTask: (taskId: string) => void; } ``` **主要メソッド**: ```typescript const handleDragStart = (taskId: string): void const handleDrop = (status: TaskStatus): void ``` ### 4. Column Component **責務**: 各ステータス列の表示とドロップゾーンの管理 **Props**: ```typescript interface ColumnProps { status: TaskStatus; title: string; tasks: Task[]; onDrop: (taskId: string, status: TaskStatus) => void; onDeleteTask: (taskId: string) => void; } ``` **主要メソッド**: ```typescript const handleDragOver = (e: React.DragEvent): void const handleDrop = (e: React.DragEvent): void ``` ### 5. TaskCard Component **責務**: 個別タスクの表示とドラッグ可能な要素 **Props**: ```typescript interface TaskCardProps { task: Task; onDelete: (taskId: string) => void; onDragStart: (taskId: string) => void; } ``` ## データモデル ### Task 型定義 ```typescript // src/types/task.ts export type TaskStatus = 'todo' | 'inProgress' | 'done'; export interface Task { id: string; // ユニークID（UUID v4） title: string; // タスクタイトル（必須） assignee: string; // 担当者名（必須） deadline: string; // 期限（YYYY-MM-DD形式、必須） status: TaskStatus; // ステータス createdAt: string; // 作成日時（ISO 8601形式） } export interface TaskFormData { title: string; assignee: string; deadline: string; } ``` ### ステータス定数 ```typescript // src/utils/constants.ts import { TaskStatus } from '../types/task'; export const STATUS: Record<string, TaskStatus> = { TODO: 'todo', IN_PROGRESS: 'inProgress', DONE: 'done' } as const; export const STATUS_LABELS: Record<TaskStatus, string> = { todo: 'To Do', inProgress: 'In Progress', done: 'Done' }; ``` ## LocalStorage構造 ### キー - `daily-tasks`: タスク配列を格納 ### データ形式 ```javascript { "daily-tasks": [ { "id": "550e8400-e29b-41d4-a716-446655440000", "title": "APIの実装", "assignee": "田中太郎", "deadline": "2025-11-30", "status": "inProgress", "createdAt": "2025-11-27T10:30:00.000Z" } ] } ``` ## Storage Service ### storage.ts ```typescript import { Task } from '../types/task'; // タスクの読み込み export function loadTasks(): Task[]; // タスクの保存 export function saveTasks(tasks: Task[]): void; // LocalStorageキー export const STORAGE_KEY = 'daily-tasks'; ``` ## エラーハンドリング ### バリデーションエラー 1. **タイトル未入力**: "タスクタイトルを入力してください" 2. **担当者未入力**: "担当者を入力してください" 3. **期限未入力**: "期限を選択してください" ### LocalStorageエラー 1. **容量超過**: コンソールに警告を出力し、ユーザーに通知 2. **データ破損**: 空の配列で初期化し、エラーログを出力 ### Drag & Dropエラー 1. **ドロップ失敗**: 元の位置に戻す 2. **無効なステータス**: 操作をキャンセル ## UI/UXデザイン ### レイアウト ``` +--------------------------------------------------+ | Daily Task Manager | +--------------------------------------------------+ | [タスク追加フォーム] | | タイトル: [_______] 担当者: [_____] 期限: [____] | | [追加ボタン] | +--------------------------------------------------+ | To Do | In Progress | Done | | +----------+ | +----------+ | +----------+ | | | Task 1 | | | Task 3 | | | Task 5 | | | | 担当者 | | | 担当者 | | | 担当者 | | | | 期限 | | | 期限 | | | 期限 | | | | [削除] | | | [削除] | | | [削除] | | | +----------+ | +----------+ | +----------+ | | +----------+ | +----------+ | | | | Task 2 | | | Task 4 | | | | +----------+ | +----------+ | | +--------------------------------------------------+ ``` ### スタイリング方針 - **カラースキーム**: - To Do: 青系（#E3F2FD） - In Progress: 黄色系（#FFF9C4） - Done: 緑系（#E8F5E9） - **フォント**: システムフォント（sans-serif） - **レスポンシブ**: 768px以下でカラムを縦並びに変更 - **アニメーション**: ドラッグ時の視覚的フィードバック ### Drag & Drop UX 1. **ドラッグ開始**: カードの透明度を50%に 2. **ドラッグ中**: カーソルを`grabbing`に変更 3. **ドロップゾーン**: 背景色を薄く変更してハイライト 4. **ドロップ完了**: スムーズなアニメーションで移動 ## テスト戦略 ### 単体テスト（オプション） - Storage Service の各関数 - バリデーション関数 ### E2Eテスト（Playwright） 1. **タスク追加フロー** - フォームに入力 - 追加ボタンをクリック - To Do列にタスクが表示されることを確認 2. **Drag & Dropフロー** - タスクをドラッグ - In Progress列にドロップ - ステータスが更新されることを確認 3. **タスク削除フロー** - 削除ボタンをクリック - タスクが消えることを確認 4. **データ永続化フロー** - タスクを追加 - ページをリロード - タスクが残っていることを確認 ### 手動テスト - レスポンシブデザインの確認（モバイル、タブレット、デスクトップ） - ブラウザ互換性（Chrome、Firefox、Safari、Edge） - パフォーマンス（ページ読み込み時間） ## パフォーマンス最適化 1. **React.memo**: TaskCard コンポーネントの不要な再レンダリングを防止 2. **useCallback**: イベントハンドラーのメモ化 3. **遅延読み込み**: 初期表示時のみLocalStorageから読み込み 4. **軽量ビルド**: Viteによる最適化されたプロダクションビルド ## バージョン管理 ### Gitリポジトリ初期化 ```bash git init git add . git commit -m "Initial commit: Daily Task Manager" ``` ### .gitignore ``` # 依存関係 node_modules/ # ビルド成果物 dist/ # 環境変数 .env .env.local # エディタ設定 .vscode/ .idea/ # OS生成ファイル .DS_Store Thumbs.db # ログ *.log npm-debug.log* # TypeScript *.tsbuildinfo ``` ### コミット規約 - `feat:` 新機能追加 - `fix:` バグ修正 - `style:` スタイル変更 - `refactor:` リファクタリング - `test:` テスト追加・修正 - `docs:` ドキュメント更新 ## デプロイ ### ビルドコマンド ```bash npm run build ``` ### AWS S3へのデプロイ ```bash aws s3 sync dist/ s3://your-bucket-name --delete ``` ### 静的ホスティング設定 - インデックスドキュメント: `index.html` - エラードキュメント: `index.html`（SPAのため） - パブリックアクセス: 有効 ## セキュリティ考慮事項 1. **XSS対策**: Reactのデフォルトエスケープ機能を活用 2. **入力サニタイゼーション**: タイトルと担当者名の長さ制限（各100文字） 3. **LocalStorage容量**: 5MBの制限を考慮（約1000タスク程度） ## 今後の拡張可能性 - タスクの編集機能 - タスクの検索・フィルタリング - 複数ボードの管理 - タスクの優先度設定 - チーム共有機能（バックエンド連携） |
- 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 |
# 実装タスクリスト - [x] 1. プロジェクトのセットアップとGit初期化 - Vite + React + TypeScriptプロジェクトを作成 - 必要な依存関係をインストール（React 18、TypeScript、Vite） - Gitリポジトリを初期化し、.gitignoreを設定 - 初期コミットを作成 - _要件: 6.3, 6.4_ - [x] 2. 型定義と定数の実装 - [x] 2.1 Task型とTaskStatus型を定義 - src/types/task.tsファイルを作成 - Task、TaskStatus、TaskFormDataインターフェースを定義 - _要件: 1.4, 1.5, 2.3, 2.4, 2.5, 2.6_ - [x] 2.2 ステータス定数を定義 - src/utils/constants.tsファイルを作成 - STATUS、STATUS_LABELSオブジェクトを定義 - _要件: 2.2_ - [x] 3. LocalStorageサービスの実装 - [x] 3.1 storage.tsファイルを作成 - src/services/storage.tsファイルを作成 - STORAGE_KEY定数を定義 - _要件: 5.1, 5.2, 5.3, 5.4_ - [x] 3.2 loadTasks関数を実装 - LocalStorageからタスクを読み込む - データが存在しない場合は空配列を返す - データ破損時のエラーハンドリングを実装 - _要件: 5.4, 5.5_ - [x] 3.3 saveTasks関数を実装 - タスク配列をLocalStorageに保存 - 容量超過時のエラーハンドリングを実装 - _要件: 5.1, 5.2, 5.3_ - [x] 4. TaskCardコンポーネントの実装 - [x] 4.1 TaskCard.tsxファイルを作成 - src/components/TaskCard.tsxファイルを作成 - TaskCardPropsインターフェースを定義 - _要件: 2.3, 2.4, 2.5, 2.6_ - [x] 4.2 タスク情報の表示機能を実装 - タイトル、担当者、期限を表示 - 削除ボタンを配置 - _要件: 2.3, 2.4, 2.5, 2.6, 4.1_ - [x] 4.3 Drag機能を実装 - draggable属性を設定 - onDragStart イベントハンドラーを実装 - ドラッグ中の視覚的フィードバック（透明度50%）を追加 - _要件: 3.1, 7.6_ - [x] 4.4 削除機能を実装 - 削除ボタンのクリックイベントを実装 - onDeleteコールバックを呼び出し - _要件: 4.1, 4.2_ - [x] 4.5 TaskCardのスタイリング - カードのレイアウトとデザインを実装 - レスポンシブ対応 - _要件: 7.1, 7.5_ - [x] 5. Columnコンポーネントの実装 - [x] 5.1 Column.tsxファイルを作成 - src/components/Column.tsxファイルを作成 - ColumnPropsインターフェースを定義 - _要件: 2.2, 2.7_ - [x] 5.2 列のレイアウトを実装 - ステータスタイトルを表示 - TaskCardコンポーネントをリスト表示 - 作成日時の降順でソート -_要件: 2.2, 2.7_ - [x] 5.3 Drop機能を実装 - onDragOver イベントハンドラーを実装（preventDefault） - onDrop イベントハンドラーを実装 - ドロップゾーンのハイライト表示を追加 -_要件: 3.2, 3.3, 7.6_ - [x] 5.4 Columnのスタイリング - 列ごとの背景色を設定（To Do: 青、In Progress: 黄、Done: 緑） - レスポンシブ対応（768px以下で縦並び） - _要件: 7.1, 7.5_ - [x] 6. KanbanBoardコンポーネントの実装 - [x] 6.1 KanbanBoard.tsxファイルを作成 - src/components/KanbanBoard.tsxファイルを作成 - KanbanBoardPropsインターフェースを定義 - _要件: 2.1_ - [x] 6.2 3つのColumnコンポーネントを配置 - To Do、In Progress、Done列を表示 - 各列にフィルタリングされたタスクを渡す - _要件: 2.1, 2.2_ - [x] 6.3 Drag & Dropの状態管理を実装 - ドラッグ中のタスクIDを管理 - handleDragStart、handleDropメソッドを実装 - _要件: 3.1, 3.2, 3.3_ - [x] 6.4 KanbanBoardのスタイリング - 3列のグリッドレイアウトを実装 - レスポンシブ対応 - _要件: 7.1, 7.5_ - [x] 7. TaskFormコンポーネントの実装 - [x] 7.1 TaskForm.tsxファイルを作成 - src/components/TaskForm.tsxファイルを作成 - TaskFormPropsインターフェースを定義 - _要件: 1.1, 1.2, 1.3_ - [x] 7.2 フォーム入力フィールドを実装 - タイトル、担当者、期限の入力フィールドを配置 - 追加ボタンを配置 - _要件: 1.1, 1.2, 1.3_ - [x] 7.3 バリデーション機能を実装 - validateForm関数を実装 - 必須項目チェック（タイトル、担当者、期限） - エラーメッセージの表示 - _要件: 6.1, 6.2, 6.3, 6.4_ - [x] 7.4 フォーム送信処理を実装 - handleSubmit関数を実装 - バリデーション成功時にonAddTaskコールバックを呼び出し - フォームをクリア - _要件: 1.4, 1.5, 6.5, 6.6_ - [x] 7.5 TaskFormのスタイリング - フォームのレイアウトを実装 - エラーメッセージのスタイリング - _要件: 7.1, 7.5_ - [x] 8. Appコンポーネントの実装 - [x] 8.1 App.tsxファイルを作成 - src/App.tsxファイルを作成 - タスク配列のStateを定義 - _要件: 5.4, 5.5_ - [x] 8.2 初期データ読み込みを実装 - useEffectでloadTasks関数を呼び出し - 読み込んだタスクをStateに設定 - _要件: 5.4, 5.5_ - [x] 8.3 addTask関数を実装 - 新しいタスクオブジェクトを作成（ID、createdAt、status='todo'を追加） - タスク配列に追加 - saveTasksでLocalStorageに保存 - _要件: 1.4, 1.5, 5.1, 6.6_ - [x] 8.4 deleteTask関数を実装 - タスクIDで配列から削除 - saveTasksでLocalStorageに保存 - _要件: 4.2, 4.3, 5.2_ - [x] 8.5 updateTaskStatus関数を実装 - タスクIDでタスクを検索し、ステータスを更新 - saveTasksでLocalStorageに保存 - _要件: 3.2, 3.3, 3.4, 5.3_ - [x] 8.6 TaskFormとKanbanBoardを配置 - TaskFormコンポーネントを配置し、addTaskを渡す - KanbanBoardコンポーネントを配置し、tasks、updateTaskStatus、deleteTaskを渡す - _要件: 7.1_ - [x] 8.7 Appのスタイリング - グローバルスタイルを実装（App.css） - ページタイトルを表示 - _要件: 7.1, 7.5_ - [x] 9. エントリーポイントとHTMLの設定 - [x] 9.1 main.tsxファイルを作成 - src/main.tsxファイルを作成 - ReactDOM.createRootでAppコンポーネントをマウント - _要件: 6.4, 7.2_ - [x] 9.2 index.htmlを設定 - ページタイトルを「Daily Task Manager」に設定 - main.tsxをスクリプトとして読み込み - _要件: 7.1_ - [x] 9.3 TypeScript設定ファイルを作成 - tsconfig.jsonを作成 - React、DOM、ESNextの型定義を設定 - _要件: 6.4_ - [x] 10. ビルドとデプロイの準備 - [x] 10.1 package.jsonのスクリプトを設定 - dev、build、previewスクリプトを確認 - _要件: 7.2_ - [x] 10.2 プロダクションビルドを実行 - npm run buildを実行 - distフォルダが生成されることを確認 - _要件: 7.2_ - [x] 10.3 Gitコミット - すべての変更をコミット - コミットメッセージ: "feat: Implement daily task manager with kanban board" - _要件: 6.3_ - [x] 11. E2Eテストの作成（Playwright） - [x] 11.1 タスク追加フローのテスト - フォームに入力してタスクを追加 - To Do列にタスクが表示されることを確認 - _要件: 1.4, 1.5, 6.6_ - [x] 11.2 Drag & Dropフローのテスト - タスクをIn Progress列にドラッグ - ステータスが更新されることを確認 - _要件: 3.2, 3.3_ - [x] 11.3 タスク削除フローのテスト - 削除ボタンをクリック - タスクが消えることを確認 - _要件: 4.2, 4.3_ - [x] 11.4 データ永続化フローのテスト - タスクを追加 - ページをリロード - タスクが残っていることを確認 - _要件: 5.1, 5.4_ |
出力の判定と修正
Kiroの出力を確認し、期待通りか、修正が必要かを判断しました。
判定結果
何点か修正が必要でした。
良かった点
- design.md に書かれた画面レイアウト通りのイメージで画面を作成してくれたこと
- カンバンボードの使い勝手が良く、ステータスごとの色変更も含めて想定以上の出来だったこと
- データ永続化に関する要件が適切に読み取られていたこと
問題点
- 編集機能がなかった（よく見たら要件定義時点で記載が見当たらなかった）
- 「今日やるべきことだけを管理できる」というプロンプトなのに、期日がyyyy/MM/dd となっていた
- 個人的にはその日、という要件であれば当日の時間まで入力できた方が嬉しいと思う
Kiroとの対話
上記の不備修正のため、以下のプロンプトを追加で実行してもらいました。
|
1 2 |
1. 編集機能を追加してください。 2. 期日がyyyy/MM/dd になっているので、時分も含めて登録出来るようにしてください。 |
テスト実装
最後にPlaywright MCPを活用したテストを作成、実施しました。
ざっくり以下のような内容です。
|
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 |
■ タスク追加フロー ・フォームに入力してタスクを追加し、To Do列に表示される ・必須項目が未入力の場合、エラーメッセージが表示される ・タスク追加後、フォームがクリアされる ■ タスク編集フロー ・編集ボタンをクリックし、タスク情報を編集できる ・編集をキャンセルすると元の内容に戻る ・編集した内容が永続化される ・異なる列のタスクを編集できる ■ タスク削除フロー ・削除ボタンをクリックし、タスクが消える ・複数のタスクから特定のタスクを削除できる ・異なる列のタスクを削除できる ■ データ永続化フロー ・タスクを追加し、ページをリロードしてもタスクが残っている ・タスクのステータス変更が永続化される ・タスク削除が永続化される ・複数のタスクと状態が永続化される ■ Drag & Dropフロー ・タスクをIn Progress列にドラッグし、ステータスが更新される ・タスクをDone列にドラッグし、ステータスが更新される ・複数のタスクを異なる列に移動できる |
成果物
所要時間
ざっくり 2時間30分 ほどでした。
所要時間（3時間）内になんとか終わらせることができましたが、見返すと色々修正入れたくなります。
主な機能
Kiroに整理してもらいました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
* タスク追加 * タイトル、担当者、期限を入力してタスクを作成 * 追加後はフォームが自動クリア * タスク編集 * 既存タスクの情報を編集可能 * 編集ボタンから簡単に変更 * データ永続化 * LocalStorageでブラウザにデータ保存 * ページリロード後もタスクが残る * E2Eテスト * Playwrightで自動テスト実装済み * タスク追加、編集、永続化の動作を検証 |
工夫点など
- カンバンボードへのチャレンジ
- ユーザ体験的な楽しさを追求し、カンバンボードにチャレンジしてみました。
- 必要最低限の構成
- サーバサイドの実装を諦め、ローカルストレージを利用する方向を初期に検討したこと。
- 要件の行間読み
- どんな作りであれば要件にマッチしたものになるか、行間を意識した要件定義を行ったこと。
発見と学び
実務では気にしてやっている部分が、時間制限付きのゲーム形式だと焦って気づけずアウトプットに直結してしまったのが個人的には悔しかったです…
例えば
- プロンプトの最後に「何か疑問があれば質問してください」と仕込む
- steering に最低限の条件を用意して変な方向に進まないようにする
など、焦らなければもう少しクオリティが高くなる方法に気付くことができたように思いました。
感想
良かった点
- とりあえず当日の3時間内でアプリ完成まではこぎつけたこと！
- かなりタイトな時間での開発だったため、完成&デプロイまでは当日内にできたことはかなりスピード感ある対応ができたように思いました。
- 他メンバーのAI活用方法を知れたこと
- 他メンバーの活用方法などを今まで知らなかったので、かなりタメになりました。この機会に全部の記事を呼んで全部吸収したいです。
- 改めてAIの 早さ を感じれたこと
- 新人研修の題材に使っていたようなアプリが3時間で出来るの、本当にすごい時代になってしまったと改めて感じました
苦労した点
- 適当なインプットは適当なアウトプットになる
- レビュー不足で後から編集機能のプロンプトを追加した部分については、もう少し手前で防げたように思います。レビューはとても大事です。
今後に活かせること
Kiroを使ったアプリケーション開発手法については間違いなく知見が広がりました。
加えて、PlaywrightのMCPを利用したE2Eテストの自動生成は特に興味深かったです。テストを書く、書いたテストをメンテナンスし続けるという基本的ながら後回しになりがちな業務に、ようやく正面から向き合うことができそうです。
この記事が、少しでもみなさんのにお役に立てば幸いです。
ここまでお読みいただき、ありがとうございました！
The following two tabs change content below.
エンジニア ： 株式会社ギークフィード（GeekFeed Co.,Ltd.）
エンジニア６年生。
まだまだヒヨッコなので成鳥になるため頑張ります。
- 【Kiro・Playwright】社内でフルAI開発バトル！！「1行も書かずに」Todoアプリを完成させた話〜sakumaの場合〜 - 2025-12-12
- 【入社エントリ】エンジニア6年生の転職活動 - 2024-12-20
【採用情報】一緒に働く仲間を募集しています
