Hello Kiro ~要件定義からアプリ起動まで~

はじめに

Waitlistで待っていたKiroのアカウントができた連絡が来たのでHello Kiroの作業メモがてら記事を残します。

作業環境

• MacBook Air M2 (OS: 15.6（24G84）)

作業手順

メールのDOWNLOADボタンをクリック

遷移先のWebページからKiroをダウンロードして起動

とりえあえずGoogleアカウントでサインインしてみる

アクセスコードを求められるのでメールで受領したコードを入力する

成功したら初期設定画面に移動VSCodeの拡張機能等をインポートして利用できる模様

初期設定を一通り終えるとエディタ画面が表示される

左下のプロフィールアイコンから利用状況の確認が可能

2025/08/16時点でのPlan一覧

「Open a　projects」で新規にフォルダを作ってプロジェクトを作ってみます

プロジェクトを開くとこのような画面が開きます。

Kiroの特徴として紹介されている仕様駆動開発を体験したいのでSpecを選択してチャットを通じて開発を進めてみます。
ちょうど家の日用品の在庫を確認できるようなアプリを作りたいと思っていたのでKiroを使うとどうなるか試してます。
最初はあえて抽象的なお願いをしてみます。

チャットが動き始めます（日本語対応してるんですね）

requirements.mdが生成され、Kiroが私に仕様の確認を求めてきました。

実際に作られたrequirements.mdがこちら。ドキュメントも日本語で生成されているので内容を確認しやすいです。
何より、1行でお願いした要望をドンピシャな要件定義に落としてくれたイメージがありました。（追加で買い物リストを作成するお願いをしようと思っていたのに既に要件定義に入っていたり）

# 要件定義書

## 概要

家庭で使用する日用品のストック状況を家族全員で共有・管理できるアプリケーションです。在庫の確認、追加、消費の記録を通じて、買い物の効率化と無駄な購入の防止を実現します。

## 要件

### 要件1

**ユーザーストーリー:** 家族の一員として、現在の日用品の在庫状況を確認したいので、いつでもストック一覧を見ることができる

#### 受入基準

1. WHEN ユーザーがアプリを開く THEN システムは現在の全ての日用品の在庫一覧を表示する
2. WHEN ユーザーが商品を選択する THEN システムは商品の詳細情報（現在の数量、最後の更新日時、更新者）を表示する
3. IF 商品の在庫が設定された最小値以下の場合 THEN システムは警告表示で在庫不足を知らせる

### 要件2

**ユーザーストーリー:** 家族の一員として、日用品を使用したときに在庫を減らしたいので、簡単に消費記録ができる

#### 受入基準

1. WHEN ユーザーが商品の消費ボタンを押す THEN システムは在庫数を1減らす
2. WHEN ユーザーが複数個消費する場合 THEN システムは数量を入力して一度に減らすことができる
3. WHEN 在庫が0になる THEN システムは在庫切れ状態として表示する
4. WHEN 消費記録が完了する THEN システムは更新日時と更新者を記録する

### 要件3

**ユーザーストーリー:** 家族の一員として、買い物で日用品を補充したときに在庫を増やしたいので、簡単に追加記録ができる

#### 受入基準

1. WHEN ユーザーが商品の補充ボタンを押す THEN システムは在庫数を指定した数量分増やす
2. WHEN 新しい商品を追加する場合 THEN システムは商品名、カテゴリ、初期数量、最小在庫数を設定できる
3. WHEN 補充記録が完了する THEN システムは更新日時と更新者を記録する

### 要件4

**ユーザーストーリー:** 家族の一員として、買い物リストを作成したいので、在庫不足の商品を自動で買い物リストに追加できる

#### 受入基準

1. WHEN 商品の在庫が最小値以下になる THEN システムは自動的に買い物リストに追加する
2. WHEN ユーザーが買い物リストを確認する THEN システムは購入が必要な商品一覧を表示する
3. WHEN 商品を購入して補充する THEN システムは買い物リストから該当商品を削除する
4. WHEN ユーザーが手動で商品を買い物リストに追加する THEN システムは任意の商品を買い物リストに追加できる

### 要件5

