VSCodeでのバイブコーディングとは

VSCodeでのバイブコーディングとは、Visual Studio Codeを使いながら、AIに自然言語で指示を出し、コードの生成・修正・テスト・改善を進めていく開発スタイルです。

従来のプログラミングでは、開発者がコードを1行ずつ書きながら機能を実装するのが一般的でした。

一方、バイブコーディングでは「どのような機能を作りたいのか」「どのように修正したいのか」をAIに伝え、AIが生成したコードを確認しながら開発を進めます。

たとえば、次のような指示ができます。

Next.jsで問い合わせフォームを作成してください。
名前、メールアドレス、問い合わせ内容を入力できるようにしてください。
必須項目にはバリデーションを設定し、送信成功時には完了メッセージを表示してください。
実装後に型エラーとLintエラーがないか確認してください。

このように、実装内容を自然言語で伝えることで、AIがコード作成を支援してくれます。

VS CodeではAIチャットやコード補完だけでなく、複数ファイルの編集やターミナル操作、テスト実行まで行えるAgent機能も用意されているため、バイブコーディングとの相性がよい開発環境といえます。

バイブコーディングとAgentic Codingの違い

バイブコーディングは広い意味の開発スタイル

バイブコーディングは、AIに自然言語で指示しながら開発を進める方法全般を指す言葉です。

必ずしもAIにすべての作業を自動実行させる必要はありません。

たとえば、次のような使い方もバイブコーディングに含まれます。

• AIにコードの続きを提案してもらう
• エラーの原因を質問する
• 特定の関数だけ書き換えてもらう
• コードレビューを依頼する
• 複数ファイルの修正を任せる

Agentic CodingはAIが複数の作業を進める方法

一方、VS Codeでは「Agentic Coding」という考え方も使われています。

Agentic Codingでは、AIエージェントに高レベルな目標を伝え、必要なファイルの確認、コード変更、コマンド実行、テストなどを複数ステップで進めてもらいます。

そのため、

「バイブコーディングはAIを活用した開発スタイル全体」

「Agentic CodingはAIエージェントが複数の作業を進める方法」

と考えると分かりやすいでしょう。

VSCodeがバイブコーディングに向いている理由

AIとコードを同じ画面で扱える

VS Codeでは、コードエディタとAIチャットを同じ開発環境で利用できます。

ブラウザ上の生成AIを利用する場合は、

AIでコードを生成する
↓
コードをコピーする
↓
VS Codeに貼り付ける
↓
エラーを確認する
↓
エラー内容をAIへ再び貼り付ける

といった往復作業が発生しやすくなります。

VS CodeのAI機能では、ワークスペース内のコードを参照しながらAIに質問したり、直接ファイルを編集してもらったりできます。

そのため、開発とAI利用を一つの環境にまとめやすいのが特徴です。

プロジェクトの情報をAIへ渡しやすい

バイブコーディングでは、AIに適切なコンテキストを与えることが重要です。

たとえば、

このバグを直してください。

とだけ伝えても、AIが対象コードや設計を理解していなければ、正確な修正は難しくなります。

VS Codeでは、ファイル、フォルダ、コードシンボル、ターミナル出力、Source Controlの変更内容などをチャットのコンテキストとして利用できます。

必要な情報をAIへ渡しやすいため、単純なコード生成よりも一歩進んだ使い方ができます。

VSCodeで使える主なAI機能

Inline Suggestions

コード入力中に続きを提案してくれる

Inline Suggestionsは、コードを書いている途中にAIが続きを予測して提案する機能です。

たとえば、

