Visual Studio CodeでGitHub Copilotを利用する方法【Windows】【初心者向け】
/ 14 min read
Table of Contents
この記事で扱う内容
この記事では、Visual Studio CodeでGitHub Copilotを利用する方法についてご紹介します。
前提
前提知識・前提スキル
-
Windows OS の基本操作ができる人
-
ブラウザの基本操作ができる人
前提環境
- 使用PC
- OS が Windows 11であること
- Visual Studio Codeがインストールされていること
- Visual Studio CodeでGitHub Copilot拡張機能を有効化しても良いこと
参考記事Visual Studio Codeのダウンロード・インストール方法【日本語化も】【Windows】【初心者向け】
- その他
- GitHubアカウントを作成済みであること
参考記事GitHubアカウント登録方法【初心者向け】
参考記事GitHubアカウントで二段階認証を設定する方法【初心者向け】
Visual Studio CodeでGitHub Copilotを利用する方法
この例では、ブラウザは「Google Chrome」を使用しています。
Visual Studio Codeで「GitHub Copilot Chat」拡張機能を有効化する
GitHub公式サイトの「Visual Studio CodeのGitHub Copilot」ページを開く
画面中央の「VS CodeのGitHub Copilotを開く」ボタンを押す
ポップアップ画面に確認メッセージが表示されるため、「Visual Studio Code を開く」ボタンを押す
Visual Studio Codeが起動し、ポップアップ画面に「‘GitHub Copilot Chat’ 拡張機能を有効にしますか?」というメッセージが表示されるため、「拡張機能を有効にして URI を開く」ボタンを押す
「GitHub Copilot Chat」拡張機能が有効になったことを確認する
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（サインイン）」ボタンを押す
二段階認証の画面が表示されるため、任意の方法を選択し、認証を進める
パスキーの場合
「Use passkey」ボタンを押す
パスキーを選択し進める
※ここでは、Googleパスワードマネージャーを使用しています。
認証アプリの場合
認証アプリに表示されている対象のGitHubアカウントの認証コードを入力し、「Verify（検証する）」ボタンを押す
二段階認証の復旧コードの場合
復旧コードを入力し、「Verify（検証する）」ボタンを押す
GitHubアカウントへのサインイン画面が表示されるため、認証に使用する任意のアカウントの「Continue（続ける）」ボタンを押す
Visual Studio Codeに対するGitHubアカウントへの接続承認画面が表示されるため、各項目の折り畳みエリアを確認後、「Authorize Visual-Studio-Code」ボタンを押す
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です。」です。ワークスペースで確認してください。
指示した編集結果を保持するかどうか確認されるため、「保持」ボタンを押す
指示結果を確認する
おすすめの関連記事
参考記事Visual Studio Codeのダウンロード・インストール方法【日本語化も】【Windows】【初心者向け】
参考記事GitHubアカウント登録方法【初心者向け】
参考記事GitHubアカウントで二段階認証を設定する方法【初心者向け】
参考記事GitHub Copilotを使う方法【初心者向け】
参考記事GitHub Copilot CLIのダウンロード・インストール方法【Windows】【初心者向け】
参考記事PyCharmとGitHub CopilotをGitHub Copilotプラグインで連携する方法【Windows】【初心者向け】
参考記事Visual Studio CodeでCodexを利用する方法【Windows】【初心者向け】
参考記事Visual Studio CodeでClaude Codeを利用する方法【Windows】【初心者向け】
参考記事Visual Studio CodeでGemini Code Assistを利用する方法【Windows】【初心者向け】