Copilot Chatを活用した効率的なコーディング

以前こちらの記事でVS CodeでGitHub Copilotを使うための方法をご紹介しました。 www.hanatare-papa.jp

前回の記事では、コメントの内容を元にGitHub Copilotにコードを保管してもらう方法に触れましたが、今回はもう少し掘り下げていきたいと思います。

記事のポイント

Copilot Chatは対話形式でコードの相談が可能
/explainや/fixなどのコマンドで作業を自動化する
@workspaceでプロジェクト全体の文脈を伝える
#fileで特定ファイルを指定しCopilotの回答精度を上げる

「スラッシュコマンド」を使う
@workspaceをつけて、全体の指針を軸にする
まとめ

「スラッシュコマンド」を使う

Copilot Chatで毎回で「～をしてください」とチャットを入力するのは手間です。そこで「スラッシュコマンド」を使ってよく使う機能を呼び出すことが可能です。

/explain：コードを解読

他の人が書いたコードや、昔に自分が書いたコードが何をしているのかを解析にしたことはないでしょうか？人のコードを読むことは非常に勉強になるのですが、障害時など緊急を要するときなど、少しでも早く内容を把握したいという時は、この方法がとても有効です。

使い方

解読したいコード範囲選択して、チャットで「/explain」と入力します。

以下のソースの「const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));」の部分を選択します。

// 2つの日付を受け取って、その間の日数を計算する関数
function calculateDaysBetweenDates(begin, end) {
    const beginDate = new Date(begin);
    const endDate = new Date(end);
    const diffTime = Math.abs(endDate - beginDate);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
}

結果は、以下のように返してくれます。

例えば、上記ソース全体を選択してチャットした場合は以下のような結果を返してくれます。

/tests：テストコードを自動生成する

プログラムとテストはかならず対で行われます。その時テストコードを書ければいいのですが、テストコードを書く時間が足りないなどの理由で、書くことをあきらめてしまうケースもあるかと思います。そんな時は、是非1度この方法を試してみてください。

使い方

ソースコードは先ほどのexplainと同じソースコードを使います。その上で関数全体を選択して/testsを実行します。

実行すると以下のようにテストフレームワークの提案をしてくれます。今回はjestを選択しました。

jestをセットアップするための手順を提示してくれます。今回は変更の適用とjestのインストール・テスト実行のコマンドを実行しました。

そうすると、Copilotが一般的なテストフレームワーク（Jestなど）を使ったテストコード一式を提案してくれます。正常系だけでなく、同じ日付を指定した場合などの境界値（エッジケース）も提案をしてくれています。

ちなみに、今回のCopilotが提案してくれたソースコードは実行するとエラーとなります。あくまで提案ということを認識し、そのまま使うのではなく考え方やソースコードの作り方の参考として情報を出してくれる程度というのが今のレベルという感じでしょうか。

補足：エラー理由

「calculateDaysBetweenDates(begin, end)」関数は、2つの引数 begin と end を両方とも日付として解釈し、その間の日数を数値で返そうとしています。それに対してテストコードの方は、第2引数で「10」を渡しており、この「10」という数字は、1970年1月1日 0時0分0秒から10ミリ秒後という意図しない日付が生成されることになります。その結果、「2023年1月1日」と「1970年1月1日（+10ミリ秒）」の間の日数を計算し、19358 という巨大な数値を返すことになります。テストのアサーション expect(19358).toEqual(new Date('2023-01-11')) は、「数値の 19358」と「日付オブジェクト」を比較することになり、当然ながら一致しないため、テストは失敗します。

/fix：バグを見つけて修正する

開発していれば必ず不具合に直面します。うまくソースコードが動かず何時間も悩むという経験をされた方も多いのではないでしょうか。そんな時は、そんな時は、問題のありそうなコードを選択して /fix を試してみてください。

使いかた

コードを選択して、/fixとコマンドを入力するだけです。

ソースコードは今回は以下を使っています。

// 2つの日付を受け取って、その間の日数を計算する関数
function calculateDaysBetweenDates(begin, end) {
    const beginDate = new Date(begin);
    const endDate = new Date(end);
    const diffTime = Math.abs(endDate - beginDate);
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
}

export { calculateDaysBetweenDates };

結果は以下の通りです。修正内容が画面下部に記載されており、日付のみを比較できるように修正を加えたソースコードを提示してくれます。

/doc：ドキュメントを自動生成する

ソースコードは他人から見られることが前提です。そのためソースコードに適切なコメントをつけることは重要なことです。/docコマンドは関数の説明コメント（JSDocやPython Docstringsなど）を自動で生成してくれます。

使い方

関数を選択して /doc を実行するだけで、引数や返り値の説明が記述されたコメントブロックが追加されます。

先ほどのfixコマンドの時のソースに対して/docを実行した結果が以下です。

@workspaceをつけて、全体の指針を軸にする

先ほどの「スラッシュ」コマンドは単一のファイル内で完結するコマンドでした。しかし、実際の開発では複数のファイルが存在、相互に機能連携をしています。そのため、単一のソースだけで解決できない問題や、コンテキストが必要になってきます。

その時に利用できるのが「@workspace」です。「スラッシュ」コマンドの前などチャットの先頭に@workspaceをつけるとCopilotは開いている単一のファイルだけでなく、プロジェクトフォルダ全体をスキャンして質問に答えてくれるようになります。

実践してみる

スラッシュコマンド以外にも使い方はあるので、その方法を実践してみたいと思います。

@workspace このプロジェクトの全体像を教えてください。

プロジェクトの目的や技術スタックを要約してくれます。これは、プロジェクトの参画時などに実行すると非常に有効ではないでしょうか？

@workspace テストに関するファイルはどれですか？

特定の目的がある場合は、そのことを指定すれば、該当のファイルをリストアップしてくれます。

@workspace "calculateDaysBetweenDates" という関数は、どのファイルで使われていますか？

これは、関数が呼び出されている場所をすべて探し出してくれます。影響調査などをする場合など、利用可箇所を特定するのにとても参考になります。

#file変数で精度を上げる

@workspaceはプロジェクト全体を把握するのに最適ですが、時には特定ファイルだけを参考にしてほしい場合があります。そんな時は「#file変数」です。

「#file変数」を使うとCopilotの注意を特定のファイルにピンポイントで向けることができます。

実践方法

「@workspace #file:calcDate.js と #file:calcDate.test.js を参考にして、プログラムの修正点を洗い出してください。」

「#file:ファイル名」というようにファイルを指定します。

このように指示することで、Copilotは他の無関係なファイルに惑わされることなく、指定された2つのファイルの関係性だけを深く理解して、最適な修正案を提案してくれます。

まとめ

今回はVS CodeでCopilotを使う際にただのチャット機能として使うのでなく、より効率的に指示だしができるTipsをご紹介しました。生成AIが返す回答は必ずしも正確というわけではありませんが、参考にすることで開発効率を非常に上げられると思います。今回紹介したTipsを使い、より生産性をあげつつ、品質の高い開発が進めていければと思います。今回の記事がCopilotを使う方の参考になっていれば幸いです。