「GitHub Copilot」の機能をより便利に活用するには？ 操作方法やプログラミングなどの活用例をシーン別に紹介

「GitHub Copilot」入門 第2回

GitHub Copilotの詳細な操作方法

　前回記事では、命令や対話を通してGitHub Copilotを利用する基本的な操作方法を説明しました。今回は詳細な操作方法として、ショートカットキーとコマンドを紹介します。

提案された内容を部分的に受け入れる操作

　GitHub Copilotでは、コードやコメントなどの提案を受けることができます。前回記事ではタブキーを押して提案をすべて受け入れていましたが、Ctrl + →キーを押すと提案を部分的に受け入れることができます。

図2 提案を部分的に受け入れる操作の様子

別の提案を表示する操作

　GitHub Copilotの提案内容が受け入れられない場合、別の提案をさせることができます。Alt + ]キーを押すと次の提案、Alt + [キーを押すと前の提案を表示できます。

図3 別の提案を表示させる操作の様子

　また、Ctrl + 改行キーを押すと、コードエディターとは別のタブに複数の提案が表示され、受け入れる提案を選択できます。

図4 別のタブで別の複数の提案を表示

命令や対話を開始するショートカットキー

　GitHub Copilotへの命令や、Copilot Chatとの対話で利用するテキストボックスは、表示箇所が異なる複数パターンが利用できます。それぞれを表示するショートカットキーを表1に示します（No.1と2は前回記事でも利用しました）。

表1 命令や対話を開始するさまざまなショートカットキー

No.	ショートカットキー	テキストボックスの表示個所
1	Ctrl + I	カーソルのある場所
2	Ctrl + Alt + I	画面左側のサイドバー
3	Ctrl + Shift + I	画面上部のコマンドパレット

　No.1はインラインチャットと呼ばれ、カーソルがある場所を操作対象とする場合に利用します。コードエディターにカーソルがある場合は、カーソルの場所に実装を追加するといった命令ができます。

図5 コードエディターでインラインチャットを利用する様子

　また、ターミナルにカーソルがある場合は、ターミナルのコマンドに関して命令や質問ができます。図6では、ファイルのSHA-256ハッシュを求めるコマンドを質問しています。回答で提案されたコマンドは、「挿入」ボタンでターミナルに入力したり、「実行」ボタンでそのまま実行したりできます。

図6 ターミナルでインラインチャットを利用する様子

　No.2はVSCode画面左側のサイドバーにチャット専用の画面を表示します。比較的長い回答を表示したり、複数回のやり取りを行う場合に便利です。アクティビティバーのチャットボタンをクリックすることでも同じ画面を表示できます。

図7 サイドバーでチャットを利用する様子

　No.3はクイックチャットと呼ばれ、画面上部のコマンドパレット部でチャットができます。サイドバーにチャット画面を表示するほどでもない質問を素早く行う際に便利です。

図8 クイックチャットを利用する様子

命令や対話時に利用できるコマンド

　GitHub Copilotへの命令や、Copilot Chatとの対話には自然言語（英語や日本語）が利用できますが、典型的な操作については専用のコマンドが用意されています。例えばリスト1のコマンドは、コードエディターで選択されたソースコードについて説明を表示するコマンドです。

［リスト1］コードエディターで選択されたソースコードを説明させるコマンド

@workspace /explain #selection

　図9は、リスト1のコマンドで、サンプルコード（p001-react）のsrc/main.tsxに記述された、Reactの初期化処理を説明させた様子です。

図9 リスト1のコマンドを実行した様子（p001-react/src/main.tsx）

　リスト1のコマンドは、表2に示す各要素から構成されています。

表2 コマンドを構成する要素

No.	記述	意味
1	@workspace	コマンド処理の参照先
2	/explain	コマンドの本体
3	#selection	チャット変数（コマンドの処理対象）

　表2のNo.1はコマンドを実行する際の参照先を指定するもので、表3の内容が指定できます。詳細は公式ドキュメントも参照してください。なお公式ドキュメントでは「Chat participants」と呼ばれています。

表3 コマンド参照先（Chat participants）

No.	記述	意味
1	@workspace	ワークスペース（ソースコードを含むフォルダー）
2	@terminal	ターミナル
3	@vscode	VSCode自体

　表2のNo.2に対応する主なコマンドは表4の通りです。すべてのリストは公式ドキュメントに列挙されています。なお公式ドキュメントでは「Slash commands」と呼ばれています。

表4 主なコマンド（Slash commands）

No.	記述	意味
1	/explain	説明を表示
2	/tests	単体テストの生成
3	/help	コマンドに関するヘルプを表示

　表2のNo.3に対応する主なチャット変数は表5の通りです。詳細は公式ドキュメントを参照してください。なお公式ドキュメントでは「Chat context」と呼ばれています。

表5 主なチャット変数（Chat context）

No.	記述	意味
1	#selection	コードエディターで選択された箇所
2	#editor	アクティブなコードエディター全体
3	#terminalLastCommand	ターミナルで直前に実行されたコマンド

　表3～5の記述を組み合わせて、Copilot Chatにさまざまな命令ができます。これらの利用例を、以下でいくつか紹介していきます。

GitHub Copilotのシーン別活用法：学習編

　以下では、さまざまなシーンでGitHub Copilotを活用する事例を紹介します。最初に紹介するのは、プログラミング言語などの学習時を想定した利用法です。

サンプルコードの実装内容を説明してもらう

　既存のサンプルコードを動かしながら学習を進めることは多いですが、最初のうちは意味を理解せずに動かしている状態になりがちです。そんな時はリスト1の「@workspace /explain #selection」コマンドで、図9の通りコードの内容を教えてもらえます。相手がAIなので、遠慮せずに何度でも質問を行うことができ、疑問の早期解決につながります。

別の言語から書き換えてもらう

　新しい言語での記法を学ぶときに、自分がすでに知っている別の言語を手掛かりにすることがあります。GitHub Copilotを利用すると、別の言語で記述されたコードの書き換えを支援してもらえます。例えばJavaScriptを専門とするプログラマーがPythonを学習中で、JavaScriptの繰り返し文（リスト2）と同じ内容をPythonで記述したいとします。

［リスト2］JavaScriptの繰り返し文（p002-learn/loop.js）

function doloop() {
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }
}

