ストーリー
中島先輩が本気の表情になった。
課題: メモ管理APIのフルスタック開発
全体要件
アプリ: メモ管理 REST API
技術: TypeScript + Express.js
機能:
- メモの作成・読取・更新・削除(CRUD)
- メモのカテゴリ分類
- カテゴリ別の検索・フィルタ
- メモのピン留め(重要マーク)
品質要件:
- TypeScript strict modeで型安全
- 入力バリデーション(zod推奨)
- エラーハンドリング
- テストカバレッジ
Phase 1: 設計(20分)
やること
- Claude/ChatGPT を使ってデータモデルを設計
- APIエンドポイントを設計
- 処理フローを確認
使う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分)
やること
- Copilot を使って型定義を実装
- Copilot を使ってCRUDエンドポイントを実装
- 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分)
やること
- Copilot Chat の
/testsでテスト生成 - エッジケースのテストを手動追加
- Claude/ChatGPT でコードレビュー
- 指摘に基づいて改善
テストすべき観点
正常系:
- メモの作成
- メモの一覧取得
- カテゴリフィルタ
- ピン留めトグル
異常系:
- タイトル未入力で作成
- 存在しないIDでの取得
- 不正なカテゴリでの作成
エッジケース:
- タイトルが100文字ちょうど
- 本文が空
- 全メモ削除後の一覧取得
解答例(自分で実装してから確認しよう)
レビュー依頼プロンプト:
以下のメモ管理APIのコードを総合レビューしてください。
レビュー観点:
1. セキュリティ(入力バリデーション、インジェクション)
2. エラーハンドリングの適切さ
3. 型安全性
4. テストの網羅性
5. コードの可読性と保守性
出力形式:
| 重要度 | ファイル | 指摘内容 | 修正案 |
最後に総合評価(良い点3つ、改善点3つ)を付けてください。
[全コードを貼り付け]
達成度チェック
| Phase | テーマ | 使用ツール | 完了 |
|---|---|---|---|
| Phase 1 | 設計 | Claude/ChatGPT | [ ] |
| Phase 2 | 実装 | GitHub Copilot | [ ] |
| Phase 3 | テスト・レビュー | Copilot Chat + Claude | [ ] |
まとめ
| ポイント | 内容 |
|---|---|
| 設計フェーズ | Claude/ChatGPTで設計を議論し、人間が最終決定 |
| 実装フェーズ | Copilotのコメント駆動と型定義先行で効率化 |
| テスト・レビュー | Copilot Chat + Claude/ChatGPTの併用 |
| 品質保証 | AIの出力は必ず検証し、エッジケースは人間が追加 |
チェックリスト
- AIと設計を議論して、データモデルとAPIを決定できた
- Copilotを使って効率的にCRUDを実装できた
- テストを生成し、エッジケースを手動追加できた
- AIにレビューさせ、指摘に基づいて改善できた
- 複数のAIツールを開発フェーズに応じて使い分けられた
次のステップへ
お疲れさまでした。フルスタック開発演習が完了しました。 次はStep 5のチェックポイントです。
推定読了時間: 90分