Claude Codeによる AI駆動開発（Vibe Coding）入門｜実務での使い方と効率化のコツ

はじめに：Vibe Codingとは何か

Vibe Coding（バイブコーディング）とは、AIと会話しながらコードを書いていく開発スタイルのことです。2025年にAnthropicがリリースした Claude Code は、ターミナル上で動作するAIエージェントで、コードの読解・生成・編集・デバッグ・テスト・コミットまでを自然言語の指示で行えます。

従来のコーディングは「ドキュメントを調べ → コードを書き → バグをデバッグする」の繰り返しでしたが、Claude Codeを使うと「やりたいことを日本語で伝える → AIが実装 → レビューして次へ」というリズムで開発を進められます。特に中規模以上のプロジェクトでは、リファクタリング・テスト生成・ドキュメント作成の工数が劇的に削減されます。

Claude Codeのインストールと初期設定

インストール

# Node.js 18以上が必要
npm install -g @anthropic-ai/claude-code

# バージョン確認
claude --version

# APIキーの設定（初回起動時に案内あり）
export ANTHROPIC_API_KEY="your-api-key-here"

# プロジェクトディレクトリで起動
cd your-project
claude

初期設定のポイント

• CLAUDE.md：プロジェクトルートに置くと、Claude Codeが毎回読み込みます。技術スタック・コーディング規約・禁止事項などを記述します
• .claudeignore：.gitignoreと同様の形式で、Claudeに読ませないファイルを指定できます（.env、secrets等）
• モデル選択：claude-opus-4-5（高精度・高コスト）/ claude-sonnet-4-5（バランス型）/ claude-haiku（高速・低コスト）

# CLAUDE.md の例
# プロジェクト概要
受発注管理システム（Next.js 14 + TypeScript + Prisma + PostgreSQL）

# 技術スタック
- フロントエンド：Next.js 14 App Router, TypeScript, Tailwind CSS
- バックエンド：Next.js API Routes
- DB：PostgreSQL (Supabase), Prisma ORM
- テスト：Vitest, Testing Library

# コーディング規約
- コンポーネントは関数コンポーネント + TypeScriptで記述
- any型の使用は禁止。unknownを使用すること
- コメントは日本語で記述
- APIレスポンスは統一された型（ApiResponse）を使用

# 禁止事項
- console.logをプロダクションコードに残さない
- .envファイルをコミットしない
- secretsをコードにハードコードしない

実務での開発フロー

Claude Codeを使った開発フローの典型例を紹介します。

① 新機能の実装

# 新機能を日本語で依頼する例
> 受注一覧画面に検索フィルタ機能を追加してください。
  フィルタ条件：顧客名（部分一致）、ステータス（ドロップダウン）、
  受注日（日付範囲）です。
  フィルタ状態はURLクエリパラメータに反映させてください。
  既存の OrderList コンポーネントを修正し、
  必要なら新しいhooksやコンポーネントを作成してください。

Claude Codeはプロジェクト全体を読み込んだうえで、既存のコンポーネント構造・型定義・命名規則に合わせた実装を提案します。差分（diff）を確認してから適用するかどうかを選択できます。

② バグ修正

# エラーメッセージをそのまま貼り付ける
> 以下のエラーが発生しています。原因を調査して修正してください。

TypeError: Cannot read properties of undefined (reading 'map')
  at OrderList (components/OrderList.tsx:42:28)
  at renderWithHooks (react-dom.development.js:14985:18)

ordersがundefinedになっているようですが、
APIレスポンスの型定義に問題があるかもしれません。

Claude Codeはエラーのスタックトレースと関連ファイルを読み込み、根本原因を特定して修正案を提示します。

③ リファクタリング

# コードベース全体のリファクタリング依頼
> src/components/ 以下を確認して、
  300行を超えているコンポーネントを特定し、
  責務を分割するリファクタリング案を提案してください。
  まずは変更ファイルの一覧と変更概要だけを教えてください。
  実際の変更は確認後に行います。

効果的なプロンプトの書き方

コンテキストを先に伝える

# ❌ コンテキストなし
> ユーザー認証を実装してください

# ✅ コンテキストあり
> このプロジェクトはNext.js 14 App RouterでSupabase Authを使っています。
  auth/loginページに、メールアドレス・パスワードでのログインフォームを追加してください。
  ログイン成功後は/dashboardにリダイレクト、失敗時はエラーメッセージを表示します。
  既存のButtonコンポーネントとInputコンポーネントを使用してください。

制約を明示する

