🧑‍✈️

Visual Studio 2022 で GitHub Copilot を使う

2024/06/20に公開

はじめに

Visual Studio で GitHub CopilotGitHub Copilot Chat を使用するための手順をまとめました。

GitHub Copilot のサブスクリプション契約は済んでいることを前提に書いています。
契約の方法などは、下の GitHub Docs をご確認ください。

GitHub Copilot について

1. Visual Studio 2022 バージョン 17.10以上にする

Visual Studio 2022 で GitHub Copilot を使用するためには、バージョンを 17.10 以上にするようMicrosoftのドキュメントに書いてあります。

新しい統合 GitHub Copilot 拡張機能を取得する方法
・Visual Studio 2022 バージョン 17.10 Preview 3 以降をインストールします。

リンク:Visual Studio で GitHub Copilot をインストールする

バージョンを17.10以上にしたところ、新機能の説明が出ました。
「GitHub Copilot を使用して説明を記述し、履歴を説明する」と書かれています。

新機能

2. 拡張機能をダウンロードする

Visual Studio を開き、「拡張機能」メニューから「拡張機能の管理」を選択します。

拡張機能の管理

拡張機能の管理画面が開くので、検索フォームに「github copilot」と入力します。
GitHub Copilot Completionsという拡張機能がヒットするので、「ダウンロード」ボタンを押下します。

ダウンロード後は、一度Visual Studioを再起動します。

ダウンロード

3. 拡張機能をインストールする

インストーラーが表示されるので「Modify」を押下します。

インストーラー

インストールが完了すると下のような表示になります。

インストール完了

4. GitHubのアカウントと連携する

Visual Studio 右上のアイコンから「アカウント設定」を開くことができます。
ここから GitHub のアカウントと連携することができます。

(個人情報が多かったためキャプチャは省略しました)

5. 使ってみる

GitHub Copilot Chat で質問する

GitHub Copilot Chat はチャット形式で質問ができるツールです。

メニューバーの「表示」から「GitHub Copilot チャット」が選択できるようになっています。これをクリックします。

表示メニュー

下のように、GitHub Copilot チャット が表示されます。

GitHub Copilot Chat画面

GitHub Copilot Chat はプログラミングに関する質問に丁寧に答えてくれます。
試しに、カレンダーを表示するWebサイトの作り方を聞いてみました。

カレンダーWebサイトの提案

ASP.NET Core Web アプリケーションで作ることを提案してくれました。
また、ライブラリを使う方法と自作で作る方法があることも教えてくれました。

回答が長かったためキャプチャに収まりませんでしたが、ステップ5まであり、最後はデプロイするよう書かれていました。

しかし、プログラミングに関する質問以外には対応していません。例えば、明日の天気を聞いても教えてくれませんでした。
あくまで、プログラミングアシスタントのようです。

天気を聞いた結果

GitHub Copilot に、コード上でアドバイスをもらう

コードを書きながら、GitHub Copilot にアドバイスをもらうこともできます。

適当に新しい ASP.NET Core Web アプリプロジェクトを作成し、カレンダーを表示するWebサイトを作成してみます。

index.cshtml がデバッグしたときに最初に表示される画面です。とりあえずここにカレンダーを表示してみましょう。
「カレンダーを表示する」というコメントを入力し、改行します。
すると、薄いグレーでHTMLの候補が出てきました。このコードで良ければ、タブキーを押して確定します。

提案されたコード

提案されたコードでは、カレンダーを表示するための枠が表示されるだけです。
そこで、カレンダーを表示したい箇所で右クリックをし、メニューから「Copilotに質問する」を選択します。
Alt+/のショートカットキーでもOKです。

copilotに質問する

インラインチャットが表示されるので、「2024年6月のカレンダーを表示する」と入力してEnterキーを押下します。

Copilotへの質問

すると、Copilotがカレンダーを表示するためのJavaScriptを提案してくれました。
このコードで良ければ「承認」を押下します。

Copilotの回答

では実行してみましょう。

alt text

日付が表示されるべきでない場所に「0」が表示されているなど、気になるところもありますが、確かに2024年6月のカレンダーが表示されました。

完ぺきではありませんでしたが、質問を繰り返していけばきれいなカレンダーが完成しそうです。

6. 注意事項

2つ注意したいことがあります。

1つ目が、GitHubのアカウントが2つ以上ある場合 です。

例えば、個人用のアカウントと仕事用のアカウントがある場合。
仕事で Githu Copilot を使用したい場合は仕事用のアカウントで契約しないと、アカウントの切り替えが面倒になると思います。

また、VSCode の話ですが、複数の GitHub アカウントでログインしていると競合してしまい、GitHub Copilot Chat が使えなかったという報告も見かけました。

参考:VSCodeでGitHub Copilot Chatを利用できない

2つ目が、 セキュリティ についてです。
GtiHub Copilot デフォルトの設定では、コードがAIのモデル学習に使用されてしまうため、情報流出の危険があります。

仕事で使う場合などは、コードが学習されないよう設定しましょう。

【設定手順】

  1. ブラウザで GitHub にアクセスし、右上のアイコンから Settingを選択します。
  2. 左にメニューが出てくるので、 Code, planning, and automation > Copilot を開きます。
  3. Allow GitHub to use my code snippets from the code editor for product improvements のチェックを外します。

学習させない

株式会社ジード テックブログ

Discussion