実践例①：新規アプリ開発のワークフロー

本章では、AIコーディングツールを活用した新規アプリ開発の実践的なワークフローを紹介します。

注記: 本章はAI活用テクニックを解説するためのチュートリアルです。具体的な生産性向上の数値については、実在企業の調査データ（Vol.6 第8章参照）をご確認ください。

プロジェクト例

例題: タスク管理アプリ（Webアプリ）

技術スタック:

Frontend: Next.js 14 + TypeScript
Backend: Next.js API Routes
Database: PostgreSQL + Prisma
Auth: NextAuth.js
Styling: Tailwind CSS

推奨ワークフロー

9.2.1 フェーズ1: 設計

Claude Code（Plan Mode）の活用:

プロンプト:
タスク管理アプリを設計します。

要件:
- ユーザー認証（メール/パスワード）
- タスクのCRUD
- 優先度と期限の設定
- タスクのフィルタリング
- レスポンシブデザイン

Next.js 14のApp Routerを使用して、
アーキテクチャを提案してください。

出力例:

提案されたディレクトリ構造:
src/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── register/
│   ├── (dashboard)/
│   │   ├── tasks/
│   │   └── settings/
│   └── api/
│       ├── tasks/
│       └── auth/
├── components/
├── lib/
└── types/

9.2.2 フェーズ2: データベース設計

Prismaスキーマ生成:

プロンプト:
以下の要件でPrismaスキーマを作成してください。

- User: id, email, password, name, createdAt
- Task: id, title, description, priority, dueDate,
        status, userId, createdAt, updatedAt

リレーション:
- User has many Tasks
- Task belongs to User

セキュリティ:
- パスワードはハッシュ化前提

生成例:

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String
  name      String?
  tasks     Task[]
  createdAt DateTime @default(now())
}

model Task {
  id          String   @id @default(cuid())
  title       String
  description String?
  priority    Priority @default(MEDIUM)
  dueDate     DateTime?
  status      Status   @default(TODO)
  user        User     @relation(fields: [userId], references: [id])
  userId      String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

enum Priority {
  LOW
  MEDIUM
  HIGH
}

enum Status {
  TODO
  IN_PROGRESS
  DONE
}

9.2.3 フェーズ3: 認証実装

テスト駆動アプローチ:

Step 1: テストケースを依頼
「NextAuth.jsの認証機能のテストケースを提案してください」

Step 2: テスト生成
「Jestでテストを実装してください」

Step 3: 実装生成
「このテストが通る認証設定を実装してください」

セキュリティ要件を明示:

認証実装の要件:
- bcryptでパスワードハッシュ（コスト12）
- JWT有効期限1時間
- CSRF対策
- レート制限（5回/15分）

9.2.4 フェーズ4: CRUD実装

Cursor Composerでの実装例:

@src/app/api/tasks/

以下のAPIエンドポイントを実装してください:

GET /api/tasks - タスク一覧取得
POST /api/tasks - タスク作成
GET /api/tasks/[id] - タスク詳細
PUT /api/tasks/[id] - タスク更新
DELETE /api/tasks/[id] - タスク削除

要件:
- 認証必須
- zodバリデーション
- Prisma使用
- エラーハンドリング

9.2.5 フェーズ5: フロントエンド

コンポーネント生成:

@src/components/

TaskCardコンポーネントを作成してください。

Props:
- task: Task型
- onEdit: () => void
- onDelete: () => void

要件:
- Tailwind CSS
- アクセシビリティ対応
- レスポンシブ

9.2.6 フェーズ6: テストと仕上げ

テストカバレッジ確認:

現在のテストカバレッジを確認し、
不足している部分のテストを追加してください。

目標: 80%以上

効果的な開発プラクティス

9.3.1 段階的アプローチ

推奨:
設計 → DB → 認証 → API → UI → テスト

非推奨:
「タスク管理アプリを作って」（一度に全部）

一度に全てを依頼せず、段階的に進めることで品質を確保します。

9.3.2 セキュリティを最初から

推奨:
認証、バリデーション、エラーハンドリングを
最初から要件に含める

非推奨:
後からセキュリティを追加

9.3.3 テスト駆動

推奨:
テストを先に書く（または同時に）

非推奨:
実装後にテスト

TDDアプローチで品質を担保します。

9.3.4 レビューを怠らない

推奨:
すべてのAI出力を人間がレビュー

非推奨:
AI出力をそのまま使用

AI開発ツールの実際の生産性効果

実際の生産性向上については、以下の実在企業調査を参照してください：

出典: Microsoft Research / GitHub

- タスク完了数: 26%増加（4,867名のRCT）
- コーディング速度: 55%向上（ラボ環境）
- 新人の開発速度: 25%向上（Duolingo）

詳細はVol.6 第8章「導入事例（実在企業）」を参照してください。

学んだ教訓

計画を先に: Plan Modeで全体設計
段階的に進める: 一度に全部を依頼しない
セキュリティを明示: プロンプトに含める
テストを書く: 品質の担保
レビューを怠らない: 理解してからコミット

まとめ：重要ポイントの振り返り

段階的アプローチ: 設計→DB→認証→API→UI→テスト
セキュリティ最優先: 最初から要件に含める
テスト駆動: 品質を担保
レビュー必須: 理解してからコミット
実際の効果: Vol.6 第8章の実在企業データを参照
教訓：計画と段階的実行が成功の鍵

AI支援開発成功事例①：レガシーシステム刷新