GitHub Copilotは、GitHubが提供しているAIコーディング支援サービスです。
VSCodeと組み合わせることで、コードの自動補完だけでなく、コード生成、コードの説明、エラー修正、リファクタリング、テストコードの作成など、幅広い開発作業をAIに支援してもらえます。
現在のGitHub Copilotは、単純にコードの続きを提案するだけのツールではありません。
チャット形式でプログラミングについて質問したり、複数のファイルを変更したり、Agent機能を使って複数ステップの開発作業を進めたりすることもできます。
VSCodeを使ってプログラミングしているのであれば、GitHub Copilotを導入することで、コーディングや調査にかかる時間を短縮できる可能性があります。
VSCodeでGitHub Copilotを使うために必要なもの
VSCodeを用意する
GitHub CopilotをVSCodeで使用するには、まずVisual Studio Codeをインストールしておく必要があります。
VSCodeはWindows、macOS、Linuxなどに対応している無料のコードエディターです。
すでにVSCodeを使用している場合でも、GitHub Copilot関連の機能を利用するために、できるだけ新しいバージョンへアップデートしておくことをおすすめします。
CopilotやChat、AgentなどのAI関連機能は継続的に更新されているため、古いVSCodeでは利用できる機能や画面構成が異なる場合があります。
GitHubアカウントを用意する
GitHub Copilotを一般的な方法で利用する場合は、GitHubアカウントが必要です。
すでにGitHubを利用しているのであれば、新しくアカウントを作る必要はありません。
VSCodeからGitHubアカウントへサインインし、そのアカウントで利用できるCopilotプランを使用します。
仕事用と個人用など複数のGitHubアカウントを使っている場合は、Copilotを利用したいアカウントでサインインしているか確認しておきましょう。
GitHub Copilotを利用できるプランを確認する
GitHub Copilotには、無料で利用できるCopilot Freeをはじめ、複数のプランがあります。
個人向けの無料プランでもGitHub Copilotを試すことはできますが、コード補完やAI機能などに利用上限があります。
より多くCopilotを利用したい場合や、高度なAI機能を利用したい場合は、有料プランを検討することになります。
なお、GitHub Copilotの料金体系や利用上限は変更されることがあります。
正確な料金や最新の利用条件については、GitHub公式サイトで確認することが重要です。
VSCodeでGitHub Copilotを有効にする方法
VSCodeを起動する
まずVSCodeを起動します。
すでに作成しているプロジェクトを開いても、新しいフォルダーを開いても構いません。
CopilotのAI機能を有効にする
現在のVSCodeでは、Copilotとの統合が進んでおり、VSCode上のCopilotアイコンやChatメニューなどからAI機能のセットアップを行えます。
画面の案内に従ってAI機能を有効にしてください。
以前はMarketplaceからGitHub Copilot関連の拡張機能を自分で検索してインストールする方法が一般的でした。
現在はVSCode側のセットアップから必要なCopilot関連機能を導入できるため、必ずしも手動でMarketplaceからインストールする必要はありません。
ただし、VSCodeのバージョンによって画面や表示されるメニュー名が異なる場合があります。
GitHubアカウントにサインインする
Copilotを有効にすると、GitHubアカウントへのサインインを求められます。
表示された案内に従って認証を進めます。
ブラウザでGitHubが開いた場合は、VSCodeからの認証を許可してください。
認証が完了すると、GitHubアカウントに紐づいているCopilotの利用資格が確認されます。
Copilotが利用できるか確認する
サインインが完了すると、VSCode上でCopilotのコード補完やChatなどを利用できるようになります。
コードを入力したときに薄い文字で候補が表示されたり、Chat画面から質問できたりすれば、基本的なセットアップは完了しています。
参考サイト
VSCode ではじめる GitHub Copilot 活用術 #GitHubCopilot – Qiita
GitHub Copilotでコードを自動補完する方法
コードを書いて候補を表示する
GitHub Copilotの代表的な機能が、インラインコード補完です。
例えばJavaScriptで次のように入力します。
function calculateTotalPrice(items) {
するとCopilotが周囲のコードなどを参考にして、次のようなコードを提案する場合があります。
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + item.price, 0);
}
Copilotが提案する内容は毎回同じとは限りません。
同じコードを書いても、プロジェクトの内容や周囲のコード、モデルなどによって異なる候補が表示される場合があります。
Tabキーで候補を採用する
エディター内に薄い文字で表示されたコード候補を使用したい場合は、通常Tabキーで採用できます。
候補を使いたくない場合は、そのまま入力を続けるか、Escキーなどで候補を閉じます。
GitHub Copilotは、単純に直前に入力した文字だけでなく、現在編集中のコードや周囲の情報などを参考にして候補を生成します。
そのため、意味の分かりやすい変数名や関数名を使っているほど、意図に近いコードが提案されやすくなることがあります。
コメントからコードを生成する方法
処理内容をコメントとして記述する
GitHub Copilotは、コメントとして記述した自然言語からコードを提案することもできます。
例えばJavaScriptで次のように記述します。
// 配列から重複した値を削除する関数
そのまま改行すると、次のようなコードが提案される場合があります。
function removeDuplicates(array) {
return [...new Set(array)];
}
Pythonでも同様に利用できます。
例えば次のようなコメントを書けます。
# CSVファイルを読み込み、売上金額の合計を計算する
処理内容を具体的にコメントへ書いておくことで、Copilotが実装したい内容を判断しやすくなります。
条件を詳しく書く
単純に「関数を作る」と書くよりも、処理条件を詳しく書く方が希望に近いコードを生成しやすくなります。
例えば、次のように記述します。
メールアドレスを検証する関数を作成する。
空文字の場合はfalseを返す。
TypeScriptを使用する。
使用する言語、ライブラリ、エラー処理、戻り値などを具体的に伝えるのがポイントです。
Copilot Chatを使う方法
Chat画面を開く
VSCodeでは、GitHub Copilotをチャット形式でも利用できます。
VSCodeのChatメニューやCopilot関連のアイコンなどからChat画面を開きます。
Chatでは自然言語でAIへ質問できます。
例えば次のように質問できます。
この関数が何をしているのか初心者向けに説明してください。
あるいは、次のような質問も可能です。
このコードにバグがないか確認してください。
単純なコード生成だけでなく、既存コードを理解するためにも活用できます。
Copilotでエラーの原因を調べる
エラー内容について質問する
プログラムを実行してエラーが発生した場合、Copilotに原因を質問できます。
例えば次のように入力します。
このTypeErrorが発生する原因を説明してください。
また、修正まで依頼することもできます。
このエラーの原因を確認して、修正方法を提案してください。
エラーメッセージだけでは原因を特定できないこともあるため、関連するコードや使用しているライブラリなどの情報も伝えると、より適切な回答を得やすくなります。
Copilotでコードをリファクタリングする
読みやすいコードに修正してもらう
既存コードを改善したい場合もCopilotを利用できます。
例えば次のように依頼できます。
この関数を読みやすくリファクタリングしてください。
また、次のような依頼もできます。
重複している処理を共通関数にまとめてください。
コード量が増えてきたプロジェクトでは、重複処理の整理や関数分割などに活用できます。
ただし、リファクタリングによってプログラムの挙動が変わる可能性もあります。
変更後は必ずテストを実行し、期待している動作を維持しているか確認してください。
Copilotでコードを生成する
自然言語からコードを作成する
Copilot Chatでは、日本語などの自然言語からコードを生成できます。
例えば次のように依頼します。
JavaScriptでメールアドレスを検証する関数を作ってください。
すると、条件に合わせたコードが生成されます。
より具体的に指定する場合は、次のようにします。
TypeScriptでメールアドレスを検証する関数を作ってください。
空文字の場合はfalseを返してください。
複雑すぎない正規表現を使用してください。
JSDocも追加してください。
AIへの指示が具体的であるほど、求めている内容に近いコードを生成しやすくなります。
Copilotで既存コードを説明してもらう
他人が書いたコードの理解にも使える
GitHub Copilotは、自分が書くコードだけでなく、既存コードの理解にも利用できます。
例えば次のコードがあるとします。
const result = users
.filter(user => user.active)
.map(user => user.name);
Copilotへ次のように質問できます。
このコードをJavaScript初心者にも分かるように説明してください。
このコードでは、まずfilter()でactiveが真になっているユーザーだけを抽出し、その後map()でユーザー名だけを新しい配列として取得しています。
初めて参加するプロジェクトや、複雑な既存コードを読むときにもCopilotを活用できます。
Copilotでテストコードを作る
単体テストの作成を依頼する
Copilotはテストコードの生成にも利用できます。
例えば次のように依頼します。
この関数の単体テストを作成してください。
使用するテストフレームワークも指定できます。
Vitestを使用してください。
または、次のように指定できます。
Jestを使用してください。
正常系と異常系の両方をテストしてください。
具体的な条件を伝えることで、プロジェクトに合わせたテストコードを作成しやすくなります。
ただし、Copilotが作成したテストが、本当に正しい仕様を検証しているとは限りません。
テストケースに不足がないか、人間が確認する必要があります。
Agent機能を利用する
複数の作業をまとめて依頼できる
現在のVSCodeでは、AI Agentを利用して複数ステップの開発作業を依頼できます。
例えば次のような指示が考えられます。
ReactとTypeScriptでユーザー登録フォームを作成してください。
名前、メールアドレス、パスワードの入力欄を作成してください。
入力チェックも実装してください。
必要なファイルを追加してください。
Agentは必要に応じてコードベースを確認し、複数ファイルを編集したり、開発に必要な処理を進めたりできます。
単純な質問やコード補完よりも、大きなタスクを任せたい場合に便利です。
Agentが行う変更を必ず確認する
Agentは複数ファイルを変更できるため、作業効率を大きく高められる可能性があります。
一方で、意図していないコードを変更する可能性もあります。
変更されたファイルや差分を確認し、必要に応じて修正してから採用してください。
プロジェクト固有のルールをCopilotに伝える
.github/copilot-instructions.mdを使う
チーム開発では、コーディング規約や使用技術などを毎回Copilotへ説明するのは非効率です。
VSCodeでは、プロジェクトのルートに次のファイルを作成できます。
.github/copilot-instructions.md
例えば次のような内容を記述します。
# Project coding guidelines
- TypeScriptを使用する
- Reactでは関数コンポーネントを使用する
- CSS Modulesを使用する
- 変数名はcamelCaseにする
- API通信にはfetchを使用する
このようにプロジェクトのルールを記述することで、Copilot ChatやAgentがプロジェクトの方針に沿った回答を生成しやすくなります。
インラインコード補完には原則として適用されない
注意したいのは、.github/copilot-instructions.mdなどのカスタム指示が、通常のインラインコード補完にそのまま適用されるわけではないことです。
主にCopilot ChatやAgentなどのAIリクエストで利用されます。
そのため、カスタム指示を作成したからといって、入力中に表示されるすべてのコード候補が必ずルールに従うとは限りません。
/initでCopilot向けの指示を作成する
プロジェクトに合った指示を生成する
現在のVSCodeでは、Chatで次のように入力できます。
/init
/initを利用すると、Copilotが現在のコードベースを分析し、プロジェクト向けの初期指示を生成できます。
自分ですべてのコーディングルールを書く手間を減らしたい場合に便利です。
自動生成された内容を確認する
/initによって作られた指示が、必ずしもプロジェクトのルールと完全に一致するとは限りません。
生成後は、使用しているプログラミング言語、フレームワーク、ディレクトリ構成、命名規則、テスト方法などを確認してください。
必要に応じて人間が修正して使用することが重要です。
AGENTS.mdを利用する方法
AIエージェント向けの指示を書ける
現在のVSCodeでは、AGENTS.mdを使ってAIエージェント向けの指示を記述することもできます。
例えばプロジェクトのルートに次のように配置します。
project/
├── AGENTS.md
├── src/
├── package.json
└── README.md
AGENTS.mdには、AIエージェントに守ってほしい開発ルールや、プロジェクトの構成、テスト方法などを記述できます。
複数のAIエージェントやAIコーディングツールを利用するプロジェクトでは、こうした共通の指示ファイルを利用する方法も便利です。
*.instructions.mdを利用する方法
ファイルごとに異なるルールを設定できる
VSCodeでは、特定のファイルや言語にだけ適用するカスタム指示も作成できます。
例えば次のファイルを作成します。
.github/instructions/react.instructions.md
そして次のように対象ファイルを指定できます。
---
applyTo: "**/*.tsx"
---
この方法を利用すると、Reactファイル、テストファイル、バックエンドコードなど、ファイルの種類ごとに異なる開発ルールを設定できます。
大規模なプロジェクトでは、.github/copilot-instructions.mdだけでなく、複数の指示ファイルを使い分けると管理しやすくなります。
GitHub Copilotを効果的に使うコツ
指示を具体的にする
Copilotへの指示は、できるだけ具体的にするのがおすすめです。
例えば、次の指示だけでは情報が不足しています。
ログイン機能を作ってください。
次のように条件を追加すると、希望に近いコードを生成しやすくなります。
ReactとTypeScriptでログインフォームを作成してください。
メールアドレスとパスワードを入力できるようにしてください。
未入力の場合は入力欄の下にエラーを表示してください。
使用する技術、処理条件、出力形式などを明確に伝えることが重要です。
大きな作業は分割する
大規模な機能を一度に作らせるより、作業を分割した方が結果を確認しやすくなります。
例えば次のように進めます。
データモデルを作成する
次に、
APIを作成する
さらに、
フロントエンドを作成する
最後に、
テストを作成する
といった形です。
作業を細かく分けることで、問題が発生した場合にも原因を特定しやすくなります。
使用技術やバージョンを指定する
Copilotへコード生成を依頼する場合は、使用する言語やライブラリを明確にすると効果的です。
例えば次のように指定します。
TypeScriptを使用してください。
Reactを使用してください。
Tailwind CSSを使用してください。
ライブラリのバージョンによって書き方が異なる場合は、バージョンまで伝えるとより安全です。
GitHub Copilotが使えない場合の確認ポイント
GitHubに正しくサインインしているか確認する
Copilotが使用できない場合は、まずVSCodeで正しいGitHubアカウントへサインインしているか確認してください。
複数のGitHubアカウントを利用している場合は、Copilot契約があるアカウントとは別のアカウントにログインしている可能性があります。
Copilotを利用できるプランか確認する
GitHubアカウントでCopilotを利用できる状態になっているか確認してください。
企業や学校などの組織アカウントでは、管理者の設定によってCopilotの利用が制限されている場合があります。
VSCodeをアップデートする
Copilot関連の機能は頻繁にアップデートされています。
ChatやAgentが表示されない場合や、公式ドキュメントと画面が大きく異なる場合は、VSCodeを最新版へ更新してください。
AI機能が無効になっていないか確認する
VSCodeにはAI関連機能を無効化する設定があります。
例えば次の設定です。
"chat.disableAIFeatures": true
この設定が有効になっている場合、Chatやインライン候補などのAI関連機能が利用できなくなります。
Copilotが突然表示されなくなった場合は、この設定も確認するとよいでしょう。
GitHub Copilotを使う際の注意点
生成されたコードが正しいとは限らない
GitHub Copilotは非常に便利ですが、AIが生成したコードが常に正しいとは限りません。
存在しないAPIを提案したり、古い書き方を生成したり、条件によってはセキュリティ上問題のあるコードを生成したりする可能性があります。
そのため、Copilotが出力したコードをそのまま本番環境へ使用するのは避けるべきです。
セキュリティに関わるコードは特に確認する
特に注意したいのは、次のような処理です。
- 認証
- 認可
- SQL
- データベース操作
- APIキー
- パスワード
- 個人情報
- 決済処理
- ファイル削除
- 本番環境の設定
これらについては、人間によるコードレビューとテストを必ず行うことが重要です。
会社のAI利用ルールも確認する
業務でGitHub Copilotを利用する場合は、所属している企業や組織のAI利用ルールを確認してください。
会社のソースコード、顧客情報、機密情報などについて、AIサービスへの入力を制限している企業もあります。
個人の判断だけで利用せず、組織のセキュリティポリシーや利用規約に従うことが重要です。
VSCodeでGitHub Copilotを使う基本的な流れ
VSCodeでGitHub Copilotを初めて利用する場合は、次のような順番で覚えると分かりやすいでしょう。
- VSCodeをインストールまたは最新版へ更新する
- GitHubアカウントを用意する
- VSCodeからGitHubへサインインする
- CopilotのAI機能を有効にする
- インラインコード補完を試す
- Copilot Chatでコードについて質問する
- コード生成やエラー修正を依頼する
- テストやリファクタリングに活用する
- 慣れてきたらAgent機能を利用する
- プロジェクトではカスタム指示を設定する
- 生成されたコードをレビューしてから採用する
最初からAgentに大きな開発作業を任せる必要はありません。
まずはコード補完、コード説明、エラー解説などの分かりやすい機能から利用すると、Copilotの特徴を理解しやすくなります。
まとめ
VSCodeでGitHub Copilotを利用すると、コードの自動補完だけでなく、コード生成、エラー調査、リファクタリング、テストコード作成、既存コードの説明など、幅広い開発作業をAIに支援してもらえます。
現在のVSCodeではCopilotとの統合が進んでおり、GitHubアカウントへサインインしてAI機能を有効にすることで、比較的簡単に利用を開始できます。
さらに、Copilot ChatやAgentを利用すれば、単純なコード補完にとどまらず、複数ファイルにまたがる開発作業にも活用できます。
.github/copilot-instructions.mdやAGENTS.mdなどを使えば、プロジェクト固有の開発ルールをAIに伝えることも可能です。
ただし、GitHub Copilotは開発者の代わりにすべてを正しく判断してくれるツールではありません。
AIが生成したコードは必ず内容を確認し、テストやコードレビューを行ってから利用することが重要です。
以上、VSCodeのGitHub Copilotについてでした。
最後までお読みいただき、ありがとうございました。
