トップ > VSCode > VSCodeでGitHub Copilotを効率的に使用する方法

VSCodeでGitHub Copilotを効率的に使用する方法

VSCode GitHub Copilot

はじめまして。

映画.comでエンジニアをしている山田です。

開発チーム内では、現在、開発環境にVSCodeとGitHub Copilotの導入を進めています。この記事では、VSCode上でGitHub Copilotを効率的に使用するためのヒントを提供したいと思います。

GitHub Copilotの参照範囲

GitHub Copilotは提案作成時に、エディタで開かれているファイルおよびタブで開かれているファイルを参照します。詳細な仕様は公開されていませんが、参照可能なファイルのボリュームには限りがあるため、不要なファイルは閉じておくことが推奨されます。

マウスからの操作

VSCodeでGitHub Copilotを使用する際、以下の4つの基本的なコマンドがあります。これらはコード上で右クリックすることによりアクセス可能です。

これを説明するコードの説明を作成します。
これを修正するコードのバグやリファクタリングを提案します。
ドキュメントを生成するコードに説明コメントを埋め込みます。
テストを生成するテストコードを作成します。

これらは、チャット画面で実行可能なアクションのショートカットです。 チャット画面では、より詳細なアクションが利用可能です。これらは、/helpコマンドをチャット画面で実行することにより確認できます。

チャット画面からのアクション

@workspace: 開発者が現在作業しているワークスペースに関する情報や支援を提供します。例えば、/explain, /testsなどのアクションは、環境に即した形で、@workspace /explainのように実行されます。

@workspace下で実行されるコマンド

/explain

コードの説明を作成します。右クリックの「これを説明する」と同じ。

/tests

コードのテストを作成します。右クリックの「テストを生成」と同じ。

/fix

コードを修正します。右クリックの「これを修正する」と同じ。

/doc

コード内にドキュメントコメントを埋め込みます。右クリックの「ドキュメントを生成する」

また、上記メニューの他にマウスの右クリック時には無いアクションがあります。

マウス右クリックには無いアクション

/new

新しいワークスペースのためのスケルトンコードを提供します。

例：userモデルの作成に関する提案を受けたい場合

チャットへの入力: /new model User

GitHub Copilotからの提案:
rails generate model User name:string email:string password_digest:string

モデル作成用のコマンドが提案される。

例：userモデルからrspecのfactoryを作成する場合

チャットへの入力: /new rspec factory from user model

GitHub Copilotからの提案:

# spec/factories/users.rb
FactoryBot.define do
  factory :user do
    name { "Test User" }
    email { "test@example.com" }
    password { "password" }
    password_confirmation { "password" }
  end
end

モデルに対するテストのfactoryを作成してくれる。

/newNotebook　

新しいJupyter Notebookを作成する。

※Jupyter Notebookについてはこちらを参考にしてください。
Jupyter Notebookのオフィシャル


また、コードの提案の他に下記アクションが用意されています。

@vscode

VSCodeに関して、エディタの操作方法、ショートカットキー、設定のカスタマイズなど、VSCodeの使い方について質問できます。

例：エディタで一行消すショートカットキーを知りたい場合。

@vscode 一行消すショートカットキーは？

GitHub Copilotからの:
Delete Line コマンド (editor.action.deleteLines) を使用すると、現在の行を削除できます。このコマンドは通常、Ctrl + Shift + K キーバインドにバインドされています。

/api

VSCodeの拡張機能開発に関連するAPIや開発ヒントについて質問できます。

例: 新しいコマンドを追加する方法を知りたい場合。

チャットへの入力: @vscode /api 拡張機能に新しいコマンドを追加する方法は？

GitHub Copilotからの提案:

"commands": [
  {
    "command": "extension.sayHello",
    "title": "Hello World"
  }
]

この例では、package.jsonファイルへのコマンド追加方法についての説明と設定が提供されます。

@terminal

ターミナルで利用している、gitやdockerなどのコマンドラインツールの使用、スクリプトの実行、システムの管理タスクなどターミナルでの操作方法について質問できます。

コンテキスト変数の使用

GitHub Copilotでは、以下のように「#」記号を使用して質問に追加のコンテキストを提供できます。

#selection

エディタで選択中のテキストに提案を集中させる。

例：この選択部分について具体的に説明してください。#selection

#file

これは#fileで指定したファイルをGitHub Copilotへ読み込ませることではなく、 質問が特定のファイルに関するものである場合、そのファイルを明示することでGitHub Copilotがより具体的な提案をしやすくなります。
下記例の場合、一般的な.rubocop.ymlファイルに関する改善案を求めています。

