GitHub Copilotの詳細な操作方法
前回記事では、命令や対話を通してGitHub Copilotを利用する基本的な操作方法を説明しました。今回は詳細な操作方法として、ショートカットキーとコマンドを紹介します。
提案された内容を部分的に受け入れる操作
GitHub Copilotでは、コードやコメントなどの提案を受けることができます。前回記事ではタブキーを押して提案をすべて受け入れていましたが、Ctrl + →キーを押すと提案を部分的に受け入れることができます。
別の提案を表示する操作
GitHub Copilotの提案内容が受け入れられない場合、別の提案をさせることができます。Alt + ]キーを押すと次の提案、Alt + [キーを押すと前の提案を表示できます。
また、Ctrl + 改行キーを押すと、コードエディターとは別のタブに複数の提案が表示され、受け入れる提案を選択できます。
命令や対話を開始するショートカットキー
GitHub Copilotへの命令や、Copilot Chatとの対話で利用するテキストボックスは、表示箇所が異なる複数パターンが利用できます。それぞれを表示するショートカットキーを表1に示します(No.1と2は前回記事でも利用しました)。
| No. | ショートカットキー | テキストボックスの表示個所 |
|---|---|---|
| 1 | Ctrl + I | カーソルのある場所 |
| 2 | Ctrl + Alt + I | 画面左側のサイドバー |
| 3 | Ctrl + Shift + I | 画面上部のコマンドパレット |
No.1はインラインチャットと呼ばれ、カーソルがある場所を操作対象とする場合に利用します。コードエディターにカーソルがある場合は、カーソルの場所に実装を追加するといった命令ができます。
また、ターミナルにカーソルがある場合は、ターミナルのコマンドに関して命令や質問ができます。図6では、ファイルのSHA-256ハッシュを求めるコマンドを質問しています。回答で提案されたコマンドは、「挿入」ボタンでターミナルに入力したり、「実行」ボタンでそのまま実行したりできます。
No.2はVSCode画面左側のサイドバーにチャット専用の画面を表示します。比較的長い回答を表示したり、複数回のやり取りを行う場合に便利です。アクティビティバーのチャットボタンをクリックすることでも同じ画面を表示できます。
No.3はクイックチャットと呼ばれ、画面上部のコマンドパレット部でチャットができます。サイドバーにチャット画面を表示するほどでもない質問を素早く行う際に便利です。
命令や対話時に利用できるコマンド
GitHub Copilotへの命令や、Copilot Chatとの対話には自然言語(英語や日本語)が利用できますが、典型的な操作については専用のコマンドが用意されています。例えばリスト1のコマンドは、コードエディターで選択されたソースコードについて説明を表示するコマンドです。
@workspace /explain #selection
図9は、リスト1のコマンドで、サンプルコード(p001-react)のsrc/main.tsxに記述された、Reactの初期化処理を説明させた様子です。
リスト1のコマンドは、表2に示す各要素から構成されています。
| No. | 記述 | 意味 |
|---|---|---|
| 1 | @workspace | コマンド処理の参照先 |
| 2 | /explain | コマンドの本体 |
| 3 | #selection | チャット変数(コマンドの処理対象) |
表2のNo.1はコマンドを実行する際の参照先を指定するもので、表3の内容が指定できます。詳細は公式ドキュメントも参照してください。なお公式ドキュメントでは「Chat participants」と呼ばれています。
| No. | 記述 | 意味 |
|---|---|---|
| 1 | @workspace | ワークスペース(ソースコードを含むフォルダー) |
| 2 | @terminal | ターミナル |
| 3 | @vscode | VSCode自体 |
表2のNo.2に対応する主なコマンドは表4の通りです。すべてのリストは公式ドキュメントに列挙されています。なお公式ドキュメントでは「Slash commands」と呼ばれています。
| No. | 記述 | 意味 |
|---|---|---|
| 1 | /explain | 説明を表示 |
| 2 | /tests | 単体テストの生成 |
| 3 | /help | コマンドに関するヘルプを表示 |
表2のNo.3に対応する主なチャット変数は表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で記述したいとします。
function doloop() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
}
この場合、リスト2の範囲を選択して「Pythonではどう書くか」と質問すると、図10の通り回答してくれます。
図10で回答されたコードはリスト3の通りです。
def do_loop():
for i in range(10):
print(i)
テンプレートや定型処理を生成してもらう
サンプルコードの実行から一歩進んで自分でコードを書き始める時、最初に何を書いてよいかわからないことがしばしばあります。またファイル読み込みなど、ある程度記述方法が決まっている処理でも、慣れない言語では迷いがちです。そんな場合もGitHub Copilotに命令してコードを生成できます。例えば、新規コードエディターでインラインチャットを開いて「Pythonのテンプレート」と入力すると、リスト4の内容が生成されます。
def main():
# Your code here
if __name__ == "__main__":
main()
またリスト4の「Your code here」直下でインラインチャットを開いて「ファイルを読み込み」と入力すると、ファイル読み込み処理をリスト5の通り生成してくれます。
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の通り回答がもらえ、さらに次の操作へ誘導するボタンも表示されます。