function calculateTotal(

と入力すると、その後に続く引数や処理内容をAIが提案することがあります。

小さな関数や繰り返しコードを書くときに便利です。

大規模な処理を任せるというより、日常的なコーディングを補助してもらう機能と考えるとよいでしょう。

Chat

コードについてAIへ質問できる

Chatでは、AIと会話しながらコードについて質問できます。

たとえば、

この関数が何をしているか説明してください。

このエラーの原因を教えてください。

この処理をもっと読みやすくしてください。

このコードにセキュリティ上の問題がないか確認してください。

といった質問が可能です。

既存コードの理解やデバッグ、リファクタリングなどに向いています。

Inline Chat

特定のコードだけを修正したいときに便利

Inline Chatは、エディタ上のコードを対象にAIへ直接修正を依頼する方法です。

たとえば、対象コードを選択して、

async/awaitを使う形に書き換えてください。

TypeScriptに変換してください。

この処理を関数に分割してください。

と指示できます。

ファイル全体を変更するほどではない、小さな修正に向いています。

Agent

複数ステップの作業をAIに任せられる

本格的にバイブコーディングを行う場合、重要になるのがAgentです。

Agentでは、AIが単に回答するだけでなく、目的を達成するために複数の作業を進められます。

基本的には、

目的を理解する
↓
関連ファイルを探す
↓
コードを変更する
↓
必要に応じてコマンドを実行する
↓
テスト結果を確認する
↓
問題があれば再修正する

という流れで作業できます。

たとえば、

ログイン画面にパスワードリセット機能を追加してください。
既存の認証方式に合わせて実装してください。
必要な画面とAPIを追加し、最後にテストしてください。

といった複数ファイルにまたがる作業を任せやすくなります。

Plan

実装前にAIへ計画を立ててもらえる

複雑な機能を作る場合は、いきなりAgentへ実装させるよりも、まずPlanを利用して実装方針を整理する方法があります。

たとえば、

要件を伝える
↓
Planで実装方針を作成する
↓
人間が内容を確認する
↓
Agentで実装する
↓
テストする

という流れです。

大規模な修正や既存システムへの機能追加では、最初に設計や影響範囲を確認しておくことで、意図しない変更を減らしやすくなります。

VSCodeでバイブコーディングを始める方法

プロジェクトをVSCodeで開く

まず、開発したいプロジェクトをVS Codeで開きます。

たとえば、

my-project/
├─ src/
├─ public/
├─ package.json
└─ README.md

のようなプロジェクトです。

新規プロジェクトでも既存プロジェクトでも利用できます。

AI機能を利用できる状態にする

VS CodeではGitHub Copilotを利用する方法が一般的です。

利用できる機能は、契約しているプランや認証方法によって異なります。

また、一部のChatやAgentワークフローでは、対応している外部モデルや独自APIキーを利用する構成もあります。

ただし、認証方法によって利用できる機能が異なるため、設定内容を確認しておく必要があります。

Chatを開く

WindowsやLinuxでは、Chat viewを開くショートカットとして、

Ctrl + Alt + I

を利用できます。

環境やキーバインド設定によって異なる場合もあるため、必要に応じてVS CodeのKeyboard Shortcutsから確認するとよいでしょう。

最初は小さなタスクから依頼する

バイブコーディングでは、最初から巨大な機能を丸ごと任せるより、小さく分割した方が成功しやすくなります。

たとえば、

ECサイトを全部作ってください。

と依頼するより、

商品一覧ページを作成してください。

次に商品詳細ページを作成してください。

カート機能を追加してください。

と順番に依頼する方が、変更内容を確認しやすくなります。

AIへコンテキストを渡す方法

#を使って必要な情報を指定する

VS CodeのChatでは、#を利用してAIに渡すコンテキストを明示できます。

たとえば、

• ファイル
• フォルダ
• コードシンボル
• ターミナル出力
• Source Controlの変更
• ツール

などを指定できます。

また、コードベース全体を考慮してほしい場合は、対応するコードベースコンテキストを利用する方法もあります。

AIに正しい回答をしてもらうためには、単に長いプロンプトを書くよりも、必要な情報を正しく渡すことが重要です。

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

目的を明確にする

悪い例は、

フォームを作ってください。

です。

より分かりやすくするなら、

SaaSサービスの資料請求ページに設置する問い合わせフォームを作成してください。

とします。

どこで使う機能なのかを伝えると、AIが目的を理解しやすくなります。

技術スタックを書く

使用する技術も明示すると、生成結果が安定しやすくなります。

たとえば、

既存プロジェクトで使用しているNext.js、TypeScript、Tailwind CSSを使ってください。

と伝えます。

バージョンを固定する必要がない場合は、

package.jsonに記載されている既存バージョンを維持してください。

と伝える方法もあります。

必要な機能を書く

実装したい機能は具体的に書きます。

たとえば、

名前、メールアドレス、会社名、問い合わせ内容を入力できるようにしてください。
名前とメールアドレスは必須項目にしてください。

のようにします。

制約を書く

AIは、指定がなければ新しいライブラリや異なる設計を採用する可能性があります。

そのため、

新しいUIライブラリは追加しないでください。
既存コンポーネントを優先して再利用してください。
現在のディレクトリ構成を維持してください。

といった制約を伝えておくと安全です。

完了条件を書く

バイブコーディングでは、完了条件を明確にすることも重要です。

たとえば、

実装後に型チェック、Lint、既存テストを実行してください。
エラーが発生した場合は原因を確認して修正してください。

と伝えます。

これにより、単にコードを書くだけではなく、動作確認まで含めて進めてもらいやすくなります。

バイブコーディングで使いやすいプロンプト例

構造化して指示すると分かりやすい

実務では、次のように項目を分けて指示すると使いやすくなります。

目的:
問い合わせフォームを実装してください。

要件:
- 名前を入力できる
- メールアドレスを入力できる
- 問い合わせ内容を入力できる
- 必須項目にバリデーションを設定する

技術:
- 既存プロジェクトの技術スタックを維持する
- TypeScriptを使用する

制約:
- 新しいライブラリは追加しない
- 既存コンポーネントを優先して利用する
- 現在の設計方針を変更しない

作業手順:
1. 関連コードを確認する
2. 実装方針を整理する
3. 必要なファイルを変更する
4. テストする
5. 問題があれば修正する

完了条件:
- 型エラーがない
- Lintエラーがない
- 既存テストが成功する

毎回完全に同じ形式にする必要はありません。

しかし、目的・要件・制約・完了条件を意識すると、AIが作業内容を理解しやすくなります。

Custom Instructionsを活用する

毎回同じルールを書く手間を減らせる

バイブコーディングでは、

「TypeScriptを使う」

「anyは避ける」

「既存コードの設計に合わせる」

「テストを追加する」

といった同じ指示を何度も使うことがあります。

このような場合はCustom Instructionsを利用すると便利です。

copilot-instructions.mdを使う

プロジェクトルートの.githubフォルダ内に、

.github/copilot-instructions.md

を作成できます。

たとえば、

# Project Coding Rules

- TypeScriptを使用する
- anyの使用を避ける
- Reactの関数コンポーネントを使用する
- 既存コンポーネントを優先して再利用する
- 新規ライブラリ追加前に必要性を確認する
- API処理には適切なエラーハンドリングを入れる
- 新機能には可能な限りテストを追加する

と書いておけば、AIへプロジェクト全体のルールを伝えやすくなります。

instructions.mdを用途別に使う

ファイルや用途ごとにルールを分けられる

プロジェクト全体のルールだけでなく、特定のファイルや用途にだけ適用する指示も設定できます。

たとえば、

.github/instructions/
├─ react.instructions.md
├─ testing.instructions.md
└─ api.instructions.md

のように分けます。

React用のルールであれば、

---
applyTo: "**/*.tsx"
---

- 関数コンポーネントを使用する
- Propsには型を定義する
- 既存のUIコンポーネントを優先する

といった形です。

大規模なプロジェクトでは、すべてのルールを一つのファイルへ詰め込むより、用途別に分けた方が管理しやすくなります。

AGENTS.mdを活用する

AIエージェント向けのプロジェクトルールを書ける

VS CodeではAGENTS.mdを利用する方法もあります。

たとえば、

# AGENTS.md

## Architecture

Frontend:
Next.js

Backend:
Node.js

Database:
PostgreSQL

## Rules

- 既存アーキテクチャを維持する
- DBアクセスはrepository層に限定する
- UIから直接DBへアクセスしない
- APIレスポンス型を必ず定義する
- 変更後はテストを実行する

のように、AIエージェントが開発時に守るルールを記載できます。

複数のAIコーディングツールを利用するプロジェクトでは、共通ルールをまとめる方法としても利用できます。

なお、サブフォルダごとに複数のAGENTS.mdを配置するNested AGENTS.mdについては、機能の扱いが変わる可能性があるため、利用時には最新のVS Code公式情報を確認するのが安全です。

MCPを利用するとできることが広がる

AIから外部ツールを利用できる

MCPはModel Context Protocolの略です。

VS CodeのAIエージェントでは、組み込みツールだけでなく、MCP経由で外部サービスやデータソースを利用できる場合があります。

イメージとしては、

VS Code
↓
AI Agent
↓
MCP
├─ データベース
├─ API
├─ 開発ツール
└─ 外部サービス

という形です。

MCPを利用することで、AIがコードを書く以外の作業も行いやすくなります。

ただし、外部ツールへのアクセス権限が増えるほど安全管理も重要になるため、必要な権限だけを許可することが大切です。

VSCodeでのバイブコーディングの具体例

LP制作をAIと進める場合

たとえば、SaaSサービスのランディングページを制作するとします。

最初に、

既存プロジェクトの構成を確認し、SaaSサービスのLPを作成してください。
ファーストビュー、特徴、料金表、FAQ、CTA、問い合わせフォームを配置してください。
モバイル表示にも対応してください。

と依頼します。

表示を確認したあと、

ファーストビューのCTAをもっと目立つレイアウトにしてください。

と修正します。

次に、

料金表を3プラン構成に変更してください。

と依頼します。

さらに、

FAQをアコーディオン形式に変更してください。

と進めます。

最後に、

レスポンシブ表示、型エラー、Lintエラー、既存テストを確認してください。
問題があれば修正してください。

と依頼します。

このように、

作る
↓
確認する
↓
追加指示を出す
↓
AIが修正する
↓
再確認する

という短いサイクルを繰り返すのが、バイブコーディングの基本的な進め方です。

一度に大きな依頼をしすぎない

作業を小さく分割する

バイブコーディングでよくある失敗が、大規模なシステムを一度に作らせようとすることです。

たとえば、

InstagramのようなSNSを全部作ってください。

と依頼すると、変更範囲が非常に大きくなります。

代わりに、

1. プロジェクト初期設定
2. ログイン機能
3. ユーザープロフィール
4. 投稿機能
5. 投稿一覧
6. いいね機能
7. コメント機能
8. テスト

のように分割します。

変更単位を小さくすると、コードレビューやエラー修正もしやすくなります。

Gitを併用する

AI開発ではGitの重要性が高くなる

AIは短時間で大量のコードを変更できます。

そのため、バイブコーディングではGitによる変更管理が非常に重要です。

たとえば、

作業開始
↓
Gitで現在の状態を保存
↓
AIに作業を依頼
↓
diffを確認
↓
テスト
↓
問題がなければcommit
↓
次の作業へ進む

という流れにすると安全です。

AIが意図しない変更を加えた場合でも、Gitで差分を確認したり、必要に応じて変更を戻したりできます。

AIが生成したコードは必ず確認する

AIのコードが正しいとは限らない

バイブコーディングでは、AIが生成したコードをそのまま信頼しないことが重要です。

AIは、

• 存在しないAPIを利用する
• ライブラリの古い使い方を提案する
• 既存仕様を誤解する
• セキュリティ上の問題を含むコードを書く
• 不要なファイルを変更する

といったことがあります。

そのため、

生成
↓
差分確認
↓
実行
↓
テスト
↓
レビュー

という確認作業が必要です。

セキュリティに注意する

特に慎重に確認したい処理

次のような機能は、AI任せにせず慎重に確認する必要があります。

• ログインや認証
• 権限管理
• 決済
• 個人情報
• APIキー
• データベース操作
• ファイル削除
• 外部サービスへの送信処理

動作するコードであっても、安全なコードとは限りません。

本番環境で利用する場合は、人間によるコードレビューやセキュリティチェックを行うことが重要です。

Agentのターミナル操作にも注意する

設定によってはコマンドが自動実行される場合がある

VS CodeのAgentはターミナルを利用して、

npm test
npm run lint
npm run build

などを実行できます。

非常に便利ですが、権限設定によっては一部のコマンドが自動承認される場合があります。

そのため、初心者の場合はAgentの権限設定を確認し、ファイル削除やシステム変更などにつながるコマンドを無条件に許可しない方が安全です。

特に、

rm
del

などの破壊的な処理を含むコマンドには注意が必要です。

VSCodeでのバイブコーディングを上達させるコツ

AIに正しい仕事をさせる環境を作る

バイブコーディングでは、単にプロンプトを上手に書くだけでは十分ではありません。

重要なのは、AIが必要な情報へアクセスでき、プロジェクトのルールを理解できる状態を作ることです。

具体的には、

• 目的を明確にする
• 必要なコンテキストを渡す
• 作業を小さく分割する
• 完了条件を設定する
• Custom Instructionsを整備する
• AGENTS.mdを活用する
• diffを確認する
• テストを実行する
• Gitで変更を管理する
• AIが生成したコードを理解する

といった習慣が重要です。

コンテキスト設計を意識する

バイブコーディングでは「どのようなプロンプトを書くか」だけでなく、「AIにどの情報を与えるか」も重要です。

たとえば、

プロジェクトの設計
+
関連ファイル
+
コーディング規約
+
テスト方法
+
完了条件

をAIへ正しく伝えられれば、生成されるコードの精度も上がりやすくなります。

そのため、今後のAI開発ではプロンプト作成だけでなく、コンテキスト設計の重要性も高まっていくと考えられます。

VSCodeでのバイブコーディングで大切なのはAIへの丸投げではない

VSCodeでのバイブコーディングは、AIにすべてを任せる開発方法ではありません。

理想的なのは、

人間が目的を決める
↓
AIに実装を依頼する
↓
AIがコードを生成・修正する
↓
人間が差分や設計を確認する
↓
テストする
↓
必要なら再修正する

という役割分担です。

AIはコードを書く速度を大きく高められますが、仕様の正しさやセキュリティ、最終的な品質まで自動的に保証してくれるわけではありません。

人間が判断を担当し、AIを実装支援のパートナーとして使うことが重要です。

まとめ

VSCodeでのバイブコーディングとは、Visual Studio Code上でAIに自然言語で指示を出しながら、コード生成・修正・テスト・改善を進める開発スタイルです。

VS Codeでは、Inline Suggestions、Chat、Inline Chat、Agent、PlanなどのAI機能を用途に応じて利用できます。

さらに、Custom Instructions、AGENTS.md、MCPなどを活用することで、AIへプロジェクト固有のルールや外部ツールを与えることも可能です。

ただし、バイブコーディングで重要なのはAIにすべてを丸投げすることではありません。

目的や要件、制約、完了条件を人間が明確にし、AIが生成したコードをdiffやテストで確認しながら開発することが大切です。

特にVS CodeではAgentが複数ファイルの変更やターミナル操作まで行えるため、従来以上に便利になった一方、権限管理やコードレビューの重要性も高まっています。

「AIにコードを書かせる」だけでなく、「AIが正しく開発できる環境を整え、人間が最終判断を行う」という考え方を持つことで、VSCodeでのバイブコーディングをより安全かつ効率的に活用できます。

以上、VSCodeでのバイブコーディングについてでした。

最後までお読みいただき、ありがとうございました。