例：#file .rubocop.ymlを改善してください。

#editor

アクティブエディタの可視コードを質問のプロンプトへ含めるかどうかを制御します。 これは、開いているエディタの内容をプロンプトに含めたい場合に使用します。

コード上で質問する方法

GitHub Copilotを使用する際、チャット画面を使用せずに、直接コードエディタ上で質問できます。

以下の方法でコード上にコメントを記述して質問します：

# q: ここに質問を記述
# a: GitHub Copilotがここに回答を提案する

コメントの書式は使用しているプログラミング言語によって異なります。例えば、Rubyでは#を使用し、JavaScriptでは//を使用します。

デモ動画は以下のURLでご覧いただけます。

Get Started with the Future of Coding: GitHub Copilot（約1分50秒から）

VSCodeでの利用できるGitHub Copilotのショートカットキー

VSCode内で直接ショートカットキーを確認するには、「Ctrl+K Ctrl+S」を押すか、「設定」メニューの「キーボードショートカット」からアクセスできます。GitHub Copilotには、効率的に作業を進めるための以下のショートカットキーが割り当てられています。

キー 機能
Tab 提案を受け入れる
Esc 提案をキャンセル
Ctrl + Enter サジェストを別画面に表示する (最大10件サジェストされる)
Ctrl + → 単語単位で提案を受け入れる
Alt + ] 次の提案を見る
Alt + [ 前の提案を見る
Ctrl + I インラインチャットを開始する
Ctrl + Alt + I カーソルをChat Viewに移す

GitHub Copilotの一時的な停止方法

VSCode内でGitHub Copilotのサジェスト機能を一時的に停止するには、右下にあるGitHub Copilotのアイコンから簡単に操作できます。特定のファイルを編集中にコード補完が不要である場合、この機能をOFFにすることで、提案の質を向上させることが可能です。

設定方法

GitHub Copilotのアイコンをクリック後に表示される画面で「Disable Completions」を選択する。

GitHub Copilot Labsの紹介

VSCodeの拡張機能であるGitHub Copilot Labsは、さらに便利な機能を提供しています。ただし、この拡張機能はまだ実験段階であり、企業レベルでの導入は難しい場合もあります。そのため、独自のショートカットを作成して、GitHub Copilot Labsと同様の機能を実効する方法を考えてみました。

VSCodeで独自のショートカットを作成する方法

VSCodeでは、ユーザー独自のショートカットを作成して特定のプロンプトを実行できます。

手順

1. 設定からキーボードショートカットを選択。

2. 画面右上のファイルアイコンからJsonを開く。

3. keybindings.jsonを編集してショートカットを作成する。

[
  {
    "key": "ctrl+e ctrl+0", // <= 設定するショートカットキー。この場合は「Ctrl + E」を押した後に「Ctrl + 0」を押すと実行される
    "command": "runCommands",
    "args": {
      "commands": [
        {
            "command": "workbench.panel.chat.view.Copilot.focus",
        },
        {
            "command": "type",
            "args": {
                "text": "Make this code more readable." // <= ここに設定したいプロンプトを入力する
            },
            "when": "inputFocus"
        },
        {
            "command": "workbench.action.chat.acceptInput",
            "when": "inChatInput && textInputFocus"
        },
        {
            "command": "workbench.action.acceptSelectedQuickOpenItem"
        }
      ]
    },
  }
]

設定プロンプト例

下記の様な文字列をプロンプトとして設定する。

設定する文字 動作
Suggest test テストを提案する
Make this code more readable コードを読みやすくする
Add Types to this code コードに型を追加する
Find a bug in this code コード内のバグを見つける
Make this code easier to debug コードをデバッグしやすくする
Clean up this code コードをクリーンアップする
Document the steps of this code コードの手順をドキュメント化する
Make this code more robust コードをより堅牢にする
Break this code into smaller chunks コードをより小さな塊に分割する
Document this code コードをドキュメント化する
Use a custom brush カスタムブラシを使用する

まとめ

GitHub Copilotの基本的なアクションやショートカットを習得することは、コード作成プロセスを大いに助け、作業効率を向上させます。しかし、提案の質をさらに向上させるためには、プロンプトエンジニアリングが鍵となるでしょう。GitHub Copilotがローカルファイルをどのように参照するかを含む、その動作の詳細がより明確になれば、コメントの効果的な書き方を含む、さらなる使い勝手の改善が期待できます。

参考


カカクコムでは、ともにサービスをつくる仲間を募集しています！

カカクコムのエンジニアリングにご興味のある方は、ぜひこちらをご覧ください！

カカクコム採用サイト