**ユーザーストーリー:** 家族の一員として、家族全員で同じ情報を共有したいので、リアルタイムで在庫状況が同期される

#### 受入基準

1. WHEN 一人の家族が在庫を更新する THEN システムは他の家族のデバイスにも即座に反映する
2. WHEN 複数の家族が同時に同じ商品を更新する THEN システムは最後の更新を優先し、競合を防ぐ
3. WHEN ネットワークが切断されている場合 THEN システムはオフラインでも操作を記録し、接続復旧時に同期する

### 要件6

**ユーザーストーリー:** 家族の一員として、商品を効率的に管理したいので、カテゴリ別に商品を整理して表示できる

#### 受入基準

1. WHEN ユーザーがカテゴリを選択する THEN システムは該当カテゴリの商品のみを表示する
2. WHEN 新しい商品を追加する THEN システムは適切なカテゴリ（食品、洗剤、トイレタリー等）を選択できる
3. WHEN カテゴリ別の在庫状況を確認する THEN システムはカテゴリごとの在庫不足商品数を表示する

気になる部分や追記したいことがあれば追記しようと思ったのですが、一旦このまま進んでも良いと思えてしまったので、更新なしで設計書作成をお願いします。

Kiroさんがチャットでご提案している通りに「Move to design phase」をクリック

設計が始まります

設計方針もおおよそ合意できるものでした。こちらも一旦このまま修正なしで進めてみます。

設計を承認すると実装計画が始まります。

出来上がった実装計画が下記です。
実装をステップ分けして、順々に進めていく計画が練られています。
対応する要件のマッピングもされていてすごい。

# 実装計画

- [ ] 1. プロジェクト初期設定とコア構造の構築
  - Next.js 14 プロジェクトの作成とTypeScript設定
  - Tailwind CSS、PWA設定、必要な依存関係のインストール
  - フォルダ構造の作成（components, pages, hooks, stores, utils）
  - _要件: 1.1, 5.1_

- [ ] 2. Supabase バックエンドの設定
  - Supabase プロジェクトの作成とデータベーススキーマの実装
  - Row Level Security (RLS) ポリシーの設定
  - 認証設定とユーザー管理機能の構築
  - _要件: 5.1, 5.2_

- [ ] 3. 基本的なデータモデルとタイプ定義の実装
  - TypeScript インターフェースの定義（Household, User, Category, Item, InventoryLog, ShoppingListItem）
  - Supabase クライアント設定とデータベース接続ユーティリティの作成
  - 基本的なCRUD操作関数の実装
  - _要件: 1.1, 2.1, 3.1_

- [ ] 4. 認証システムの実装
  - ログイン・ログアウト機能の実装
  - ユーザー登録機能の実装
  - 認証状態管理とプロテクトされたルートの設定
  - _要件: 5.1_

- [ ] 5. 基本的なUI コンポーネントの作成
  - Header、Navigation、LoadingSpinner などの共通コンポーネント実装
  - レスポンシブデザインとモバイルファーストのスタイリング
  - 基本的なレイアウトコンポーネントの作成
  - _要件: 1.1_

- [ ] 6. 商品一覧表示機能の実装
  - ItemList コンポーネントの作成
  - ItemCard コンポーネントの実装（商品名、現在数量、最小数量表示）
  - 在庫不足商品の警告表示機能
  - _要件: 1.1, 1.3_

- [ ] 7. 商品詳細表示機能の実装
  - ItemDetail コンポーネントの作成
  - 商品の詳細情報表示（数量、最後の更新日時、更新者）
  - モーダルまたは詳細ページでの表示機能
  - _要件: 1.2_

- [ ] 8. 在庫消費機能の実装
  - QuantityControls コンポーネントの作成
  - 1個消費ボタンと複数個消費入力機能
  - 在庫数の更新とデータベースへの保存
  - 在庫履歴ログの記録機能
  - _要件: 2.1, 2.2, 2.4_

- [ ] 9. 在庫補充機能の実装
  - 補充数量入力フォームの作成
  - 在庫数の増加処理とデータベース更新
  - 補充履歴ログの記録機能
  - _要件: 3.1, 3.3_

