本記事では、VS Codeでバイブコーディングを始める手順から覚えておきたい機能、業務で使うときの注意点までを、開発の内製化を検討している方に向けて解説します。自社でどこまで取り組めるかを判断する参考にしてください。
VS Codeでバイブコーディングは可能
VS Codeでバイブコーディングは可能です。VS CodeはMicrosoftが開発する無料のコードエディターで、Windows、macOS、Linuxのいずれでも利用可能です。
現在のVS Codeでは、GitHub CopilotのAI機能を使って自然言語で指示を出し、次のような作業を進められます。
- コードを生成する
- 既存のコードを修正する
- ファイルを作成する
- ターミナルを操作する
- エラーを確認する
以前は拡張機能でAIを足すという使い方が中心でしたが、現在はAIを使った開発がVS Code自体に深く組み込まれています。チャットからそのままファイルを作らせたり、コマンドを実行させたりできるため、別のツールへ乗り換える必要はありません。
VS Codeでバイブコーディングを始める方法
VS Codeでのバイブコーディングは、インストールからアプリが動くまで7つの手順で進みます。追加の設定が比較的少ないGitHub Copilotを使う方法を前提に紹介します。
- VS Codeをインストールする
- GitHubアカウントでAI機能を有効にする
- 作りたいアプリ用のフォルダを開く
- チャットから作りたいものをAIへ伝える
- エージェントモードにファイル作成やコード生成を任せる
- 生成されたアプリを実行する
- 動かない部分をチャットへ伝えて修正する
VS Codeをインストールする
まず、VS Codeの公式サイトからインストーラーをダウンロードしましょう。Windows、macOS、Linuxに対応しているため、普段使用しているパソコンでそのまま始められます。
ダウンロードしたファイルを実行すると、あとは画面の案内に沿って進めるだけでインストールが終わります。細かい設定は後からいくらでも変更できるため、最初は既定のまま入れてしまって構いません。
GitHubアカウントでAI機能を有効にする
次にVS Code上でGitHubへサインインして、AI機能を有効にしましょう。有料プランに加入していなくても、対象となるユーザーはCopilot無料から始められます。
ここでつまずきやすいのが、VS CodeとAIサービスが別物だという点です。VS CodeはMicrosoftが提供するエディターで、AI機能そのものはGitHub Copilotが担うため、利用にはGitHubアカウントが必要になります。アカウントを持っていない場合は、先にGitHubのサイトで無料登録を済ませておきましょう。
作りたいアプリ用のフォルダを開く
パソコンの中に作業用のフォルダを新しく作り、VS Codeから開きましょう。このフォルダが、これから作るアプリの置き場所になります。
ここで、フォルダ、ファイル、プロジェクトの関係を整理しておくと後が楽です。ファイルは1つ1つの書類、フォルダはそれをまとめる入れ物、そして開発ではアプリ1つ分のフォルダをプロジェクトと呼びます。先にフォルダを決めて開いておけば、AIがどこにファイルを作ったのか分からなくなる事態を防げます。
チャットから作りたいものをAIへ伝える
VS Codeのチャットを開き、作りたいものを自然言語で入力しましょう。たとえば、次のように書きます。
『ブラウザで使えるToDoアプリを作成してください。タスクの追加・完了・削除ができるようにしてください。HTML、CSS、JavaScriptを使い、初心者でも構成を理解しやすくしてください』
『アプリを作って』とだけ伝えるより、何を作るか、必要な機能、使用する環境、デザイン、制約まで具体的に書いたほうが、想定に近いものが返ってきます。言葉が足りない部分はAIが勝手に判断してしまうため、最初の指示に時間をかけるほど後の修正が減らせることを覚えておきましょう。
エージェントモードにファイル作成やコード生成を任せる
指示を出すときは、エージェントモードを選びましょう。エージェントモードでは、コードを回答として表示するだけでなく、プロジェクトの中身を確認して必要なファイルを編集したり、ターミナルでコマンドを実行したりできます。
AIに質問してコードをコピーし、VS Codeへ貼り付けるという従来のやり方から、VS Code上でAIに直接作業してもらう形へ変わっている点が、いまのバイブコーディングの特徴です。貼り付ける手間がなくなるぶん、動かして確かめる作業に時間を使えます。
生成されたアプリを実行する
AIがコードを書き終えたら、実際にアプリを動かして確認しましょう。Webページであれば、生成されたHTMLファイルをブラウザで開けば表示されます。
起動にコマンドが必要な場合は、VS Code内のターミナルを使います。ターミナルとは、文字でパソコンへ命令を出す画面のことです。どう起動すればよいか分からないときは、チャットで起動方法を聞けばAIが方法を教えてくれます。そのため、コマンドの意味を完全に理解していなくても、指示どおりに実行すればアプリは動きます。
動かない部分をチャットへ伝えて修正する
バイブコーディングで生成したコードが一度で正常に動くケースは少ないです。そのため問題が見つかったら、チャットへ具体的に伝えましょう。
よくある症状は以下のようなものです。
- ボタンが反応しない
- 表示が崩れる
- エラーが表示される
- データを保存できない
エラーが出ている場合は、画面に表示された文面をそのまま貼り付けると、AIが原因を特定しやすくなります。指示、生成、実行、確認、修正を繰り返しながら完成度を上げていくのが、VS Codeでのバイブコーディングの基本的な進め方です。
VS Codeでバイブコーディングするときに覚えておきたい機能
VS Codeには、バイブコーディングを進めやすくする機能がそろっています。最初からすべて覚える必要はないため、まず使いたい4つに絞って紹介します。
- チャットでコードについて質問できる
- エージェントモードなら複数の作業をまとめて任せられる
- AIが変更したコードを差分で確認できる
- Gitを使えば変更前の状態へ戻しやすい
チャットでコードについて質問できる
VS Codeのチャットはコードを書かせるだけでなく、コードを理解するためにも使えます。チャットでコードについて質問すれば、以下のような回答が得られます。
- このファイルは何をしている？
- このエラーはなぜ起きている？
- この処理を初心者向けに説明して
自分で書いていないコードでも、その場で説明してもらえるため、意味が分からないまま先へ進む状態を減らせます。
エージェントモードなら複数の作業をまとめて任せられる
VS Codeのエージェントモードは、1回の依頼で複数の作業を横断できる点が優れています。プロジェクト内のファイルを調べ、複数のファイルを変更し、必要に応じてコマンドの実行までこなせる範囲の広さが特徴です。
たとえば『ログイン画面を追加して』と依頼すると、どのファイルを新しく作り、どこを書き換えるかをAI側で判断しながら進めてくれます。変更が1つのファイルで収まらない機能追加でも、こちらでファイルを指定する必要がありません。バイブコーディングではエージェントモードを使う機会が多いので、使い方は覚えておきましょう。
AIが変更したコードを差分で確認できる
VS Codeでは変更された箇所が色分けして表示され、そのまま保持するか元に戻すかを選べます。AIがコードを変更したら、差分で内容を確認しましょう。
コードの中身をすべて理解できなくても構いません。どのファイルが変わったのか、何が追加されたのかだけは毎回確認する習慣をつけておくと、後から何が起きたのか追えなくなる事態を防げます。意図しないファイルが書き換わっていた場合も、その場で気づけるので便利です。
Gitを使えば変更前の状態へ戻しやすい
VS CodeにはGitによるバージョン管理の機能が組み込まれています。Gitとは、問題が起きたときに以前の状態へ戻せる仕組みのことです。変更前の状態に戻したい場合には、Gitを活用しましょう。
バイブコーディングではAIが短時間で大量のコードを書き換えるため、うまく動いた時点で記録を残しておけば、その後の変更で不具合が起きてもやり直しが可能になります。納得がいく動作のタイミングでGitへ記録を残す癖をつけておけば、手直しを減らしながらバイブコーディングができるでしょう。
VS Codeで使用できるAIモデル
VS Codeは特定のAIだけに縛られた環境ではありません。Copilot以外の選択肢として、代表的な2つを紹介します。
- CodexをVS Codeで使う
- 他社のモデルを自分のAPIキーで使う
CodexをVS Codeで使う
Codexを使いたい場合は、VS Code向けの拡張機能が用意されています。ワークスペース内のコードを読み取り、編集や実行をしながら開発を進められる仕組みです。
ただし、利用できる範囲はChatGPTの契約プランなどによって変わります。料金や利用条件は改定されることがあるため、導入前に公式サイトで最新の情報を確認してください。
他社のモデルを自分のAPIキーで使う
使いたいモデルが決まっているなら、自分のAPIキーを登録して使う方法もあります。GitHub CopilotにはBring Your Own Keyという仕組みがあり、OpenAIやAnthropic、Googleなどのモデルを自分で契約したキーで呼び出せます。
なお、APIキーを使う場合はモデルの提供元へ利用料が発生する点に注意が必要です。
VS Codeでバイブコーディングするときの注意点
VS CodeとCopilotを使っても、AIが生成するコードの品質まで保証されるわけではありません。ここで挙げる3つは、VS Code固有ではなくバイブコーディング全般に共通する注意点です。
- AIが生成したコードをそのまま信用しない
- APIキーやパスワードをチャットへ入力しない
- コードが分からないまま開発を進めすぎない
AIが生成したコードをそのまま信用しない
AIが生成したコードは、動いたとしても内容を確認しましょう。バグ、不要な処理、古い書き方、想定と違う動作などが含まれている可能性があるためです。エラーなく動いたから正しいとは限りません。
確認するときは、差分表示で変更箇所を見るだけでなく、実際に機能を操作して意図した結果になるかを試してください。とくに入力チェックや権限まわりは、AIが省略しがちな部分です。テストを書かせて実行するところまでチャットへ依頼すると、確認の手間を減らせます。
APIキーやパスワードをチャットへ入力しない
APIキーやパスワードなどの機密情報は、チャットへ直接入力しないようにしましょう。プロンプトに書いた内容が外部へ渡る仕組みである以上、機密情報を含めるのは避けるべきです。
こうした情報は.envのようなファイルに書き、コードからは変数として読み込む形にしておくと安全です。AIへ設定方法を聞く場合も、キーの値そのものではなく手順だけを尋ねましょう。
入力したデータの扱いについては、GitHub Copilotに学習させない方法とは？オプトアウト設定の手順と注意点を解説もあわせてご覧ください。
コードが分からないまま開発を進めすぎない
バイブコーディングの中で「直して」「エラーを消して」とAIへ修正を繰り返していると、どの機能をどのように変更したのか分からなくなることがあります。特に複数のファイルをAIが変更した場合、別の機能へ影響していても気づけない可能性があります。
修正後は、実際に動かして問題が解決したか確認しましょう。また、大きな変更をした場合は「今回どの機能を変更したのか」「ほかの機能への影響はあるか」とAIへ確認しておくと安心です。コードそのものを理解する必要はありませんが、何を変更したのかは把握しながら進めることが大切です。
まとめ
VS Codeは無料で利用でき、Copilot無料と組み合わせれば、費用をかけずにバイブコーディングを試せます。VS Codeをインストールし、AI機能を有効にして、プロジェクトのフォルダを開き、チャットで指示を出す。この流れをひととおり体験すれば、最初の壁は越えられます。
進め方に慣れてきたら、エージェントモードで複数ファイルの作業をまとめて任せたり、差分表示で変更内容を確認したり、Gitで戻せる状態を作ったりと、使える機能を少しずつ増やしていきましょう。まずはToDoアプリのような小さなものから作ってみるのがおすすめです。
一方で、コードの品質やセキュリティ、仕組みが分からなくなる問題は、ツールを変えても残ります。顧客向けのサービスや業務で使うシステムを作る段階になったら、専門家と組む選択肢も検討してみてください。弊社では、要件の整理から開発、運用までを一貫してご支援しています。AIを活用したシステム開発に興味がある方は、ぜひ一度お問い合わせください。
\あらゆる業界のDX化をおまかせください！/
お問い合わせ
