SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「GitHub Copilot」入門

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

「GitHub Copilot」入門 第2回

GitHub Copilotの詳細な操作方法

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

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

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

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

別の提案を表示する操作

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

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

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

図4 別のタブで別の複数の提案を表示
図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 コードエディターでインラインチャットを利用する様子
図5 コードエディターでインラインチャットを利用する様子

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

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

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

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

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

図8 クイックチャットを利用する様子
図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)
図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 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に関する質問をする様子
図11 VSCodeに関する質問をする様子

次のページ
GitHub Copilotのシーン別活用法:開発作業編

この記事は参考になりましたか?

「GitHub Copilot」入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/19719 2024/06/28 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー