GitHub社（公式）が提供するGitHub Copilotベストプラクティス集！

この記事ではGitHub Copilotを導入したものの、いまいち使いこなせていない方に向けて効率を劇的に上げる使い方の基本テクニックを紹介します。

GItHub Copilotとは

リンクをコピーしました

GitHub CopilotはGitHubが提供しているAIを使ったプログラミングの支援ツールです。
GitHub Copilotを導入することで、開発効率を劇的に向上させることができます。
導入方法や基本的な使い方についてはこちらの記事を参照してください。

実践的な使い方

リンクをコピーしました

GitHub Copilotを導入することで、コードの補完、関数の提案、コメントからコードの自動生成などをAIが行ってくれます。これだけでも効率がアップしますが、最大限に活用するにはコツがあります。この章ではGitHub Copilotのベストプラクティスについて紹介します。

関連ファイルを開いておく

リンクをコピーしました

GitHub Copilotから最適な提案を得るには関連ファイルを開いておくことが重要になります。ファイルが閉じられていると、Copilotはエディターでファイルの内容を確認できないため、提案の精度が下がってしまう可能性があります。

以下の画像のようにチャットで質問したい対象のファイル（例： users_controller.rb）を開いてから質問するようにしましょう。

以下は何もファイルを開かずに質問した時の例です。

提案のコードで2つのメソッドが作成されていますが、実際のファイルを見るとすでに定義されているメソッドで、提案のレベルが低いことがわかります。
次は提案するファイルを開いて質問した時の例です。

すると自動で開いているファイルが参照され、提案のコードも先ほどとは異なり、精度が上がっているのが確認できます。
このように、特定のファイルに対して質問をする際は対象となるファイルを開いた状態で質問をすることが重要です。

ただし、ファイルを開いていてもそのファイル内のコード全てが参照されるわけではなく、VSCodeで表示されているコードのみが参照されます。
上の画像は21行目から68行目のコードまでが確認できますが、それ以外のコードは表示されていません。ですので参照したファイル名の横に21-68となっているのが確認できます。

そのため、ファイルを開いておくだけでなく、参照してもらいたいコードを表示した状態で質問しましょう。

ファイル全体を参照させたい場合は、最後の方で解説するファイルの添付機能を使います。

トップレベルのコメントを記入する

リンクをコピーしました

作業中のファイルの最初に、ファイルの全体的な説明や概要をコメントしておくことで、GitHub Copilotはそのファイルが何を意図しているのか、どのようなコードが期待されているのかをより明確に理解することができます。コメントを書いておくことで、より適切なコードの提案を行なってくれます。

例えば、新たにJavaScriptのコードを作成する場合、そのファイルの先頭にどういう内容のコードを実装するかという具体的なコメントを追加します。これにより、Copilotはそのファイルで何を達成しようとしているのかを理解し、初期コードを生成する際にそのコンテキストを考慮した提案を行います。

以下はアクション作成時にコメントアウトを書かなかった時の例です。

次は以下のトップレベルのコメントを記述した時の例です。

1
2
# このコントローラは、ユーザー管理機能を提供します。
# `index`アクションは、アクティブなユーザーのみを取得し、それらを作成日時順に並べ替えて表示するために使用されます。

するとコメントした内容を反映したコードを提案してもらえました。
このようにトップレベルのコメントを書いておくことで、自分が意図するコードを提案してもらいやすくなります。

インクルードと参照を設定する

リンクをコピーしました

GitHub Copilotは、プロジェクトに必要なパッケージやモジュールを推測してコード提案を行いますが、特定のバージョンや特定のライブラリを使用したい場合は、それらを手動で設定することでより適切な提案をしてもらえるようになります。

プロジェクトで使用しているライブラリやフレームワークを事前に指定することで、Copilotはそれに基づいたコード提案を行います。例えば、新しいバージョンのライブラリを使用している場合、Copilotが古いバージョンのコードを提案してしまうことがありますが、手動でインクルードや参照を設定することで、この問題を回避できます。