- [ ] 10. 新商品追加機能の実装
  - AddItemForm コンポーネントの作成
  - 商品名、カテゴリ、初期数量、最小在庫数の入力フォーム
  - バリデーション機能とエラーハンドリング
  - _要件: 3.2_

- [ ] 11. カテゴリ管理機能の実装
  - Category データモデルの実装
  - CategoryFilter コンポーネントの作成
  - カテゴリ別商品フィルタリング機能
  - _要件: 6.1, 6.2_

- [ ] 12. 買い物リスト自動生成機能の実装
  - 在庫最小値チェック機能の実装
  - 自動買い物リスト追加のトリガー機能
  - ShoppingList コンポーネントの作成
  - _要件: 4.1, 4.2_

- [ ] 13. 買い物リスト管理機能の実装
  - 手動での商品追加機能
  - 購入完了マーク機能
  - 購入完了時の在庫自動補充機能
  - _要件: 4.3, 4.4_

- [ ] 14. リアルタイム同期機能の実装
  - Supabase Realtime の設定
  - useRealtime カスタムフックの作成
  - 在庫更新時の他デバイスへの即座反映機能
  - _要件: 5.1_

- [ ] 15. 競合制御機能の実装
  - 楽観的ロック機能の実装
  - 同時更新時の競合検知と解決
  - 最後の更新者優先の処理実装
  - _要件: 5.2_

- [ ] 16. オフライン対応機能の実装
  - Service Worker の設定とPWA機能の実装
  - オフライン時の操作キューイング機能
  - ネットワーク復旧時の自動同期機能
  - useOfflineSync カスタムフックの作成
  - _要件: 5.3_

- [ ] 17. 状態管理の実装
  - Zustand を使用した状態管理ストアの作成
  - itemStore, userStore, offlineStore の実装
  - 状態の永続化とローカルストレージ連携
  - _要件: 5.1, 5.3_

- [ ] 18. エラーハンドリングとバリデーションの実装
  - フォームバリデーション機能の実装
  - ネットワークエラー処理の実装
  - ユーザーフレンドリーなエラーメッセージ表示
  - _要件: 2.1, 3.1_

- [ ] 19. カテゴリ別在庫状況表示機能の実装
  - カテゴリごとの在庫不足商品数表示
  - カテゴリ別の統計情報表示
  - カテゴリ管理画面の実装
  - _要件: 6.3_

- [ ] 20. 在庫切れ状態表示機能の実装
  - 在庫0の商品の特別表示
  - 在庫切れ商品の自動買い物リスト追加
  - 在庫切れ通知機能
  - _要件: 2.3_

- [ ] 21. 単体テストの実装
  - React コンポーネントのテスト作成
  - カスタムフックのテスト実装
  - ユーティリティ関数のテスト作成
  - _要件: 全要件のテストカバレッジ_

- [ ] 22. 統合テストの実装
  - Supabase API 操作のテスト
  - リアルタイム同期機能のテスト
  - オフライン/オンライン切り替えテスト
  - _要件: 5.1, 5.2, 5.3_

- [ ] 23. E2Eテストの実装
  - 主要ユーザーフローのテスト作成
  - 複数デバイス間の同期テスト
  - PWA機能のテスト実装
  - _要件: 全要件の統合テスト_

- [ ] 24. パフォーマンス最適化とデプロイ準備
  - コードスプリッティングとレイジーローディング
  - PWA最適化とキャッシュ戦略
  - Vercel デプロイ設定とビルド最適化
  - _要件: 1.1, 5.1_

サービスをリリースしたらどれぐらいのコスト感になるのか気になったので聞いてみたら見積もりも行ってくれました。（タイミングが悪かったのか、実装計画の承認にもなってしまいました）

実装計画を承認したことになったので、タスクを進めてみてもらいます。
タスクはtasks.mdの「Start task」をクリックして進められるようです。

Start Taskをクリックすると実装が動き始めました。この辺りは今はまだ日本語対応されていなさそうです。

タスクでシェルを使う部分はシェル事項が終わっているのに「Working...」から進まないことがあったので適宜チャットで適当にチャットを投げてシェルを再実行させながら動かしました

認証システムの実装まで進めてアプリを動かしてみたらこんな画面ができてました
要件定義から始めて簡単にアプリが作れそうですね。