ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

世界遺産になっちゃった離島の半農エンジニアがKiroつかって家庭内の問題解決のアプリつくってみたっちゃ(佐渡弁)

はじめに

こんにちは!世界遺産「佐渡島の金山」で有名になっちゃった佐渡島で、半農半エンジニアをやっている矢部です。佐渡の北のほうで海と山の間にあるこじんまりした田んぼでお米作りながら、コードを書く日々を送っていますが、今回は家庭内の切実な問題に直面しました。

「子供たちのお手伝いのモチベーションが続かない!」

そこで、いつもお世話になっているAWSさんのAI開発環境「Kiro」を使って、家族みんなで楽しくお手伝いを管理できるWebアプリを作ってみることにしました。

普段はForgevisionさんでAWS環境を使ったアプリ開発をお仕事でやっているのですが、今回は「仕事じゃない」個人的なアプリ開発を気楽に、しかも田んぼの合間の空き時間に手早くできることに感動しました。私のような兼業エンジニアにとっては大変ありがたいなあ(ヨイショ)と思ってます。ありがとうKiroの中のひと!

プロジェクト概要と要件定義

アプリのコンセプト

このお手伝いアプリは、子供がお手伝いを完了し、保護者が承認してポイントを付与、そのポイントでごほうびと交換できるゲーミフィケーション要素を取り入れた家族向け管理アプリです。

主要な機能要件

1. ユーザー管理機能

  • 保護者アカウント: メール・パスワード認証
  • 子供アカウント: 家族エイリアス・ログイン名・パスワード認証
  • 管理者アカウント: システム全体の管理

2. お手伝い管理機能

  • タスクの作成・編集・削除(保護者)
  • タスクの実行・完了報告(子供)
  • 完了承認・却下(保護者)
  • 定期タスクの自動生成

3. ポイント・報酬システム

  • ポイント付与・管理
  • 報酬の設定・交換
  • 履歴管理

4. ゲーミフィケーション機能

  • レベルシステム
  • バッジ・称号システム
  • ランキング機能

技術スタック選定

フロントエンド

  • React 18 + TypeScript: モダンなUI開発
  • Vite: 高速な開発環境

バックエンド

  • Python FastAPI: 高性能なAPI開発
  • JWT認証: セキュアな認証システム
  • Pydantic: データバリデーション

データベース

  • Amazon DynamoDB: スケーラブルなNoSQLデータベース
  • シングルテーブル設計: 効率的なデータアクセス

インフラ

  • AWS: クラウドインフラ
  • Terraform: Infrastructure as Code
  • GitHub Actions: CI/CD

プロジェクト構造の設計

モノレポ構成

プロジェクトはモノレポ構成で、フロントエンド、バックエンド、インフラ設定を一元管理します。

dekitayo-app/
├── frontend/                 # React TypeScript アプリ
│   ├── src/
│   └── public/
├── backend/                  # FastAPI Python アプリ
│   ├── app/
│   └── tests/
├── infrastructure/           # Terraform 設定
└── docs/                    # 設計ドキュメント

設計ドキュメントの作成

要件定義書

EARS(Easy Approach to Requirements Syntax)形式で要件を定義しました。

要件例

### Requirement 1: 保護者認証機能**User Story:** 保護者として、メールアドレスとパスワードでログインしたい。そうすることで、安全に家族のお手伝い管理ができる。
#### Acceptance Criteria1. WHEN 保護者が正しいメールアドレスとパスワードを入力 THEN システムは認証を成功させる
2. WHEN 保護者が間違った認証情報を入力 THEN システムはエラーメッセージを表示する
3. WHEN 認証が成功 THEN システムは保護者ダッシュボードにリダイレクトする

設計ドキュメント

システム全体のアーキテクチャ、データベース設計、API設計を詳細に記述しました。

システムアーキテクチャ

Memaid形式で記述しました。

