演習：AIと一緒にフルスタック開発しよう

ストーリー

「さあ、最後の総合演習だ」

中島先輩が本気の表情になった。

「ここまでの全てのスキルを使って、ミニアプリケーションを一つ作り上げてもらう。 設計からレビューまで、AIツールをフル活用しろ」

「どんなアプリですか？」

「メモ管理APIだ。シンプルだが、実務で使える品質で仕上げてくれ」

課題: メモ管理APIのフルスタック開発

全体要件

アプリ: メモ管理 REST API
技術: TypeScript + Express.js

機能:
  - メモの作成・読取・更新・削除（CRUD）
  - メモのカテゴリ分類
  - カテゴリ別の検索・フィルタ
  - メモのピン留め（重要マーク）

品質要件:
  - TypeScript strict modeで型安全
  - 入力バリデーション（zod推奨）
  - エラーハンドリング
  - テストカバレッジ

Phase 1: 設計（20分）

やること

1. Claude/ChatGPT を使ってデータモデルを設計
2. APIエンドポイントを設計
3. 処理フローを確認

使うAIツール

• Claude または ChatGPT（設計の議論）

設計すべき内容

データモデル:
  - Memo: id, title, content, category, isPinned, createdAt, updatedAt
  - Category: enum or テーブル

エンドポイント:
  - CRUD + フィルタ + ピン留め

設計に含めるべき観点:
  - バリデーションルール
  - エラーレスポンスの形式
  - ページネーション

AIへの設計相談プロンプト:

以下の要件でメモ管理APIを設計してください。

[要件を記載]

出力してほしいもの:
1. データモデル（TypeScript interface）
2. API一覧（表形式: メソッド, パス, 説明, リクエスト, レスポンス）
3. エラーレスポンスの統一形式
4. バリデーションルール一覧

設計例:

// データモデル
type MemoCategory = 'work' | 'personal' | 'idea' | 'todo';

interface Memo {
  id: string;
  title: string;
  content: string;
  category: MemoCategory;
  isPinned: boolean;
  createdAt: Date;
  updatedAt: Date;
}

// APIエンドポイント
// GET    /api/memos           一覧（フィルタ: category, isPinned）
// GET    /api/memos/:id       詳細
// POST   /api/memos           作成
// PUT    /api/memos/:id       更新
// DELETE /api/memos/:id       削除
// PATCH  /api/memos/:id/pin   ピン留めトグル

Phase 2: 実装（40分）

やること

1. Copilot を使って型定義を実装
2. Copilot を使ってCRUDエンドポイントを実装
3. Copilot Chat を使ってバリデーションを追加

実装の順序

1. types.ts     - 型定義（Copilotのコメント駆動）
2. validator.ts  - zodスキーマ（Copilotの補完）
3. store.ts      - インメモリストア（Copilotの補完）
4. routes.ts     - エンドポイント（Copilotの補完）
5. app.ts        - Express設定（Copilotの補完）

// validator.ts
import { z } from 'zod';

const memoCategorySchema = z.enum(['work', 'personal', 'idea', 'todo']);

export const createMemoSchema = z.object({
  title: z.string().min(1, 'タイトルは必須です').max(100, 'タイトルは100文字以内'),
  content: z.string().max(10000, '本文は10000文字以内'),
  category: memoCategorySchema.default('personal'),
});

export const updateMemoSchema = z.object({
  title: z.string().min(1).max(100).optional(),
  content: z.string().max(10000).optional(),
  category: memoCategorySchema.optional(),
});

// routes.ts（抜粋）
router.post('/', (req, res) => {
  const parsed = createMemoSchema.safeParse(req.body);
  if (!parsed.success) {
    return res.status(400).json({
      success: false,
      errors: parsed.error.errors.map(e => e.message),
    });
  }

  const memo = createMemo(parsed.data);
  res.status(201).json({ success: true, data: memo });
});

Phase 3: テストとレビュー（30分）

やること

1. Copilot Chat の /tests でテスト生成
2. エッジケースのテストを手動追加
3. Claude/ChatGPT でコードレビュー
4. 指摘に基づいて改善

テストすべき観点

正常系:
  - メモの作成
  - メモの一覧取得
  - カテゴリフィルタ
  - ピン留めトグル

異常系:
  - タイトル未入力で作成
  - 存在しないIDでの取得
  - 不正なカテゴリでの作成

エッジケース:
  - タイトルが100文字ちょうど
  - 本文が空
  - 全メモ削除後の一覧取得

レビュー依頼プロンプト:

以下のメモ管理APIのコードを総合レビューしてください。

レビュー観点:
1. セキュリティ（入力バリデーション、インジェクション）
2. エラーハンドリングの適切さ
3. 型安全性
4. テストの網羅性
5. コードの可読性と保守性

出力形式:
| 重要度 | ファイル | 指摘内容 | 修正案 |

最後に総合評価（良い点3つ、改善点3つ）を付けてください。

[全コードを貼り付け]

達成度チェック

まとめ

チェックリスト

• AIと設計を議論して、データモデルとAPIを決定できた
• Copilotを使って効率的にCRUDを実装できた
• テストを生成し、エッジケースを手動追加できた
• AIにレビューさせ、指摘に基づいて改善できた
• 複数のAIツールを開発フェーズに応じて使い分けられた

次のステップへ

お疲れさまでした。フルスタック開発演習が完了しました。 次はStep 5のチェックポイントです。

推定読了時間: 90分