Mar 5, 2026

Vibe Coding入門ガイド2026：AIと対話しながら開発するエンジニアの新常識

#Vibe Coding #AI開発 #Cursor #Claude Code #GitHub Copilot #プログラミング

Vibe Codingとは：自然言語で「意図を伝えて」コードを生成する開発スタイル

Vibe Codingは、2025年にAndrej Karpathy（元Tesla AI責任者）が提唱した概念で、「AIに完全に身を委ね、エラーメッセージをそのまま貼り付けて修正させる」開発スタイルです。

従来の開発：設計 → コード記述 → デバッグ → リファクタリング

Vibe Coding：意図を自然言語で伝える → AIが実装 → 動作確認 → 修正を対話で依頼

Vibe Codingの3大ツール比較

ツール	価格	強み
Cursor	$20/月	コードベース全体の理解・マルチファイル編集
Claude Code	Claudeプランに含む	ターミナル直接操作・ファイルシステムフルアクセス
GitHub Copilot Workspace	$10/月	GitHubとの完全統合・Issue→PR自動化

Cursorのキーバインド

Ctrl+K  → インラインコード生成・修正
Ctrl+L  → チャットでコードベースに質問
Ctrl+I  → Composer（複数ファイルを一括変更）

Claude Codeの典型的な使い方

claude "このプロジェクトのREADMEを日本語で書いて"
claude "テストが失敗している原因を調べて修正して"
claude "Prismaスキーマを追加してマイグレーションを実行して"

実践：Vibe CodingでTodo APIを30分で作る

Step 1：設計を自然言語で伝える

プロンプト例：
「HonoとDrizzle ORMを使ったTodo API を作って。
- GET /todos: 一覧取得（完了/未完了フィルター付き）
- POST /todos: 作成
- PATCH /todos/:id: 完了状態の更新
- DELETE /todos/:id: 削除
DBはSQLite（開発用）、TypeScript、テストはvitest。
まずプロジェクト構造から始めて。」

Step 2：AIが生成したコードの例

// schema.ts（AIが生成）
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const todos = sqliteTable('todos', {
  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
  title: text('title').notNull(),
  completed: integer('completed', { mode: 'boolean' }).default(false),
  createdAt: text('created_at').$defaultFn(() => new Date().toISOString()),
});

export type Todo = typeof todos.$inferSelect;
export type NewTodo = typeof todos.$inferInsert;

Step 3：エラーをそのまま貼り付ける

エラーが出たらそのままプロンプトに貼り付けるだけ：

「以下のエラーが出ました：
TypeError: Cannot read properties of undefined (reading 'prepare')
  at todos.ts:23:15
修正してください。」

Vibe Codingで品質を保つ5つのルール

ルール1：生成されたコードを必ず読む

❌ 悪い例：動いたからOKと判断してコードを確認しない
✅ 良い例：生成後にレビューし、理解できない部分をAIに説明させる

ルール2：テストを先に書かせる（TDD）

「実装前にテストを書いて。
期待する動作：
- POST /todos でtitleが空の場合は400エラー
- 正常系は201でtodo objectを返す」

ルール3：型安全性を妥協しない

// AIがanyを使ったら即修正依頼
// ❌ 修正前
function createTodo(data: any) { ... }

// ✅ 修正指示：「anyを使わずに型を明示してください。zodでバリデーションも追加して。」

ルール4：セキュリティチェックをAIに依頼

「このAPIにセキュリティの問題があればすべて指摘して。
SQLインジェクション・認証・レート制限・入力バリデーション等をチェックして。」

ルール5：定期的に「説明を求める」

「このコードで一番複雑な部分はどこ？
なぜこのアプローチを選んだか説明して。
代替案と比較したトレードオフも教えて。」

Vibe Codingのプロンプト設計パターン10選

効果的なVibe Codingの鍵はプロンプトの質です。以下に、現場で使える10パターンを紹介します。

パターン1：制約付き実装指示

「Next.js 15 App Routerでユーザープロフィールページを作って。
制約：
- Server Components優先（クライアントは最小限）
- Zodでフォームバリデーション
- Tailwind CSSでスタイリング
- loading.tsx と error.tsx も作成
- 型安全性を100%保つ（any禁止）」

パターン2：段階的リファクタリング

「以下のコードをリファクタリングして。段階的に進めて。
Step 1: 関数を分割（1関数1責務）
Step 2: 型を厳密に定義
Step 3: エラーハンドリングを追加
Step 4: テストを書く
各ステップの差分を見せて。」

パターン3：比較検討型

「このユースケースに最適なDBを選んで。
要件：
- 読み取りが書き込みの100倍
- JSON形式のユーザー設定を保存
- 月間100万リクエスト
PostgreSQL / MongoDB / Redis それぞれのPros/Consを示して。」

パターン4：テスト駆動生成

「以下のテストケースを先に書いて。実装はまだしないで。
機能：ユーザー登録API
- メールアドレスが不正な場合 → 422エラー
- 既に登録済みのメール → 409エラー
- パスワードが8文字未満 → 422エラー
- 正常系 → 201 + JWTトークン返却」

パターン5：コードレビュー依頼

「このPRのコードをレビューして。以下の観点で指摘して：
1. セキュリティ（SQLi, XSS, CSRF）
2. パフォーマンス（N+1、不要なレンダリング）
3. 可読性（命名、関数の長さ）
4. テストカバレッジの不足
重要度を Critical / Warning / Info で分類して。」

パターン6：エラーデバッグ（コンテキスト付き）

「以下のエラーが本番環境でのみ発生します。
エラー: [エラーメッセージ]
環境: Node.js 20, Next.js 15, Vercel
開発環境では再現しません。
考えられる原因を3つ挙げて、それぞれの確認方法を教えて。」