graph TB
    subgraph "ユーザー"
        U1[保護者]
        U2[子供]
        U3[管理者]
    end

    subgraph "CDN・認証層"
        CF[CloudFront + Basic認証]
        S3F[S3バケット<br/>フロントエンド]
    end

    subgraph "VPC: dekitayo-vpc"
        subgraph "Public Subnet"
            ALB[Application Load Balancer]
        end

        subgraph "Private Subnet"
            ECS[ECS/FastAPI]
        end
    end

    subgraph "データ層"
        DB[(DynamoDB)]
    end

    %% 接続線
    U1 --> CF
    U2 --> CF
    U3 --> CF
    CF --> S3F
    CF --> ALB
    ALB --> ECS
    ECS --> DB

    style U1 fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#000
    style U2 fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#000
    style U3 fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#000
    style CF fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#000
    style S3F fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#000
    style ALB fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#000
    style ECS fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#000
    style DB fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000

図にすると下記のようになります。

データベース設計

DynamoDBのシングルテーブル設計を採用しました。

  • Families Table: 家族情報の管理
  • Users Table: ユーザー情報とポイント管理
  • Tasks Table: お手伝いタスクの管理
  • TaskCompletions Table: タスク完了記録の管理

実装プロンプトの準備

Claude向け実装プロンプト

AI開発支援ツールのClaudeを活用するため、詳細な実装プロンプトを作成しました。

メインプロンプト

# お手伝いアプリ実装プロンプト## プロジェクト概要このお手伝いアプリは家族向けお手伝い管理アプリです。子供がお手伝いを完了し、保護者が承認してポイントを付与、ポイントでごほうびと交換できるシステムです。
## 技術スタック- **フロントエンド**: React + TypeScript + Vite
- **バックエンド**: Python FastAPI
- **データベース**: DynamoDB
- **インフラ**: AWS (ECS, ALB, CloudFront, S3)
- **認証**: JWT + Basic認証

Phase別実装プロンプト

段階的な実装のため、Phase別のプロンプトも作成しました。

Phase 1: 認証システム - JWT認証の実装 - 保護者・子供・管理者の権限管理 - ログイン・ログアウト機能

Phase 2: 基本機能 - タスク管理機能 - ポイントシステム - 報酬管理

開発環境とツール

使用したツール

開発環境

  • Kiro IDE: AI支援開発環境(ClaudeはKiroから呼び出し)
  • Node.js: JavaScript実行環境
  • Python 3.13: バックエンド開発
  • Git: バージョン管理

MCP(Model Context Protocol)

  • Chrome DevTools MCP: フロントエンド確認の効率化
  • Serena MCP: コンテキスト維持とナレッジ管理
  • 自動化スクリプト: UI/UX検証、テスト実行

設計・ドキュメント

  • Markdown: ドキュメント作成
  • Mermaid: 図表作成
  • EARS形式: 要件定義

学んだこと・工夫したポイント

1. AI協働開発のワークフロー

今回の開発で確立したKiro(設計)とClaude(実装)の協働ワークフローが最も重要な学びでした。

実際の開発フロー

役割分担の詳細

人間(PM・プロダクトオーナー)

  • ビジネス要件定義: 商用化戦略、ユーザーニーズの把握
  • プロダクト方針決定: 機能優先順位、リリース計画
  • 最終判断: 設計変更の承認、品質基準の設定
  • ステークホルダー調整: 家族(ユーザー)からのフィードバック収集

Kiroの役割(テックリード・アーキテクト)

  • 技術設計: アーキテクチャ設計、技術選定、設計ドキュメント作成
  • 品質管理: コードレビュー、設計チェック、技術的品質基準の設定
  • 指示書作成: Claude向けの詳細な実装プロンプト作成
  • 技術的判断: 実装方針の決定、技術的問題の解決方針
  • 設計適合性チェック: Claudeの実装が設計仕様に準拠しているかの検証

Claude(Kiroから呼び出し)の役割(開発者・実装担当)

  • 実装作業: 具体的なコード作成、スクリプト実装
  • オペレーション: ファイル操作、テスト実行、デバッグ
  • ドキュメント作成: 技術仕様書、API仕様書の詳細記述
  • 問題解決: エラー対応、最適化、リファクタリング

このワークフローの効果

🎯 設計の一貫性維持 - Kiroが設計責任を持つことで、プロジェクト全体の方向性がブレない - 指示書(.mdファイル)により、設計意図が明確に伝達される

⚡ 効率的な実装 - Claudeは実装に集中でき、迷いなく作業を進められる - 問題発生時の判断基準が明確(設計変更 vs 自己解決)

