Microsoftの開発エディタ『Visual Studio Code（VSCode）』といえば、いまやプログラミング開発や学習には欠かせない存在です。そして今、VSCodeにはAIエージェントである「GitHub Copilot（Copilot）」が標準搭載され、AIをアシスタントにしたプログラミングや「バイブコーディング」と呼ばれる、AIへの指示だけでプログラミングを行う方法などもサポートされるようになりました。

この記事では、そんなVSCodeとCopilotの使い方を数回に分かって紹介します。

macOSでのインストール手順

まずは、macOSでVSCodeをインストールする方法を紹介しましょう。

VS Code公式サイトにアクセスし、「Download for macOS」をクリックします

ダウンロードフォルダーにあるアプリケーションアイコンをFinderで開きます。アイコンを「アプリケーション」フォルダーにコピーしましょう。

アプリケーションフォルダーまたはLaunchpadから起動できます。

Windowsでのインストール手順

WindowsユーザーはMicrosoft Storeから簡単にインストールできます。

スタートメニューから「Microsoft Store」を開きます。

検索窓に「Visual Studio Code」と入力、青いアイコンの「Visual Studio Code」を選択します。

「インストール」ボタンをクリックしましょう。

スタートメニュー → すべて → V → Visual Studio Codeで起動できます。「タスクバーにピン止めする」しておくと、次回からすばやく起動できます。

日本語化とカスタマイズしよう

VS Codeは標準で英語表示ですが、日本語化することができます。

左側のアクティビティバーから「Extensions（拡張機能）」をクリックします。

検索窓に「Japanese」と入力し、Microsoft製の「Japanese Language Pack」をインストールしましょう。

右下の確認画面で、「Change Language and Restart（言語の変更とリスタート）」をクリックします。これで、次回から日本語で起動します。

GitHubアカウントでログインしよう

Copilotを利用したり、VSCodeの各種機能を利用するには「ログイン」をする必要があります。Microsoftアカウントまたは、GitHubアカウントでログインができますが、Copilotを利用するには「GitHubアカウント」が必須となるため、これを使うのがおすすめです。

無償でアカウントが作成できるので、是非作成しておきましょう。アカウントが作れたら、ログインします。

左下の「アカウント」ボタンをクリックし、「バックアップと同期の設定」を選択します。

同期する対象を選び（問題なければすべてで良いでしょう）。「GitHubアカウント」を選択します。

ブラウザに移動するので、ログインするかアカウントを作成して、「Continue（続ける）」をクリックします。

これでログインが完了し、設定が同期されるようになりました。

テーマを設定しよう

VSCodeは標準ではダークテーマが採用されていますが、好みに合わせてもう少し明るい画面色などを選ぶことができます。左下の管理ボタンをクリックし、「テーマ」→「配色テーマ」を選択しましょう。

テーマの一覧が表示されるので、選びます。この時、キーボードの上下キーで選ぶと、その場でプレビューできるので便利です。ここでは、筆者の好みの「Solarized Dark」を選びました。

GitHub CopilotでAIコーディング（バイブコーディング）を体験しよう

それでは、準備ができたので、ここではCopilotを使ってプログラミングを体験してみましょう。

作業フォルダーの準備

作業用に、新しいフォルダーを作成します。デスクトップで右クリック→「新規フォルダ」（Windowsの場合は、「新規→フォルダー」）を選択します。

フォルダー名を「vscode」にしましょう。

このフォルダを、VSCodeで開きます。メニューから開くこともできますが、ウィンドウまたはアプリケーションアイコンにドラッグするのが手軽です。

初めて開く場合は、図のような確認画面が表示されますが、自分で作成したフォルダの場合は「信頼します」をクリックして問題ありません。

Copilotを使おう

それではこのフォルダで、Copilotを使って作業をしましょう。画面上部のCopilotボタンをクリックします。

右側にパネルが表示され、下にチャットの入力欄が表示されます。ここに、通常の生成AIチャットと同様に、質問などを入力することができます。この時、右側の「モード」という箇所を「Ask」というモードにしておきましょう。

すると、右側のパネル上でチャットの返答を見ることができます。

チャットの「モデル」も複数のものから選択することができるので、日常のチャットなどにも利用できます（Freeプランの場合は回数制限があるので気をつけましょう）。

プログラミングを依頼しよう

それではいよいよ、Copilotにプログラミングを依頼してみましょう。チャットエリアに次のように入力します。

HTMLとJavaScriptでじゃんけんゲームを作成してください

そして、右側の「モード」切り替えでプログラムを作成できる「Agent」というモードに切り替えます。

送信しましょう。

すると、右側のチャットパネルに返答が表示されながら、エディタ画面の方で続々とコードが生成されていきます。しばらく見守っておきましょう。

完成したら、画面下の「保持」ボタンをクリックして変更を承認します。ファイルを保存しておきましょう。

デスクトップのvscodeフォルダーを開き、index.htmlをダブルクリックします。

すると、Webブラウザが開き、じゃんけんゲームで遊ぶことができるようになっているでしょう。画面のデザインなどは、その時々で変わるので同じでなくて問題ありません。

追加でお願いしたい内容などは、続けてチャットエリアに入力して依頼することができます。

プログラムの内容を教えてもらおう

Copilotにはプログラムを作る機能だけではなく、エディタに表示されているプログラムの内容を理解し、解説してもらうこともできます。

先ほど生成された、game.jsなどのファイルをエディタで開いて、チャットエリアに次のように入力しましょう。

このファイルにはどんなプログラムが書かれていますか？

プログラムの内容を詳しく教えてくれます。分からないところはさらに質問をすることもでき、コードの内容を理解する助けになります。

こうして、Copilotを活用すればプログラミング開発や、保守などに非常に役立ちます。次回以降も、より詳しい使い方を紹介していきましょう。

本講座をまとめて動画で受講したい場合は、Udemyでご受講いただけます。