# 制約を明示した依頼例
> 以下の制約で注文APIエンドポイントを実装してください：
  - 既存のAPIRouteパターン（app/api/*/route.ts）に従うこと
  - 認証チェックは withAuth ミドルウェアを使うこと
  - エラーレスポンスは ApiError クラスを使うこと
  - テストファイルも同時に作成すること（Vitest）
  - 実装後にlintとtypeチeckを実行してください

段階的に依頼する

# ステップを分けた依頼
# Step 1: まずデータモデルを設計
> 在庫管理機能に必要なPrismaスキーマを提案してください。
  既存のOrderモデルとProductモデルとの関係も考慮してください。

# Step 2: 確認後にマイグレーション生成
> スキーマがOKです。マイグレーションファイルを生成してください。

# Step 3: APIを実装
> マイグレーション完了です。CRUD APIエンドポイントを実装してください。

テスト生成への活用

Claude Codeはテスト作成が得意です。既存のコードからテストを自動生成させることで、テストカバレッジを効率的に上げられます。

# テスト生成の依頼例
> src/lib/pricing.ts の calculateOrderTotal 関数の
  ユニットテストを作成してください。

  以下のケースを必ずカバーしてください：
  - 通常の注文（数量×単価）
  - 割引適用（割引率10%、20%）
  - 消費税計算（10%）
  - 数量が0の場合のエラー
  - 金額がマイナスになる場合のエラー
  - 非常に大きな数値（オーバーフロー確認）

  Vitestを使用し、describe/itブロックで整理してください。

// Claude Codeが生成するテストコードのイメージ
import { describe, it, expect } from 'vitest'
import { calculateOrderTotal } from '../lib/pricing'

describe('calculateOrderTotal', () => {
  describe('通常計算', () => {
    it('数量×単価を正しく計算する', () => {
      expect(calculateOrderTotal(3, 1000, 0)).toBe(3300) // 3000 * 1.1
    })
  })
  describe('割引適用', () => {
    it('10%割引を正しく適用する', () => {
      expect(calculateOrderTotal(1, 1000, 0.1)).toBe(990) // 900 * 1.1
    })
  })
  describe('エラーケース', () => {
    it('数量が0のときエラーをスローする', () => {
      expect(() => calculateOrderTotal(0, 1000, 0)).toThrow()
    })
  })
})

コードレビューへの活用

Claude Codeはセルフコードレビューツールとしても有効です。

# コードレビュー依頼
> git diff main...feature/order-search の差分を確認して、
  以下の観点でレビューしてください：

  1. セキュリティ（SQLインジェクション・XSS・認証漏れ）
  2. パフォーマンス（N+1クエリ・不要な再レンダリング）
  3. エラーハンドリングの漏れ
  4. TypeScriptの型安全性
  5. テストカバレッジの不足箇所

  問題点があれば優先度（高・中・低）をつけて一覧化してください。

チーム開発での使い方

CLAUDE.mdでチーム規約を共有

CLAUDE.mdをGitでコミットすることで、チーム全員が同じコンテキストでClaude Codeを使えます。オンボーディング時間の短縮にもなります。

PRレビューへの活用

# PRレビューコメントの草案生成
> この PR（gh pr view 123）をチェックして、
  レビューコメントを日本語で作成してください。
  承認できる箇所はLGTMコメント、
  修正が必要な箇所は具体的な改善案を提案してください。

ドキュメント生成

# API仕様書の自動生成
> app/api/ 以下のすべてのAPIエンドポイントを読み込み、
  OpenAPI (Swagger) 形式のYAMLを生成してください。
  各エンドポイントのリクエスト/レスポンス型は
  TypeScriptの型定義から推論してください。

コストと効率化の実感値

※ 上記は弊社での実績ベースの参考値です。プロジェクト規模・複雑度により異なります。

APIコスト目安

注意点とベストプラクティス

やってはいけないこと

• シークレットを会話に貼り付けない：APIキー・パスワード・本番DBの接続文字列は絶対に含めない
• 本番環境で直接実行しない：Claude Codeがファイルを編集・コマンドを実行する前に確認を挟む
• 大きな変更を一度に適用しない：diff を確認してから段階的に適用する
• テストなしで本番リリースしない：AIが生成したコードでも、CI/CDパイプラインのテストを必ず通す

効果を高めるベストプラクティス

• ✅ CLAUDE.md に技術スタック・規約・禁止事項を詳細に記述する
• ✅ 大きなタスクは小さなステップに分解して依頼する
• ✅ 「まず計画を立ててください」→「計画を確認してから実装してください」の2段階で進める
• ✅ コードレビューはClaude Codeに任せず、人間がレビューする
• ✅ テスト生成は積極的に任せて、カバレッジを上げる
• ✅ git commitは自動化せず、コミットメッセージは人間が確認する

IDE連携とエコシステム

Claude Codeはターミナルで動作しますが、各種IDEとの連携も充実しています。

まとめ：AI駆動開発で変わること

Claude Codeを活用したAI駆動開発（Vibe Coding）で変わるのは、「書く量」ではなく「考える量」の質です。AIが実装の細部を担当することで、エンジニアはアーキテクチャ設計・ビジネスロジックの正確性・品質保証といった高レベルな思考に集中できるようになります。

• 実装速度：繰り返しの実装・ボイラープレートが大幅削減
• テスト品質：テスト生成コストが下がり、カバレッジが上がる
• ドキュメント：コードと同時にAPI仕様・READMEを生成できる
• 学習コスト：新しいフレームワーク・ライブラリへのキャッチアップが速くなる

まずはサイドプロジェクトや社内ツールの開発で試してみることをおすすめします。「AIに任せる範囲」と「人間が責任を持つ範囲」のバランスを掴むことが、AI駆動開発を使いこなすための第一歩です。