Vibe Coding 入門チュートリアル
Vibe Coding（雰囲気プログラミング）はまったく新しいプログラミングパラダイムです。一行ずつ手書きでコードを書く必要はなく、自然言語で欲しいものを記述し、AIがコードを書き、私たちはレビューと方向性の管理を担当します。
Vibe Codingチュートリアル参考：https://www.example.com/vibe-coding/vibe-coding-tutorial.html
Vibe Codingとは
Vibe Codingこの言葉は、元テスラAIディレクターでOpenAIの共同創業者であるAndrej Karpathy氏が2025年2月に初めて提唱しました。
彼はこのまったく新しいプログラミング手法を一言で次のように要約しました：
「I just vibe. I don't even touch the keyboard sometimes. I just talk to the AI, it writes the code, I review it, and we iterate.」
訳すとこうなります：あなたはただ自分の「感覚」を説明するだけで、AIがコードを書き、あなたがレビューし、それを繰り返す。
簡単に言うと、Vibe Codingとは：あなたが普通の言葉でAIに欲しい機能を伝えると、AIがコードを書いてくれる。構文の細部にこだわる必要も、APIパラメータを覚える必要も、すべてのエラーを手動でデバッグする必要もなく、これらはすべてAIが処理します。
私たちの役割は「コードを書く人」から「要件を記述する人」へと変わり、言い換えれば——プログラマーからプロダクトマネージャー＋アーキテクトへと変わります。
Vibe CodingはAIにあなたの思考を代替させるのではなく、AIに価値の低い反復作業を処理させ、問題の理解、アーキテクチャの設計、結果の検証といった、より創造的な部分に集中できるようにするものです。
Vibe Coding vs 従来のプログラミング
Vibe Codingと従来のプログラミング手法との違いを理解することは、より上手に活用するのに役立ちます。
| 観点 | 従来のプログラミング | Vibe Coding |
|---|---|---|
| 入力方法 | 行ごとに手書きでコードを書く | 自然言語で要件を記述する |
| 重視する点 | 構文、API、実装の詳細 | 要件、アーキテクチャ、検証 |
| デバッグ方法 | 手動のブレークポイント/ログによるデバッグ | エラーメッセージをAIに渡して修正させる |
| 速度 | タイピング速度と熟練度に依存する | 要件記述の明確さに依存する |
| 適用シーン | すべてのプログラミングタスク | プロトタイプ開発、CRUD、スクリプトツール、UIページ |
| 中核となるスキル | プログラミング言語の習熟度 | 要件の分解＋結果の検証能力 |
なぜ今Vibe Codingが可能なのか
Vibe Codingが2025年に可能となったのは、いくつかの重要な条件が成熟したためです。
大規模モデルのコーディング能力の飛躍
GPT-5.5、Claude 5、Geminiなどのモデルは、コード生成における正確性が大幅に向上しました。
これらのモデルは構文的に正しいコードを書けるだけでなく、プロジェクトの文脈を理解し、ベストプラクティスに従い、境界条件を処理することもできます。
さらに重要なのは、超長いコンテキストを処理でき、プロジェクト全体を一度に読み取って、コードベースの構造を理解できることです。
AIプログラミングツールの爆発的普及
Cursor、Claude Code、GitHub Copilot、Windsurfなどのツールは、AI機能を開発フローに深く統合しました。
これらのツールはコード補完だけでなく、ファイルの直接修正、ターミナルコマンドの実行、コードベースの検索もでき、まるで本物の開発者のように動作します。
Agentモードの登場
Agentモードのツールは、ファイルの読み取り、コードの作成、テストの実行、テスト結果に基づくエラー修正といった複数ステップのタスクを自律的に実行できます。
あなたは最初の指示を与えるだけで、Agentはタスクが完了するまで自分でループして反復します。
主流ツールの紹介
以下は、現在最も主流のVibe Codingツールで、それぞれ特徴があります。
| ツール | タイプ | 主な特徴 | 適したシーン |
|---|---|---|---|
| Qoder | Agent IDE | コードベースの深い理解、Quest自動タスク、マルチAgent、Repo Wiki、CLI/IDEデュアルモード | 中〜大規模プロジェクト、長期プロジェクトの保守 |
| Trae | AIネイティブIDE | 対話駆動開発、コードの自動生成と修正 | Vibe Coding、新規プロジェクトの迅速な立ち上げ |
| Cursor | AIエディタ | プロジェクトレベルの理解、複数ファイルの修正、Agentモード | フルスタック開発、大規模プロジェクト |
| Claude Code | CLI Agent | ターミナルでの複雑なタスクの実行、プロジェクトの自動修正 | バックエンド、自動化開発 |
| GitHub Copilot | AIプログラミングアシスタント | スマート補完、チャット、Agent | 日常の開発サポート |
| Windsurf | AIエディタ | Cascadeワークフロー、複数ファイルの自動修正 | 迅速な開発、小〜中規模プロジェクト |
| OpenAI Codex | AIプログラミングAgent | タスクを理解し、完全な開発フローを実行 | 自動化開発 |
| Bolt.new | オンラインAI開発プラットフォーム | 一言で完全なアプリを生成 | MVP、プロトタイプ検証 |
| v0 by Vercel | UI生成ツール | Reactページを自動生成 | ページデザイン、コンポーネント開発 |
| Replit AI | オンラインIDE | クラウド開発＋AIコラボレーション | 教育、迅速なテスト |
| Lovable | AIアプリジェネレーター | 記述から直接SaaSを生成 | 起業、プロダクト検証 |
| Firebase Studio | AIアプリケーションプラットフォーム | AI＋バックエンドサービス統合 | App / Web開発 |
初めてVibe Codingに触れる場合は、まず中国国内のツールをQoder 或 Trae使い始めるとよいでしょう。操作はVS Codeに似ており、学習曲線が最も緩やかで、慣れ親しんだエディタ環境を変えることもありません。
クイックスタート
以下ではClaude Code（ターミナルCLI）を例に、Vibe Codingの典型的なワークフローを示します。
Claude Code完全チュートリアル参考：https://www.example.com/claude-code/claude-code-tutorial.html
最初のプロジェクト：Hello, Vibe World!
目標：5分で、純粋な自然言語で、Claude Codeに個人名刺ウェブページを作成してもらいます。
ステップ1：プロジェクトフォルダを作成する
mkdir my-card && cd my-card claude
ステップ2：Claudeに欲しいものを説明する
Claude Codeの対話インターフェースで、次のように入力します：
帮我创建一个个人名片网页，要求： - 显示我的名字（张三）和职业（前端开发者） - 有一个简短的个人简介区域 - 列出3个技能标签（React、Python、设计） - 设计风格：简洁现代，深色背景，有轻微的渐变效果 - 单个 HTML 文件，不需要外部依赖
ステップ3：Claudeの作業を観察する
Claude Codeが自動的に次の処理を行うのを確認できます：
分析你的需求 创建 index.html 文件 写入完整的 HTML、CSS 和少量 JavaScript
ステップ4：結果を確認する
open index.html # macOS # 或 xdg-open index.html # Linux
ステップ5：反復して修正する
満足できない場合は、会話を続けます：
把背景色改成深蓝色渐变，字体换成更现代的 sans-serif， 技能标签加上悬停动画效果
Claude Codeがファイルを直接修正するので、あなたがコードに触れる必要はありません。
Vibe Codingの核となるワークフロー
Vibe Codingの核となるワークフローは、記述、レビュー、反復、納品の4つのステップに要約できます。
完全なワークフロー図
描述需求
↓
AI 生成代码
↓
你审查 Diff
↓
┌─ 不满意 → 描述修改意见 → AI 重新生成
│
└─ 满意 → 运行测试
↓
┌─ 测试失败 → 把报错贴给 AI → 修复
│
└─ 测试通过 → 提交代码
ステップ1：要件を記述する
自然言語でClaude Codeに欲しいものを伝えます。
コードを書く必要はなく、技術的な詳細を言う必要もありません。「何をするか」を明確に伝えるだけで十分です。
簡単な要件記述の例：
帮我创建一个 Python Flask 项目，有一个 /api/tasks 接口， 支持 GET 获取任务列表和 POST 创建新任务， 任务数据用 JSON 文件存储。
Claude Code はそれを受け取ると、ファイル構造を計画し、コードを生成し、依存関係をインストールし、テストを実行します。
ステップ2：Diffをレビューする
Claude Code がコードを生成すると、すべての変更（Diff）がレビュー用に表示されます。
これは Vibe Coding で最も重要なポイントです。AI が何を変更したのかを理解できなければなりません。
レビュー時に重点的に確認する点：
| チェック項目 | 具体的に見る内容 |
|---|---|
| ロジックの正確性 | 条件分岐が妥当か、エッジケースが処理されているか |
| セキュリティ | SQL インジェクションや XSS などのセキュリティ脆弱性がないか |
| データフロー | データの入力、処理、出力が期待どおりか |
| 命名規則 | 変数名や関数名が明確で分かりやすいか |
| 冗長なコード | 不要な重複や未使用のインポートがないか |
レビューは文句を言うためではなく、コードの各行が何をしているのかを理解するために行います。もしコードの一部が理解できなければ、Claude Code に「このコードはどういう意味ですか？なぜこのように書いたのですか？」と直接質問しましょう。
ステップ3：反復して修正する
レビューで問題が見つかったら、自然言語で望む修正を説明します。
よくある反復的な指示の例：
把 JSON 文件存储改成 SQLite，用 SQLAlchemy 做 ORM。
给 POST 接口加个验证：title 必填，不能为空字符串。
报错了，看一下：
Traceback (most recent call last):
File "app.py", line 42, in create_task
db.session.add(task)
AttributeError: 'NoneType' object has no attribute 'session'
反復のたびに Claude Code はコードを再生成して Diff を表示するので、満足するまで再度レビューします。
ステップ4：納品する
すべての機能が期待どおりでテストに合格したら、コードをコミットします。
Claude Code が commit message を作成してコミットしてくれます：
$ git log --oneline a1b2c3d feat: add task CRUD API with SQLite storage
実践デモ：Claude CodeでTodoアプリをゼロから構築する
以下では、完全な実践ケースを通じて Vibe Coding の全プロセスをデモします。
Claude Code を使って、フロントエンドのページとバックエンド API を含む Todo アプリをゼロから構築します。
プロジェクトの目標
| 機能 | 説明 |
|---|---|
| タスク追加 | タスクのタイトルを入力してリストに追加 |
| タスク完了 | チェックをクリックしてタスクを完了とマーク |
| タスク削除 | 不要なタスクを削除 |
| フィルタリング | すべて/進行中/完了でフィルタリング |
| 永続化 | データは SQLite に保存され、リフレッシュしても失われません |
ステップ1：プロジェクトの初期化
ターミナルでプロジェクトディレクトリを作成し、Claude Code を起動します：
$ mkdir vibe-todo && cd vibe-todo $ claude
次に Claude Code に要件を説明します：
帮我创建一个 Todo 应用，要求： 1. 后端用 Python Flask + SQLAlchemy + SQLite 2. 前端用纯 HTML/CSS/JS，风格简约现代 3. 支持添加、完成、删除、筛选任务 4. 所有 API 返回 JSON，前端用 fetch 调用 5. 代码注释用中文
ステップ2：Claude Codeが何をしたか
Claude Code は要件を受け取ると、以下の手順を自動的に実行しました：
まずプロジェクト構造を作成しました：
vibe-todo/
├── app.py # Flask 主应用
├── models.py # 数据库模型
├── requirements.txt # 依赖清单
├── static/
│ ├── style.css # 样式文件
│ └── script.js # 前端逻辑
└── templates/
└── index.html # 页面模板
次にバックエンドコードを生成しました。以下は app.py の主要な内容です：
実例
# Flask メインアプリケーション。API ルートとページエントリを定義
from flask import Flask, render_template, request, jsonify
from models import db, Task
app = Flask(__name__)
# SQLite データベースのパスを設定
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
# データベース拡張を初期化
db.init_app(app)
# アプリ起動時にテーブル構造を自動作成
with app.app_context():
db.create_all()
@app.route('/')
def index():
"""メインページを返す"""
return render_template('index.html')
@app.route('/api/tasks', methods=['GET'])
def get_tasks():
"""すべてのタスクリストを取得し、ステータスによるフィルタリングをサポート"""
# クエリパラメータからフィルタ条件を取得、デフォルトは 'all'
status = request.args.get('status', 'all')
# ステータスに基づいてタスクをフィルタリング
if status == 'completed':
tasks = Task.query.filter_by(completed=True).all()
elif status == 'active':
tasks = Task.query.filter_by(completed=False).all()
else:
tasks = Task.query.all()
# タスクオブジェクトを辞書リストに変換し、JSON シリアライズを容易にする
return jsonify([t.to_dict() for t in tasks])
@app.route('/api/tasks', methods=['POST'])
def create_task():
"""新しいタスクを作成"""
data = request.get_json()
# 必須フィールド title を検証
title = data.get('title', '').strip()
if not title:
return jsonify({'error': 'タスクタイトルは空にできません'}), 400
# タスクオブジェクトを作成し、データベースに保存
task = Task(title=title)
db.session.add(task)
db.session.commit()
return jsonify(task.to_dict()), 201
@app.route('/api/tasks/<int:task_id>', methods=['PUT'])
def update_task(task_id):
"""タスクステータスの更新（完了/未完了）"""
task = Task.query.get_or_404(task_id)
data = request.get_json()
# リクエストに completed フィールドが含まれている場合はステータスを更新
if 'completed' in data:
task.completed = data['completed']
db.session.commit()
return jsonify(task.to_dict())
@app.route('/api/tasks/<int:task_id>', methods=['DELETE'])
def delete_task(task_id):
"""指定されたタスクを削除"""
task = Task.query.get_or_404(task_id)
db.session.delete(task)
db.session.commit()
return jsonify({'message': '削除成功'}), 200
if __name__ == '__main__':
app.run(debug=True)
さらにデータベースモデル models.py：
実例
# データベースモデル定義、SQLAlchemy ORM を使用
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
# データベースインスタンスを作成、後で app.py で初期化
db = SQLAlchemy()
class Task(db.Model):
"""タスクモデル。データベース内の tasks テーブルに対応"""
__tablename__ = 'tasks'
# 主キー、自動増分の整数
id = db.Column(db.Integer, primary_key=True)
# タスクタイトル、必須、空にできない
title = db.Column(db.String(200), nullable=False)
# 完了ステータス、デフォルトは False
completed = db.Column(db.Boolean, default=False)
# 作成時間、自動記録
created_at = db.Column(db.DateTime, default=datetime.utcnow)
def to_dict(self):
"""タスクオブジェクトを辞書に変換し、JSON シリアライズを容易にする"""
return {
'id': self.id,
'title': self.title,
'completed': self.completed,
'created_at': self.created_at.isoformat()
}
ステップ3：コードのレビュー
Claude Code が Diff を表示したら、行ごとにレビューします。
いくつかの問題を見つけて修正提案をすることもあるでしょう。
例えば、API ルートに統一されたプレフィックスがないことに気づき、修正を提案します：
把所有 API 路由加上 /api/v1 前缀，方便以后版本管理。
Claude Code がすべてのルートを自動修正し、再度レビューして承認します。
ステップ4：テストの実行
レビューが承認されたら、Claude Code にアプリを起動してテストさせます：
$ python app.py * Running on http://127.0.0.1:5000
ブラウザで http://127.0.0.1:5000 にアクセスすると、完全な Todo アプリのインターフェースが表示されます。
タスク追加機能のテスト：
$ curl -X POST http://127.0.0.1:5000/api/v1/tasks \
-H "Content-Type: application/json" \
-d '{"title": "学习 Vibe Coding"}'
戻り結果：
{
"completed": false,
"created_at": "2026-06-24T10:30:00",
"id": 1,
"title": "学习 Vibe Coding"
}
ステップ5：コードのコミット
すべての機能の検証が完了したら、コードをコミットします：
$ git add . $ git commit -m "feat: 完成 Todo 应用基础功能"
この実践プロセス全体を通じて、あなたはコードを1行も手動で書きませんでした。あなたが行ったのは、要件の説明、Diff のレビュー、修正の説明、テストの実行、コードのコミットです。これが Vibe Coding の核となる体験です。
良いプロンプトを書くコツ
Vibe Coding の効果は、要件をどのように説明するかに大きく依存します。
良いプロンプトは AI に期待に近いコードを一度で生成させ、反復回数を減らします。
4要素モデル
高品質なプロンプトには4つの要素を含めるべきです：
| 要素 | 説明 | 例 |
|---|---|---|
| 何をするか | 実装する機能を明確に説明する | 「ユーザー登録インターフェースを作成する」 |
| 何を使うか | 技術スタックとツールを指定する | 「Flask + SQLAlchemy + SQLite を使う」 |
| どう制約するか | 制約条件と境界を示す | 「メールアドレスは必須で、形式検証が必要」 |
| 期待する形式 | 出力の好みを説明する | 「コードのコメントは日本語で、各関数に docstring を追加する」 |
良いプロンプト vs 悪いプロンプト
| 悪いプロンプト | 良いプロンプト |
|---|---|
| ログイン機能を作って | Flask でログインインターフェースを実装して。メールアドレスとパスワードを受け取り、bcrypt でパスワードを暗号化し、JWT で token を返して。token の有効期限は24時間。ログイン失敗時は具体的なエラーメッセージを返して。 |
| このボタンは見た目が悪すぎる | この送信ボタンを角丸8px、背景色 #2563eb、白い文字に変更して。ホバー時は色を10%濃くして、0.2秒のトランジションアニメーションを追加して。 |
| エラーが出たので修正して | python app.py を実行するとエラーになる：AttributeError: 'NoneType' object has no attribute 'session'。データベース初期化の問題のように見えるので、調査して修正して。 |
プロンプトの核心的な原則：具体的であればあるほど、結果は良くなります。曖昧な要件は曖昧なコードしか生みません。
よくある誤解と注意点
誤解1：AIはすべてのプログラミング知識を代替できる
Vibe Coding はプログラミングのハードルを下げましたが、ハードルを無くしたわけではありません。
変数、関数、API、データベース、HTTP、非同期などの基本概念を理解する必要が依然としてあります。そうでなければ、AI が生成したコードが正しいか判断できず、要件を効果的に説明することもできません。
誤解2：すべての機能を一度に記述する
製品全体の PRD ドキュメントを AI にコピーして、一度で完璧なコードを生成することを期待してはいけません。
AI の注意力には上限があり、要件が多ければ多いほどエラーが発生しやすくなります。
より効果的な方法は、コア機能 → 検証 → 機能追加 → 検証 → 反復を続ける、です。
誤解3：AIが書いたコードを読まない
AI が生成したコードをそのままマージする開発者もいますが、これは非常に危険です。
AI はセキュリティ脆弱性、パフォーマンスの問題、または完全に不合理なアーキテクチャを持ち込む可能性があります。
少なくとも主要なロジックをざっと確認して、明らかな問題がないことを確認する必要があります。
注意点
- 機密情報（APIキー、データベースパスワード）はチャットに直接書かないでください——まずコード上で環境変数のプレースホルダーを使い、その後手動で入力します
- 重要な変更のたびにGitへコミットし、問題発生時にロールバックしやすくします
- AIが生成したコードは、チームのコーディング規約に合わない可能性があるため、手動での調整が必要です
- 高い信頼性が求められるコード（決済、認証、データ処理）は、AIが生成した後、必ず人手によるレビューを行ってください
Vibe Codingに適したシーン
Vibe Coding は万能ではありません。どのような場面に適しているかを把握することで、労力をより適切に配分できます。
| 場面 | 適合度 | 説明 |
|---|---|---|
| プロトタイプ/MVP開発 | 極めて高い | アイデアを素早く検証し、数時間で使えるデモを作り出せます |
| CRUD インターフェース | 極めて高い | 反復パターンが明確で、AIの完成度が高い |
| フロントエンドページ/コンポーネント | とても高い | HTML/CSS/React コンポーネントは、AIが非常に得意とします |
| スクリプト/自動化ツール | とても高い | 一回限りのスクリプト、データ処理、ファイル操作 |
| 単体テストの作成 | とても高い | 関数シグネチャに基づいてテストケースを生成します |
| 複雑なアルゴリズムの実装 | 中程度 | 明確なアルゴリズムの説明が必要で、人手による正しさの検証も必要です |
| 低レイヤーシステムの最適化 | 比較的低い | メモリレイアウト、キャッシュライン、ハードウェア特性が関わるため、AIは微妙なエラーを起こしやすい |
| 高いセキュリティが求められるコード | 慎重 | 暗号化、認証、決済系のコードは、AIが生成した後、必ず専門家によるレビューが必要です |