生成AI研修
Part 5: AI × 開発 実践AI で機能を実装する

Chapter 27: Claude Code で機能を実装する

計画→実装→検証のワークフロー

Claude Code はターミナルから使うエージェント型の AI です。コードを読み・書き・実行しながら、大きな機能を自律的に実装できます。この章では Claude Code の強みを活かした実装フローを学びます。

27.1 計画 → 実装 → 検証のワークフロー

Claude Code の最大の特徴は、単なるコード生成ではなく「エージェントとして自律的に動く」点です。ファイルの読み込み、コマンドの実行、テストの確認まで一気通貫で行えます。

基本ワークフロー

実際のセッション例

$ claude

> 以下の機能を実装してほしい:

ユーザーが商品をお気に入りに追加・削除できる機能。
- エンドポイント: POST /api/favorites/:productId (追加)
- エンドポイント: DELETE /api/favorites/:productId (削除)
- エンドポイント: GET /api/favorites (一覧取得)
- ログイン済みユーザーのみ使用可能
- 既存の Express + Prisma の構成に合わせること
- テストも書くこと

Claude Code は以下のように動きます。

  1. 既存の src/ ディレクトリ構造をスキャン
  2. 既存の Controller/Service/Repository パターンを読み込み
  3. Prisma スキーマを確認し、Favorite モデルを追加
  4. 各レイヤーのファイルを実装
  5. npm test を実行してテストが通るか確認
  6. 失敗したテストを自動修正

TODO: あとで実際のスクリーンショットに置き換え - Claude Code がファイルを読み込み実装している様子(ターミナル)

計画を先に確認する

実装前に計画を確認させる習慣をつけましょう。

まず実装計画を教えてほしい。コードは書かないでよい。
どのファイルを変更・追加するか、どんな設計にするかを先に説明してほしい。

これにより、大きな実装ミスを防げます。

27.2 Issue 駆動開発との組み合わせ

GitHub Issues と Claude Code を組み合わせることで、タスク管理と実装を統合できます。

Issue から実装までのフロー

Claude Code への指示例:

以下の GitHub Issue を実装してほしい:
https://github.com/myorg/myapp/issues/42

Issue の内容に沿って実装し、最後に PR を作成してほしい。
コミットメッセージに Issue 番号を含めること。

Claude Code は gh コマンドを使って Issue の詳細を取得し、要件を把握した上で実装を進めます。

ブランチ命名規則の指定

実装前に以下の手順を踏んでほしい:
1. git checkout -b feat/42-add-favorites
2. 実装する
3. コミットメッセージは "feat: add favorites feature (#42)" の形式にする
4. gh pr create で PR を作成する

27.3 サブエージェントで調査を並列化

Claude Code は Task ツールを使い、サブエージェントに調査を並列で委託できます。大きな機能を実装する前の調査フェーズで特に有効です。

並列調査のパターン

指示例:

以下を並列で調査してから実装計画を立ててほしい:

1. src/auth/ を読んで認証の仕組みを把握する
2. prisma/schema.prisma を読んでデータモデルを把握する
3. src/controllers/ の既存コントローラーのパターンを把握する

調査が終わったら、お気に入り機能の実装計画を提示してほしい。

27.4 複雑な機能の分割実装

大きな機能は分割して実装するとリスクが減ります。Claude Code に明示的に分割を指示しましょう。

分割実装の例: 通知システムの追加

段階 1: データモデルのみ

まず Prisma スキーマに Notification モデルを追加するだけにしてほしい。
マイグレーションも実行してテーブルが作成されることを確認する。
この段階ではアプリケーションコードは変更しない。

段階 2: リポジトリ層

次に NotificationRepository を実装してほしい。
CRUD 操作と、未読通知を取得するメソッドを含める。
単体テストも書くこと。

段階 3: サービス層

NotificationService を実装してほしい。
- 通知を作成する
- ユーザーに通知を送る (現時点では DB 保存のみ、メール送信は後で)
- 既読にする

段階 4: API エンドポイント

最後に通知の API エンドポイントを実装してほしい。
GET /api/notifications (未読のみ)
PATCH /api/notifications/:id/read (既読にする)
結合テストも書くこと。

段階ごとにテストを確認する

# 各段階が終わるたびに実行
npm test

# カバレッジも確認
npm run test:coverage

27.5 ハンズオン: REST API を作る

課題: ブログ API を一から実装する

Claude Code を使って、以下の仕様の REST API を実装します。

仕様:

  • 記事 (Article) の CRUD
  • カテゴリー (Category) での絞り込み
  • JWT 認証
  • PostgreSQL + Prisma
  • Express.js + TypeScript

Step 1: 要件を渡す

以下の仕様で REST API を実装してほしい:

[上記の仕様をそのまま貼り付ける]

まず実装計画を立てて、承認を得てから実装を始めてほしい。
実装順序の提案もしてほしい。

Step 2: 計画を確認する

Claude が提示した計画を確認します。変更したい点があれば指示します。

計画の Step 3 で認証ミドルウェアを先に実装するよう変更してほしい。
また、エラーハンドリングは最初から共通クラスを使うようにしてほしい。

Step 3: 実装を進める

計画を承認したら実装を開始します。

計画で合意できた。実装を始めてほしい。
各ステップが完了したら報告してほしい。

Step 4: テストを確認する

npm test
# 全テストが通ることを確認

npm run test:coverage
# カバレッジが 80% 以上であることを確認

Step 5: 動作確認

npm run dev

# 別ターミナルで動作確認
curl -X POST http://localhost:3000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"password123"}'

Claude Code 活用のチェックリスト

  • 実装前に計画を確認したか
  • 各段階でテストが通ることを確認したか
  • コミットは小さい単位で行ったか
  • 既存コードのパターンに沿っているか
  • エラーハンドリングが適切か
  • 型の安全性が保たれているか

まとめ

Claude Code を使った実装のポイントをまとめます。

ポイント実践方法
計画を先に確認する「計画だけ教えてほしい」と明示する
Issue 駆動で追跡可能にするGitHub Issues と紐付けて実装する
並列調査を活用する大きな機能の前に調査を委託する
段階的に実装する大きな変更は分割してリスクを下げる
各段階でテストを確認する壊れたコードが積み重ならないようにする

Claude Code は「AI に実装をお任せ」するツールではなく、「AI と一緒に実装する」ツールです。計画・確認・修正のサイクルを回しながら使うことで、品質と速度を両立できます。

On this page