例えばRailsの最新バージョン（例：Rails 7）を使っているが、Copilotが古いバージョン（例: Rails 5）のコードスタイルを提案してくることがあります。このようなことを防ぐためにもバージョンを指定しているファイル(例：Gemfile）を参照させたり、プロンプト内でバージョンを指定したりすると、そのバージョンに基づいたコードを提案してくれます

意味のある名前の重要性

リンクをコピーしました

コードを書く際に、変数や関数に意味のある名前を付けることは、コードの可読性を高めるだけでなく、GitHub Copilotがあなたの意図を正確に理解し、適切なコードを提案するために非常に重要です。例えば、fooやbarといった一般的な名前では、Copilotはその関数や変数が何をするものかを理解しづらく、精度の低い提案が行われる可能性があります。

例えば以下のRubyのコードがあります。

1
2
3
def foo(x)
  return x * 2
end

この場合、fooというメソッド名では何をする関数かがわかりません。Copilotが次にどんなコードを提案すべきかを判断するのが難しくなります。

以下のように意味のある名前にします。

1
2
3
def doubleValue(number)
  return number * 2
end

doubleValueという名前は、このメソッドが何をするかを明確に示しており、Copilotはこのメソッドが何のために使われるかを理解しやすくなります。

次のJavaScriptの例を見てみましょう。

1
2
3
function process(data) {
  // 処理内容
}

この例の場合、processという関数名は非常に曖昧で、何を処理するのかが分かりません。

以下のように具体的な名前にします。

1
2
3
function processOrder(orderData) {
  // 注文データを処理する
}

processOrderという名前は、この関数が注文データを処理するためのものであることを明確に示しています。これにより、Copilotは次にどんなコードを提案すべきかを理解しやすくなります。

次は名前の違うメソッドを実際に定義してもらった時の例です。
まずはdo_somethingという意味のない名前で作成してもらいます。

このように自分が意図しないコードが提案されました。
次はcalculate_user_ageのようにメソッド内のコードが推測しやすい名前で作成してもらいます。

するとメソッド名にあった内容のコードが提案されました。

適切なコードを提案してもらうには、しっかりと意味ある名前をつけることを心がけておきましょう。

関数コメントの重要性

リンクをコピーしました

関数名だけでは、その関数が何をするかを完全に説明することは難しい場合があります。そのため、関数の目的や動作、引数や返り値について、具体的で詳細なコメントを提供することが重要です。これにより、GitHub Copilotがその関数の意図をより正確に理解し、適切なコード提案を行うことができます。

まずは悪い例を見てみましょう。

1
2
3
4
function fetchData(url) {
    // データを取得する
    return fetch(url);
}

このコメントは非常に一般的で、具体的な情報が不足しています。

次に良い例です。

1
2
3
4
5
6
7
8
9
10
/**
 * 指定されたURLからデータをフェッチしてJSONとして返す。
 *
 * @param {string} url - データを取得するためのAPIエンドポイント。
 * @returns {Promise<object>} APIから取得したデータのJSONオブジェクト。
 */
function fetchData(url) {
    return fetch(url)
        .then(response => response.json());
}

この例では、関数が何をするのか、入力として何が必要で、何を返すのかが明確に説明されています。これにより、Copilotはこの関数に関連する操作や使用方法について、より適切な提案を行うことができます。

関数のコメントではこのように@paramに引数の型と名前を、@returnに関数の返り値の型を指定します。
また、コメントを付けることは、チームメンバーや将来の自分がコードを理解しやすくする上でも大事なことなので、意識しておきましょう。

サンプルコードを提供する

リンクをコピーしました

サンプルコードを提供することで、GitHub Copilotはタスクの具体的な文脈や意図を理解しやすくなります。これにより、Copilotが生成するコード提案が、自分のニーズによりマッチしたものになります。

次の例では実際にサンプルコードを提供した時としない時の比較です。

■サンプルコードなし

■サンプルコードあり

以下の画像のように同じ質問をしても、サンプルコードを提供することでCopilotがプロジェクトに特化した提案を行い、より精度の高いコードが生成されることが確認できます。これにより、開発の効率が向上し、プロジェクトのコーディングスタイルに合わせた提案を受けることができます。

インラインチャットの利用

リンクをコピーしました

GitHub Copilotにはコードの合間でチャットとができるインラインチャット機能があります。この機能を使うことで、別のウィンドウやツールに切り替えることなく、コードを書きながら効率的にCopilotの支援を受けることができます。

インラインチャットを使用するには、通常はcommandキー + i（WindowsではCTRL + i）というショートカットキーを使用します。このキーを押すと、Copilotがすぐにチャットインターフェースを開き、質問やリクエストに応じたコード提案を行います。インラインチャットなのでiと覚えておきましょう。

例えば通常のチャット欄で質問をするとチャット欄にコードの提案がされます。

提案されたコードを使いたければ「同意する」をクリックするとファイルにコードが反映されます。反映させたくない場合は「破棄」をクリックします。

また以下のように提案してもらいたいコードのブロック内にカーソルを置いてインラインチャットを開いて、ピンポイントにコードの提案・反映をすることもできます。

インラインチャットを使うとすぐにコードを反映させることができたり、チャットのサイドパネルを開くよりも手早くコードの提案や修正ができるので大変便利です。

不要なリクエストの削除

リンクをコピーしました

Copilot Chatでは、過去に送信したリクエストや質問がチャット履歴に残りますが、これらが多すぎると会話が混乱しやすくなります。特に、以前の質問やリクエストがすでに解決済みで、現在の作業に関係なくなった場合、それが残っているとCopilotが提供する提案が分散してしまう可能性があります。

不要なリクエストを削除することで、チャットの履歴が整理され、Copilotが最新の状況や現在のニーズに集中して応答できるようになります。これにより、より正確で関連性の高い提案を得ることができます。

リクエストを削除するには、削除したいリクエストにホバーし、表示される「x」をクリックします。削除することで、会話の流れが改善され、GitHub Copilotに提供される情報が、最適な出力を提供するために必要なものに絞られます。

このようにリクエストだけでなく、それに対する会話も一緒に削除されます。

例えば、数日前に送信した質問がすでに解決しており、今後の会話に影響を与えたくない場合、その質問を削除することで、新しい機能の実装に集中できます。また、過去の不要なリクエストを削除し、現在の作業に関連する情報だけを残すことで、より効果的に作業を進めることができます。

会話の履歴の活用

リンクをコピーしました

GitHub Copilot Chatでのやり取りは、すべてチャットの履歴として保存されます。これにより、以前に行った質問やリクエスト、そしてそれに対するCopilotの提案を後で確認することができます。

また、Copilot Chatでは、ターミナルのように上下の矢印キーを使ってチャット履歴を簡単に遡ることができます。これにより、マウスを使わずに過去のメッセージに素早くアクセスでき、以前のやり取りを確認したり、再利用することができます。

GitHub Copilot Chatの履歴を効果的にナビゲートすることで、過去の会話や提案を簡単に再確認したり、再利用したりすることができます。キーボードショートカットを活用することで、時間を節約し、作業の流れを中断せずに進めることができます。

@workspaceエージェントを使う

リンクをコピーしました

@workspaceエージェントは、Visual Studio CodeのようなIDEで、ワークスペース全体を把握する機能です。これにより、プロジェクト内のすべてのファイルやディレクトリにアクセスし、その情報を基に提案を行うことができます。Visual Studio Codeを開く際に指定したディレクトリがワークスペースの対象範囲になります。

通常のチャットでは、開いているファイルや添付したファイルに基づいて提案が行われますが、@workspaceエージェントを使うと、ワークスペース全体のコードを考慮した提案が得られます。

以下のように質問の前に@workspaceをつけて使用します。

また、@workspaceをつけなくても送信ボタン横の矢印をクリックすると表示される、「@workspaceに送信」を選択して送信すると自動で@workspaceがついた状態で質問をしてくれます。

もしくは画像にあるようにcommandキーを押しながらエンターキーを押してプロンプトを送信しても同じことができます。

@workspaceをつけて質問するとワークスペース全体の解析が始まり、質問に関連するファイルを自動で参照してくれます。

今回の例では以下のように4つのファイルを自動で参照し、提案してくれました。

参照されたファイルをクリックするとそのファイルを表示させることができます。

@workspaceを付けた時とと付けない時とでどれくらい提案が変わるのか確認してみます。
下の画像のように@workspaceを付けたときは関連付けされたファイルを参照しているため、付けていない時よりも詳しく提案されているのがわかります。

ChatGPTなどのAIではワークスペース全体を考慮した提案はされないため、GitHub Copilot Chatで@workspaceを使って質問できるのは、大きなメリットになります。

関連するコードをハイライトする

リンクをコピーしました

質問する前にファイル内の関連コードをハイライトすることで、Copilotはそのコードブロックの文脈を深く理解し、関連する提案を行うことができます。例えば、特定の関数やメソッドに関する質問をする際に、その部分をハイライトしておくと、Copilotはそのコードに基づいて具体的な提案をしてくれます。

下の例のように、コードをドラッグしてハイライト状態にしてから質問すると、コード全体ではなく、ハイライトにしたコードを参照してより的確な回答をしてくれます。

ハイライトをしない場合はファイルの広い範囲を参照して提案を行なっています。

ハイライトをすると、ハイライトした部分のみ参照し、提案が行われます。

ハイライトをしない場合とした場合を比較すると、ハイライトをした方が特定のコードの箇所についてピンポイントで解説してくれることがわかります。

ハイライト機能を活用することで、リファクタリングやデバッグ、最適化といった作業を効率的に進められるようになります。特定のコードに対して具体的なリクエストを行う際は、そのコードをハイライトすることで、より適切な結果を得ることができます。

スレッドで会話を整理する

リンクをコピーしました

スレッドとは、特定のトピックやタスクに関する会話を個別に整理するための機能です。
スレッドを使用して会話を分離することで、複数の異なる会話が混ざり合うことを防ぎ、それぞれのトピックに集中してやり取りを行うことができます。

下の画像の「+」ボタンを押すと新しい会話を始めることができます。

別の会話に戻りたいときは時計アイコンをクリックします。

クリックすると過去の会話の一覧が表示されるので、戻りたい会話を選択するとスレッドを変更することができます。

会話一覧の右側には3つのアイコンが表示されます。一番左のペンのアイコンをクリックすると会話に名前をつけることができます。

真ん中のファイルのアイコンをクリックするとエディターにチャットを表示させることができ、タブで会話の切り替えもすることができます。

また、一番右の「x」をクリックすると会話を削除することができます。

スレッド機能は、例えば新機能の実装と既存のバグ修正を同時に進めている場合などに便利です。
スレッドを活用することで、GitHub Copilot Chatでの会話を効率的に整理し、複数のトピックやタスクを混乱することなく管理することができます。スレッドごとに会話を整理することで、プロジェクトの進行状況を追跡しやすくなり、必要な情報を迅速に見つけることができるでしょう。

スラッシュコマンドの活用

リンクをコピーしました

スラッシュコマンドは、/から始まる特定のキーワードを入力することで、Copilot Chatに対して迅速に特定のアクションを依頼できるショートカットコマンドです。これにより、通常ならば手動で行う作業を簡単に実行することができます。

よく使われるコマンドとして以下のものがあります。
具体的な使い方はこちらの記事を参照してください。

添付ファイルの重要性

リンクをコピーしました

GitHub Copilot Chatでコードに関する質問やリクエストを行う際、関連するファイルを参照として添付すると、Copilotはそのファイルの内容を基に、より適切な提案を提供できます。これにより、提案の精度が向上し、開発作業を効率的に進めることができます。

下の画像のようにチャット欄の「クリップ」アイコンをクリックすると上部に添付ファイルの検索窓が表示されます。ここから添付したいファイルを検索して選択します。ファイルは複数添付できます。

このように特定のファイルを関連づけて提案をしてもらうことで、提案の精度が向上します。

「◯参照 使用済み」の部分をクリックするとこの質問で参照したファイルを確認することができます。
この例では現在開いているファイルと添付したファイルが参照されています。

一番最初に紹介した「関連ファイルを開いておく」では開いているファイルの表示されている部分しか参照されませんが、ファイル全体や複数のファイルを参照したい場合はこの方法が便利です。

スパークルの活用

リンクをコピーしました

スパークルは、Visual Studio Codeのエディタ内で表示される、小さな輝き（アイコン）です。このスパークルが表示される場所では、GitHub Copilotが特定の提案や機能を提供できることを示しています。これにより、ユーザーはその場で便利な機能を利用することができます。

ファイル内だけでなく、ターミナルにも表示されます。
例えばコミットメッセージを書いているときにスパークルが表示されると、それをクリックすることで、Copilotがメッセージの生成を支援してくれます。

以下のようにコミットメッセージを自動で作成してくれます。

また、コードの特定の部分にスパークルが表示されることがあります。これをクリックすると、インラインチャットが開いたり、Copilotがその部分のコードに対してできることを提案してくれたりします。

スパークルは、GitHub Copilotが特定の状況で提供する特別な支援を示すエフェクトです。これを活用することで、開発作業をさらに効率化できます。スパークルをクリックすると、コミットメッセージの生成やコード修正、コメント追加がスムーズにできるため、開発のスピードがアップし、作業の負担も軽くなります。スパークルが表示されたら、どんな支援を受けられるのかを確認して、ぜひ活用してみましょう。

まとめ

リンクをコピーしました

この記事ではGitHub Copilotの知られざる使い方を紹介しました。これらを効果的に活用することで、開発作業の効率が大幅に向上します。もはやGitHub Copilotはエンジニアにとって必要不可欠なものになるでしょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