🐈

作ろう作ろうと思っていたアプリをKiroでAI駆動開発やってみたけど完成までいけなかった話

に公開
zennfes2025ai
idea

はじめに

作ろう作ろうと思っていたアプリがあった
スナック菓子をドラフト会議形式のWEBアプリ
普段、podcastが好きでいろいろよく聞いているんだけど
好きな番組に二箱目のパンドラってのがあって
そのエピソードのなかでスナック菓子ドラフト会議回が好きで
いっしょに盛り上がってくれる友達もいないし
アプリだけでも作りたいなと思ってた
https://open.spotify.com/show/7BduJ08X0m8RZUztTzVbAW?si=9ec75537d63e40c7

KiroでAI駆動開発を試してみる

要件とタスクはこんな感じ

requirements

`# Requirements Document

Introduction

ポテトチップスをドラフト会議形式で選択するWebアプリケーション。1人のユーザーが会議を作成し、URLを共有することで複数のユーザーが参加してポテトチップスのドラフト会議を行うことができる。各参加者は順番にポテトチップスを選択し、楽しいドラフト体験を提供する。

Requirements

Requirement 1

User Story: 会議主催者として、ポテトチップスドラフト会議を作成したい。そうすることで、友人たちと楽しいドラフト体験を共有できる。

Acceptance Criteria

  1. WHEN ユーザーが「会議作成」ボタンをクリック THEN システムは新しいドラフト会議を作成し、一意のURLを生成する SHALL
  2. WHEN 会議が作成される THEN システムは会議設定画面を表示する SHALL（参加者数、ドラフト順序、利用可能なポテトチップス選択）
  3. WHEN 主催者が会議設定を完了 THEN システムは共有可能なURLを表示する SHALL

Requirement 2

User Story: 参加者として、共有されたURLから会議に参加したい。そうすることで、ドラフト会議に参加できる。

Acceptance Criteria

  1. WHEN ユーザーが会議URLにアクセス THEN システムは参加者名入力画面を表示する SHALL
  2. WHEN 参加者が名前を入力して参加 THEN システムは待機画面を表示し、他の参加者を待つ SHALL
  3. IF 会議が既に開始されている THEN システムは「会議は既に開始されています」メッセージを表示する SHALL

Requirement 3

User Story: 参加者として、同時にポテトチップスを選択したい。そうすることで、全員が同じタイミングで選択できる。

Acceptance Criteria

  1. WHEN ドラフトが開始される THEN システムは全参加者に利用可能なポテトチップス一覧を表示する SHALL
  2. WHEN 参加者がポテトチップスを選択 THEN システムは選択を記録し、他の参加者の選択完了を待つ SHALL
  3. WHEN 全参加者が選択完了 THEN システムは全員の選択を同時に開示する SHALL

Requirement 4

User Story: 全参加者として、ドラフトの進行状況をリアルタイムで確認したい。そうすることで、現在の状況を把握できる。

Acceptance Criteria

  1. WHEN 誰かがポテトチップスを選択 THEN システムは全参加者の画面を即座に更新する SHALL
  2. WHEN ドラフトが進行中 THEN システムは現在の順番、残りのポテトチップス、各参加者の選択済みアイテムを表示する SHALL
  3. WHEN 全てのポテトチップスが選択完了 THEN システムは最終結果画面を表示する SHALL

Requirement 5

User Story: 参加者として、選択可能なポテトチップスの情報を確認したい。そうすることで、適切な選択ができる。

Acceptance Criteria

  1. WHEN ポテトチップス一覧を表示 THEN システムはメーカー名と商品名を表示する SHALL
  2. WHEN ポテトチップスを選択 THEN システムは選択確認ダイアログを表示する SHALL
  3. IF ポテトチップスが既に選択済み THEN システムは「選択済み」状態を視覚的に表示する SHALL

Requirement 6

User Story: 参加者として、同じポテトチップスを選択した場合の競合を公平に解決したい。そうすることで、全員が納得できるドラフト体験ができる。

Acceptance Criteria

  1. WHEN 複数の参加者が同じポテトチップスを選択 THEN システムは抽選処理を実行する SHALL
  2. WHEN 抽選が実行される THEN システムは抽選結果を全参加者に表示し、当選者を決定する SHALL
  3. WHEN 抽選に漏れた参加者がいる THEN システムは該当参加者に再選択を促す SHALL
  4. WHEN 再選択が必要 THEN システムは残りの利用可能なポテトチップスから選択させる SHALL
  5. WHEN 全員の選択が完了するまで THEN システムは競合解決プロセスを繰り返す SHALL

Requirement 7

User Story: 観戦者として、ドラフト会議を観戦したい。そうすることで、参加せずにドラフトの様子を楽しめる。

Acceptance Criteria

  1. WHEN 会議URLにアクセス THEN システムは「参加」または「観戦」の選択肢を提供する SHALL
  2. WHEN 観戦モードを選択 THEN システムは観戦者として会議に参加させる SHALL
  3. WHEN 観戦中 THEN システムはドラフトの進行状況をリアルタイムで表示するが、選択権限は与えない SHALL
  4. WHEN ドラフトが進行中 THEN システムは観戦者に参加者の選択状況と結果を表示する SHALL

Requirement 8

User Story: 会議主催者として、参加人数を設定したい。そうすることで、適切な規模のドラフト会議を開催できる。

Acceptance Criteria

  1. WHEN 会議作成時 THEN システムは参加者数上限（2-8人）の設定を要求する SHALL
  2. WHEN 参加者数設定完了時 THEN システムは会議URLを生成し、参加者募集画面に移行する SHALL
  3. WHEN 設定した参加者数に達した時 THEN システムは自動的にドラフトを開始する SHALL`