パターン7：アーキテクチャ設計

「以下の要件でシステム設計をして。
要件：リアルタイムチャットアプリ
- ユーザー数：最大10万人
- メッセージ保存：3年間
- ファイル添付：最大10MB
技術スタックの選定理由とトレードオフも説明して。」

パターン8：マイグレーション計画

「既存のExpressアプリをNext.js App Routerに移行したい。
現状：Express + EJS + MySQL（30エンドポイント）
段階的な移行計画を作って。各段階でのリスクと対策も含めて。
一度に全部やらず、平行稼働期間を設けて。」

パターン9：パフォーマンス最適化

「このReactコンポーネントが遅い。
症状：リストが100件を超えるとスクロールがカクつく
コンポーネントのコードは以下：[コード]
React DevToolsのProfilerで見た結果：[結果]
具体的な最適化案をコード付きで3つ以上提案して。」

パターン10：ドキュメント生成

「このAPIの仕様書をOpenAPI 3.0形式で生成して。
含めるもの：
- 全エンドポイントの説明
- リクエスト/レスポンスのスキーマ（例付き）
- エラーレスポンス一覧
- 認証方式の説明」

Vibe Coding実践：プロジェクト別ワークフロー

Webアプリ開発のワークフロー

1. 要件定義（プロンプトで仕様を明確化）
   ↓
2. DB設計（AIにER図・スキーマを生成させる）
   ↓
3. API設計（OpenAPI仕様を生成）
   ↓
4. バックエンド実装（TDD：テスト→実装→リファクタ）
   ↓
5. フロントエンド実装（コンポーネント単位で生成）
   ↓
6. E2Eテスト（Playwrightテストを自動生成）
   ↓
7. CI/CD設定（GitHub Actions YAMLを生成）

バグ修正のワークフロー

// Step 1: エラーログをそのまま渡す
// 「以下のエラーが発生しています。修正してください。」

// Step 2: AIが提案する修正を確認
// 修正前のコード
async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  const data = await res.json(); // ここでエラー
  return data;
}

// Step 3: AIが提案する修正後のコード
async function fetchUser(id: string): Promise<User | null> {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) {
      console.error(`Failed to fetch user: ${res.status}`);
      return null;
    }
    const data: User = await res.json();
    return data;
  } catch (error) {
    console.error('Network error:', error);
    return null;
  }
}

ツール別の詳細比較と選び方

機能別比較表

機能	Cursor	Claude Code	GitHub Copilot Workspace	Windsurf
コード補完	◎ Tab補完	○	◎	◎
マルチファイル編集	◎ Composer	◎	◎	◎ Cascade
ターミナル操作	○	◎ 直接実行	△	○
Git操作	○	◎ 自動commit	◎ PR自動化	○
コードベース理解	◎ @codebase	◎ 全ファイル	○	◎
テスト自動生成	○	◎	○	○
デバッグ支援	○	◎ 実行+修正	△	○
月額料金	$20	Claudeプラン	$10	$10〜
オフライン動作	△	△	×	△

用途別おすすめ

個人開発・スタートアップ → Cursor（バランスが良い）
DevOps・自動化重視 → Claude Code（ターミナル操作が強い）
チーム開発・GitHub中心 → GitHub Copilot Workspace
コスパ重視 → Windsurf（$10/月で高機能）

各ツールの隠れた便利機能

Cursor

@web → 最新のドキュメントをWeb検索して参照
@file → 特定ファイルをコンテキストに追加
@folder → フォルダ全体を参照
Ctrl+Shift+I → Composer（マルチファイル一括変更）

Claude Code

claude --print "簡単な質問"  # 対話なしで即回答
claude "git diffを見てコミットメッセージを書いて"  # Git統合
claude "/review"  # コードレビュースキル
CLAUDE.md にルールを書くとプロジェクト固有の制約を自動適用

GitHub Copilot Workspace

Issue → Plan → Implement → PR の全自動化
「Fix #123」とIssueに書くだけでPRが生成される
複数ファイルの変更を1つのPlanとして俯瞰できる

Vibe Codingの生産性測定：実際のデータ

実測データ：同一タスクでの比較

タスク：RESTful API + 管理画面（CRUD 5エンティティ）

従来開発（手書き）：
  設計：4時間
  実装：16時間
  テスト：8時間
  合計：28時間

Vibe Coding（Claude Code）：
  設計（プロンプト作成）：1時間
  実装（AI生成+レビュー）：3時間
  テスト（AI生成+修正）：1.5時間
  合計：5.5時間

生産性向上：約5倍
※ただしAI生成コードのレビューは必須

品質面の比較

テストカバレッジ：
  手書き（急いだ場合）：40〜60%
  Vibe Coding：80〜95%（テスト生成が容易なため）

バグ密度（1000行あたり）：
  手書き：3〜5件
  Vibe Coding：2〜4件（型チェック・バリデーション漏れが減る）
  ※セキュリティバグはAIが見落とすことがあるため手動レビュー必須

Vibe Codingの限界：向かない場面

❌ 向かない場面：
- 要件が曖昧なまま始める（ゴミが量産される）
- AIが知らない社内フレームワーク・独自設計
- セキュリティクリティカルな認証・暗号化実装

✅ 向いている場面：
- ボイラープレート・CRUD実装
- 既存コードのリファクタリング
- テスト生成
- ドキュメント・コメント生成
- 新しいライブラリの使い方の習得

まとめ

Vibe Codingは「AIに依存する開発」ではなく「AIを道具として使いこなす開発」です。

Cursor：大規模プロジェクトでコードベース全体を理解させたい場合
Claude Code：ターミナルで自動化・スクリプト実行まで含めた開発
GitHub Copilot Workspace：Issue→PR自動化のワークフローを重視する場合