💰 トークンの節約 - 複数のAIを使い分けることで、セッション内のトークンを効率的に活用 - 設計フェーズと実装フェーズを分離することで、無駄な処理を削減

🛡️ 品質保証 - 設計変更が必要な場合は必ずKiroに戻る仕組み - 勝手な変更を防ぐことで、設計意図の維持を徹底

📝 ドキュメント化 - 全ての指示がMarkdownファイルとして残る - 後から振り返りや改善が可能

4. 詳細な実装プロンプトの価値

AI ツールを効果的に活用するため、具体的で詳細な実装プロンプトを作成しました。これにより:

  • 一貫性のある高品質なコードを効率的に生成
  • 技術的な意図を正確に伝達
  • 段階的な実装を計画的に進行
  • 品質基準を明確に設定

5. 段階的な開発アプローチ

複雑なアプリケーションを Phase 別に分割することで、リスクを軽減し、継続的な改善を可能にしました。

6. MCP(Model Context Protocol)による開発効率化

今回の開発では、MCPを活用して開発プロセスを大幅に効率化しました。

Chrome DevTools MCP の活用

  • フロントエンド確認の自動化: ブラウザでの表示確認を効率化
  • リアルタイムデバッグ: 開発中の問題を即座に特定・解決
  • UI/UX検証: アイコン表示、レスポンシブ対応の確認

Serena MCP によるコンテキスト維持

  • 長期コンテキスト保持: 開発セッション間での情報継続
  • 設計意図の維持: 要件から実装まで一貫した方針
  • 知識ベース構築: プロジェクト固有の知識を蓄積
  • 効率的な引き継ぎ: セッション再開時の迅速な状況把握

7. 設計適合性チェックの実践例

Kiroによる設計チェックの具体例:

コード品質のチェック

✅ アーキテクチャ: モノレポ構成、適切なディレクトリ分割
✅ 命名規則: TypeScript型定義、コンポーネント命名
✅ セキュリティ: JWT認証、パスワードハッシュ化
✅ パフォーマンス: 画像最適化、lazy loading
→ 設計適合性: 合格

8. AI協働開発のノウハウ

従来の人間同士のチーム開発とは異なる、AI協働開発の新しいワークフローを自分なりに確立できました:

従来開発との比較

項目 従来の開発 AI協働開発
設計 人間 人間(Kiro)
実装 人間 AI(Claude)
レビュー 人間 人間(Kiro)
テスト 人間 AI(Claude)+ MCP自動化
品質保証 人間 人間 + AI + MCP

まとめと今後の展望

今回の成果

  1. 完全な設計ドキュメント: 要件定義から実装まで網羅
  2. AI協働開発ワークフロー: Kiro(設計)とClaude(実装)の効率的な役割分担
  3. 詳細な実装プロンプト: 段階的な開発を支援する具体的な指示書
  4. MCP活用による自動化: 開発効率を大幅に向上させる仕組み
  5. 要件定義からAWS環境へのデプロイまで完了している

※現在のステータスは機能が一通り実装・デプロイ済みでリファクタリングとテストをちまちまやっています。

※以下、デプロイ済みの画面のサンプルです。

●保護者用機能例

おわりに

田んぼで稲刈りをしながら、お手伝いアプリの開発を進めてきました。半農半エンジニアという立場だからこそ、家族の時間を大切にしたい、そして子供たちの成長を見守りたいという想いが強くありました。

Kiroという素晴らしいAI開発環境のおかげで、短時間で(正味4日間ぐらい)一人でもここまでのアプリケーションを設計・開発できることに驚いています。

このアプリが、同じように子育てに悩む全国の家族の役に立てば、こんなに嬉しいことはありません。特に、地方で子育てをしている皆さんにとって、デジタルツールが家族の絆を深めるきっかけになればと思います。(ということで、このアプリ自体は、ゆくゆくは世間様に公開していきたいので、もろもろぼかした書き方になっております。ご容赦ください。)

皆さんも、身近な問題をAI協働開発で解決してみませんか?きっと想像以上のものが作れるはずです。

📝 この記事が役に立ったら、ぜひシェアしてください!世界遺産の島から愛を込めて 🌾⛏️