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

「GitHub Copilot」入門 第2回

GitHub Copilotのシーン別活用法：開発作業編

　次に、実際に現場で開発作業に従事しているシーンを想定して、GitHub Copilotの機能を活用してみます。

既存と類似した実装を生成してもらう

　開発作業では、既存の実装と類似した実装を追加することがしばしばあります。この場合、GitHub Copilotの機能で実装を自動化できます。例として、リスト6のPhoneクラスを考えます。このクラスはJavaScriptで記述されており、スマートフォンの機種名（modelName）と価格（price）を保持します。modelNameとpriceの初期値を受け取るコンストラクターと、値を取得するgetModelName、getPriceメソッドを備えています。

［リスト6］スマートフォン情報を保持するPhoneクラスの実装（p003-dev/Phone.js）

class Phone {
    constructor(modelName, price) {
        this.modelName = modelName;
        this.price = price;
    }
    getModelName() {
        return `modelName: ${this.modelName}`;
    }
    getPrice() {
        return `price: ${this.price}`;
    }
}
module.exports = Phone;

　このクラスに重量（weight）を追加することを考えます。まずコンストラクターの引数で初期値を受け取る処理が必要ですが、コンストラクターに引数weightを追加後、this.priceの次の行に空行を入れると「this.weight = weight」という実装が提案されます。

図12 コンストラクターでweightの初期化処理が提案される（p003-dev/Phone.js）

　次にweightを取得するgetWeightメソッドを実装する意図で、getPriceメソッドの下に空行を入れると、既存のgetModelName／getPriceメソッドと類似した内容で、getWeightメソッドの実装が提案されます。

図13 getWeightメソッドの内容が提案される（p003-dev/Phone.js）

　このように、GitHub Copilotがプログラマーの意図を先読みして、既存の実装と類似した内容を提案してくるので、キー入力の手間を大幅に削減できます。

単体テストを作ってもらう

　Copilot Chatの「/test」コマンドを利用すると、処理内容に対応する単体テストを自動生成できます。例として、スマートフォンのメーカー名を受け取ってブランドを返却するリスト7のgetPhoneBrand関数を考えます。この関数は引数が「Apple」ならば「iPhone」、「Samsung」ならば「Galaxy」、それ以外ならば「Unknown」を返却します。

［リスト7］スマートフォンのブランドを取得するgetPhoneBrand関数（p003-dev/getPhoneBrand.js）

function getPhoneBrand(name) {
    if (name === 'Apple') {
        return 'iPhone';
    } else if (name === 'Samsung') {
        return 'Galaxy';
    } else {
        return 'Unknown';
    }
}
module.exports = getPhoneBrand;

　リスト7のコードに対応する単体テストを生成させるには、リスト7をアクティブなコードエディターに表示して「@workspace /tests #editor」と実行します。単体テストコードを図14の通り提案してくれます。

図14 単体テストコードを提案してもらう様子（p003-dev/getPhoneBrand.js）

　提案された単体テストはリスト8の通りです。引数が「Apple」、「Samsung」、それ以外のそれぞれの場合に、getPhoneBrand関数が想定した結果を返却するかをテストする内容になっています。

［リスト8］getPhoneBrand関数の単体テスト（p003-dev/getPhoneBrand.test.js）

const getPhoneBrand = require('./getPhoneBrand');

test('returns iPhone when the brand is Apple', () => {
    expect(getPhoneBrand('Apple')).toBe('iPhone');
});

test('returns Galaxy when the brand is Samsung', () => {
    expect(getPhoneBrand('Samsung')).toBe('Galaxy');
});

test('returns Unknown when the brand is neither Apple nor Samsung', () => {
    expect(getPhoneBrand('Nokia')).toBe('Unknown');
});

　リスト8の単体テストを実行する方法を質問すると、図15の通り、テスト用フレームワークのJestをインストールして設定する方法、実行するコマンドまでを教えてくれます。

図15 単体テストコードの実行方法を教えてもらう様子（p003-dev/getPhoneBrand.test.js）

　指示に従い単体テストを実行すると、図16の通りテストが実行されます。

図16 単体テストの実行結果（p003-dev/getPhoneBrand.test.js）

　なお、単体テストを実行後、Copilot Chatで「@terminal /explain #terminalLastCommand」と実行すると、直前に実行したコマンド（「npm test」）について説明してもらえ、すべてのテストがパスしたことを確認できます。

図17 単体テストの実行結果を説明してもらう様子（p003-dev）

コメントやドキュメントを書いてもらう

　ソースコードに対応するコメントを提案させる機能は前回記事で説明しましたが、コメント以外にも、GitHub Copilotにドキュメントを生成させることもできます。図18はMITライセンスのライセンス文を生成させた例です。ただしGitHub Copilotに生成させたドキュメントは、必ず人間が妥当性を確認する必要がある点に注意してください。

図18 MITライセンスのライセンス文を生成してもらう様子

まとめ

　本記事では「GitHub Copilot」について、キーボードショートカットやコマンドといった、より細かく操作できる方法を説明するとともに、プログラミングのシーン別にさまざまな利用方法を紹介しました。次回は、クライアント側にReact、サーバー側にNode.js（Express）を利用した簡単なWebアプリを題材に、GitHub Copilotに全面的に頼ったアプリの開発事例を紹介します。

参考資料

• GitHub Copilot
• GitHub