Visual Studio CodeでGitHub Copilotを利用する方法【Windows】【初心者向け】

この記事で扱う内容
前提
1. 前提知識・前提スキル
2. 前提環境
Visual Studio CodeでGitHub Copilotを利用する方法
おすすめの関連記事
参考

この記事で扱う内容

この記事では、Visual Studio CodeでGitHub Copilotを利用する方法についてご紹介します。

前提

前提知識・前提スキル

Windows OS の基本操作ができる人
ブラウザの基本操作ができる人

ブラウザとは、インターネット上のWebサイトを表示・操作するためのアプリケーションです。

以下が代表的なブラウザです。

Microsoft Edge
Safari
Google Chrome
Mozilla FireFox

前提環境

使用PC
- OS が Windows 11であること
- Visual Studio Codeがインストールされていること
- Visual Studio CodeでGitHub Copilot拡張機能を有効化しても良いこと

Visual Studio Codeのダウンロード・インストール方法【日本語化も】【Windows】【初心者向け】

この記事で扱う内容この記事では、Visual Studio Codeのダウンロード・インストール方法についてご紹介します。また、Visual Studio Codeを日本語化する方法も併せてご紹介します。前提前提知識・前提スキルWindow...

その他
- GitHubアカウントを作成済みであること

GitHubアカウント登録方法【初心者向け】

この記事で扱う内容この記事では、GitHubでアカウントを登録する方法についてご紹介します。前提前提知識・前提スキルブラウザの基本操作ができる人前提環境PCメールアドレスを持っていることGitHubでアカウントを登録する方法この例では、ブラ...

GitHubアカウントで二段階認証を設定する方法【初心者向け】

この記事で扱う内容この記事では、GitHubで二段階認証を設定する方法についてご紹介します。前提前提知識・前提スキルブラウザの基本操作ができる人前提環境PCスマートフォンを持っていることスマートフォンに認証アプリをインストールしても良いこと...

Visual Studio CodeでGitHub Copilotを利用する方法

この例では、ブラウザは「Google Chrome」を使用しています。

Visual Studio Codeで「GitHub Copilot Chat」拡張機能を有効化する

GitHub公式サイトの「Visual Studio CodeのGitHub Copilot」ページを開く

GitHub Copilot · 個々の方法に対応できるよう構築されたAIコーディング

GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...

GitHub公式サイトの「Visual Studio CodeのGitHub Copilot」ページを開く操作の画面キャプチャ

画面中央の「VS CodeのGitHub Copilotを開く」ボタンを押す

ポップアップ画面に確認メッセージが表示されるため、「Visual Studio Code を開く」ボタンを押す

確認ポップアップが表示されるため、「Visual Studio Code を開く」ボタンを押す操作の画面キャプチャ

Visual Studio Codeが起動し、ポップアップ画面に「’GitHub Copilot Chat’ 拡張機能を有効にしますか?」というメッセージが表示されるため、「拡張機能を有効にして URI を開く」ボタンを押す

「GitHub Copilot Chat」拡張機能が有効になったことを確認する

Visual Studio Codeで左サイドメニューの「Extensions（拡張機能）」のボタンを押す

Visual Studio Codeが起動するため、左サイドメニューの「Extensions（拡張機能）」のボタンを押す操作の画面キャプチャ

「拡張機能」の画面が表示されるため、上部にある検索テキストボックスに「GitHub Copilot Chat」と入力し、表示された「GitHub Copilot Chat」という拡張機能のエリアを押す

「GitHub Copilot Chat」拡張機能のページが表示されるため、拡張機能の有効化ボタンが「AI 機能を無効にする」と表示されていることを確認する

Visual Studio CodeでGitHub Copilotを使用できるように設定する

Visual Studio CodeでGitHub Copilotを使用する任意の作業フォルダを開く

Visual Studio Codeで左サイドメニューの「エクスプローラー」のボタンを押す

既に表示されている場合は、次の手順へ進んでください。

「エクスプローラー」の画面が表示されるため、「フォルダーを開く」ボタンを押す

「フォルダーを開く」ダイアログが表示されるため、任意の作業フォルダを選択し、「フォルダーの選択」ボタンを押す

「エクスプローラー」の画面に選択した作業フォルダの中身が表示され、「このフォルダー内のファイルの作成者を信頼しますか?」という確認メッセージが表示されるため、「はい、作成者を信頼します」ボタンを押す

ようこそページのチュートリアルのエリアに「GitHub Copilot」のボタンが表示され、右サイドにチャット画面が表示される

右下の「セットアップの完了」と書かれたエリアを押す

AI機能のポップアップが表示されるため、「AI 機能を使用する」ボタンを押す

「サインインして AI 機能を使用する」と書かれたポップアップが表示されるため、「GitHub で続行する」ボタンを押す

Githubの認証画面が表示されるため、「Username or email address（ユーザー名またはメールアドレス）」と「Password（パスワード）」を入力し、「Sign in（サインイン）」ボタンを押す

二段階認証の画面が表示されるため、任意の方法を選択し、認証を進める

画面内の「More options」のボタンを押すと、表示されている方法以外の認証方法のボタンが表示されます。

パスキーの場合

「Use passkey」ボタンを押す

パスキーを選択し進める

※ここでは、Googleパスワードマネージャーを使用しています。

認証アプリの場合

認証アプリに表示されている対象のGitHubアカウントの認証コードを入力し、「Verify（検証する）」ボタンを押す

認証アプリに表示されている対象のGitHubアカウントの認証コードを入力し、「Verify」ボタンを押す操作の画面キャプチャ

二段階認証の復旧コードの場合

復旧コードを入力し、「Verify（検証する）」ボタンを押す

GitHubアカウントへのサインイン画面が表示されるため、認証に使用する任意のアカウントの「Continue（続ける）」ボタンを押す

Visual Studio Codeに対するGitHubアカウントへの接続承認画面が表示されるため、各項目の折り畳みエリアを確認後、「Authorize Visual-Studio-Code」ボタンを押す

Visual Studio Codeに戻る（と思われる）

私が試したときは以下のようなアクセスエラーが発生しました。

使用PC上のVisual Studio Codeでは、正常にサインインが成功していたため、そのまま手順を進めました。

Visual Studio Codeに対するGitHubアカウントへの接続承認画面後のリダイレクトでアクセスできないメッセージが表示されたときの画面キャプチャ

ちなみにですが、これは、ブラウザが「vscode://」から始まるURLを開こうとしているが、「vscode://」が使用PC上のVisual Studio Codeに紐づけられておらず、開けずに発生するエラーのようです。

試しに、「redirect=」の後ろのURLをURLデコードして、ブラウザのURLバーに入力し接続すると、以下のようにVisual Studio Codeにフォーカスが移ります。

Visual Studio Codeのチャット画面に、過去のセッションがあればその履歴が表示され、右下のAI機能のアイコンを押すと使用状況などが表示される

Visual Studio CodeのGitHub Copilot Chatに指示（プロンプト）を試し打ちする

GitHub Copilot Chatに指示（プロンプト）を入力し、「送信」ボタンを押す

指示（プロンプト）例

試しに `テスト2です。` と記載された `Test2.txt` を作成してみてください。

実行結果例

Created Test2.txt

Test2.txt ファイルを作成しました。内容は「テスト2です。」です。ワークスペースで確認してください。