　この場合、リスト2の範囲を選択して「Pythonではどう書くか」と質問すると、図10の通り回答してくれます。

図10 JavaScriptからPythonへの書き換えを質問した様子（p002-learn/loop.js）

　図10で回答されたコードはリスト3の通りです。

［リスト3］Pythonの繰り返し文（p002-learn/loop.py）

def do_loop():
    for i in range(10):
        print(i)

テンプレートや定型処理を生成してもらう

　サンプルコードの実行から一歩進んで自分でコードを書き始める時、最初に何を書いてよいかわからないことがしばしばあります。またファイル読み込みなど、ある程度記述方法が決まっている処理でも、慣れない言語では迷いがちです。そんな場合もGitHub Copilotに命令してコードを生成できます。例えば、新規コードエディターでインラインチャットを開いて「Pythonのテンプレート」と入力すると、リスト4の内容が生成されます。

［リスト4］GitHub Copilotが生成したPythonのテンプレート（p002-learn/template.py）

def main():
    # Your code here

if __name__ == "__main__":
    main()

　またリスト4の「Your code here」直下でインラインチャットを開いて「ファイルを読み込み」と入力すると、ファイル読み込み処理をリスト5の通り生成してくれます。

［リスト5］GitHub Copilotが生成したPythonのファイル読み込み処理（p002-learn/loadfile.py）

file_path = "/path/to/your/file.txt"  # Replace with the actual file path
with open(file_path, "r") as file:
    data = file.read()
    # Process the data here

VSCodeに関する質問をする

　コードエディターなどの開発環境の使い方がわからないと、プログラミング学習に大きな妨げとなります。VSCodeでGitHub Copilotを利用している場合、表3の「@vscode」記述を利用して、VSCodeに関する質問ができます。例えば、表示色を変更する方法を質問すると図11の通り回答がもらえ、さらに次の操作へ誘導するボタンも表示されます。

図11 VSCodeに関する質問をする様子