VS Codeで使えるAIチャットの準備と基本操作【GitHub Copilot Chat】

GitHub Copilot Chat とは

GitHub Copilot Chatは、GitHubが提供するAIアシスタント機能で、Visual Studio Code（VS Code）の拡張機能として利用できます。VS Code上でAIと会話しながら、質問したりコードを生成したりすることができます。

会話によるサポートのほか、入力中のコードの候補を表示する補完機能も備えています。

拡張機能GitHub Copilot Chatのインストールと準備

過去のVS Codeアップデートで自動的にGitHub Copilot Chatがインストールされていると思います。無い場合は拡張機能を検索してインストールしてください。

インストール、有効化するとAIとのチャットによる相談やコード生成、エディターのコード補完が利用できるようになります。

GitHubアカウントの作成

VS Codeでログイン

Copilot Chatを使ってみる

エージェントの設定（Agent・Ask・Plan）による違い

• Agent
  コードの書き換えも含めて全てやる。
• Ask
  相談・質問・コードの提示など。提示されたコードは手動で適用することができる。コードの書き換えは行わない。
• Plan
  実装までのロードマップを提案。コードの書き換えは行わない。

---

簡単な指示を出してみる

1. ファイルの準備

適当な場所に空のtest.jsを作成し、このファイルでCopilot Chatを試してみます。用意したtest.jsをVS Codeで開き、まずは “エージェントの設定” を “Ask” に変更します。

2. チャットしてみる

簡単な指示を出してみます。

** 指示 **
DOM読み込み後に実行する中身が空の関数 initSample() を用意

---

** 指示 **
同じタイミングで実行する関数 initSample2() を追加し、実行の箇所をアロー関数に変更。

** Copilot **
function initSample() {
    // ここに初期化処理を追加
}

function initSample2() {
    // こちらも同じタイミングで走る初期化処理
}

document.addEventListener('DOMContentLoaded', () => {
    initSample();
    initSample2();
});

割とあいまいな指示も理解してくれたようで、コードの追加と変更が行われました。次は関数の中身を追加してみます。

---

** 指示 **
initSample()に次の処理を追加。
最後までスクロールするとアラートを出す。文字列は"Sample ready."

** Copilot **
// DOM読み込み後に実行する関数
function initSample() {
    // ここに初期化処理を追加
    window.addEventListener('scroll', () => {
        if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
            alert("Sample ready.");
        }
    });
}

// DOM読み込み後に実行する関数
function initSample2() {
    // ここに初期化処理を追加
}

// DOM読み込み後にinitSampleとinitSample2を実行
document.addEventListener('DOMContentLoaded', () => {
    initSample();
    initSample2();
});

---

まとめ

このように、エージェントの設定 “Ask” ではファイルを直接変更しないので、チャット欄で提案してくれたものを手動で適用する必要があります。

コードの生成以外にも分からないことを聞いたりできるのでかなりの便利さです。ただ、コードが動かない場合や質問の回答が間違っている場合もあるので、それを踏まえたうえで活用することになります。

補足

Copilot Chatが不要な場合

チャットでのサポートやコード補完が不要な場合はGitHub Copilot Chatを “無効にする” もしくは “アンインストール” するとチャット欄は消え、コード補完もされなくなります。

コード補完のみオフにしたい場合

右下のCopilot Chatアイコン内の設定で、”Inline Suggestions” のチェックを外すとチャットでのサポートはそのままに、コード補完機能のみオフになります。

---