tasks

tasks

Implementation Plan

  • 1. プロジェクト基盤とデータモデルの設定

    • Node.js + TypeScript + Express.js プロジェクトの初期化
    • データベーススキーマの作成（SQLite使用）
    • 基本的なデータモデル（Meeting, Participant, PotatoChip, Selection）の実装
    • Requirements: 1.1, 8.1

  • 2. 会議管理APIの実装

    • 会議作成エンドポイント（POST /api/meetings）の実装
    • 会議取得エンドポイント（GET /api/meetings/:id）の実装
    • 参加者登録エンドポイント（POST /api/meetings/:id/join）の実装
    • Requirements: 1.1, 1.2, 2.1, 2.2

  • [ ]* 2.1 会議管理APIのユニットテスト

    • 会議作成、取得、参加のテストケース作成
    • エラーハンドリングのテスト
    • Requirements: 1.1, 2.1

  • 3. ポテトチップスマスターデータの実装

    • ポテトチップス取得API（GET /api/potato-chips）の実装
    • 初期データの投入（有名なポテトチップス商品）
    • 利用可能状態の管理機能
    • Requirements: 5.1, 8.2

  • 4. WebSocket通信基盤の構築

    • Socket.IOサーバーの設定
    • 基本的な接続・切断処理の実装
    • 会議ルーム管理機能の実装
    • Requirements: 4.1, 4.2

  • 5. リアルタイム参加者管理の実装

    • 参加者の会議参加処理（join-meeting イベント）
    • 観戦者と参加者の区別処理
    • 参加者状態の全体同期（participant-joined イベント）
    • Requirements: 2.2, 7.1, 7.2

  • 6. 同時選択システムの実装

    • ポテトチップス選択処理（select-chip イベント）
    • 全参加者の選択完了検知
    • 選択結果の同時開示（all-selections-revealed イベント）
    • Requirements: 3.1, 3.2, 3.3

  • 7. 競合解決（抽選）システムの実装

    • 選択競合の検出ロジック
    • 抽選処理の実装
    • 抽選結果の通知（lottery-result イベント）
    • 敗者の再選択フロー
    • Requirements: 6.1, 6.2, 6.3, 6.4, 6.5

  • [ ]* 7.1 抽選システムのユニットテスト

    • 抽選ロジックの正確性テスト
    • 複数回の競合解決テスト
    • Requirements: 6.1, 6.2

  • 8. フロントエンド基盤の構築

    • React + TypeScript プロジェクトの初期化
    • ルーティング設定（React Router）
    • Socket.IOクライアントの設定
    • 基本的なレイアウトコンポーネントの作成
    • Requirements: 1.1, 2.1

  • 9. 会議作成画面の実装

    • 参加者数設定フォームの作成
    • 会議作成処理とURL生成
    • 会議URL共有画面の実装
    • Requirements: 1.1, 1.2, 1.3, 8.1, 8.2

  • 10. 会議参加画面の実装

    • 参加者名入力フォームの作成
    • 参加/観戦モード選択機能
    • 参加処理とエラーハンドリング
    • Requirements: 2.1, 2.2, 2.3, 7.1, 7.2

  • 11. 待機画面の実装

    • 参加者一覧の表示
    • リアルタイム参加者更新
    • ドラフト開始条件の表示
    • Requirements: 2.2, 8.3

  • 12. ドラフト選択画面の実装

    • ポテトチップス一覧の表示（メーカー名・商品名）
    • 選択確認ダイアログの実装
    • 選択済み状態の視覚的表示
    • 他の参加者の選択待ち表示
    • Requirements: 3.1, 3.2, 5.1, 5.2, 5.3

  • 13. 競合解決画面の実装

    • 抽選実行中の表示
    • 抽選結果の表示
    • 敗者の再選択画面
    • Requirements: 6.1, 6.2, 6.3, 6.4

  • 14. 結果表示画面の実装

    • 最終選択結果の表示
    • 参加者別の選択履歴表示
    • 観戦者向けの結果表示
    • Requirements: 4.3, 7.4

  • 15. エラーハンドリングとUX改善

    • 接続エラー時の再接続処理
    • 会議状態同期エラーの処理
    • ローディング状態の表示
    • ユーザーフレンドリーなエラーメッセージ
    • Requirements: 2.3, 4.1

  • [ ]* 16. E2Eテストの実装

    • 完全なドラフトフローのテスト
    • 競合発生時のテスト
    • 観戦機能のテスト
    • Requirements: 全体

  • 17. 最終統合とデプロイ準備

    • 全機能の統合テスト
    • 本番環境用の設定調整
    • Docker設定の作成
    • Requirements: 全体

あとは、ポチポチtasksの消化をしていくだけ

  • ドラフト会議形式でポテトチップスを選択していくWEBアプリケーション
  • ユーザーはURLを発行することができる
    くらいしか書いてないのにここまで出来上がることに驚いた

結果



会議発行までは行けたけど、そこから進まない…

感想

  • いい感じに進めてくれてすごい！
  • ただ、どんどん進めてくれる代わりにレビューが追いつかない
  • 普段、ふわっと考えながら実装している自分のレベルの低さに気づく
  • スモールステップで確認しながら作るか、がっつり要件定義の制度をあげるべきか要検討

Discussion