【GitHub Copilot Chat を先取り!?】 Code Brushes の CUSTOM ブラシでチャットをするようにコードを修正してもらう

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、Code Brushes の CUSTOM ブラシを利用してチャットをするようにコードを修正してもらう方法を紹介します。

Code Brushes とは

Code Brushes は、「ブラシでペイントをするように」コードの修正を AI が自動で行ってくれる機能で、GitHub Next の1プロジェクトとなります。

Code Brushes は、現在は GitHub Copilot Labs Visual Studio Code Extension を導入することにより USABLE PROTOTYPE として利用できます。（GitHub Copilot Labs を利用すると GitHub Copilot の実験的な機能や新規追加予定の機能を GitHub Copilot のコンパニオン拡張としていち早く試すことができます。）

Code Brushes で利用できるブラシ機能は、下記の10種類となります。

GitHub Copilot Labs Visual Studio Code Extension でのブラシ機能一覧の様子

それぞれのブラシの詳しい使い方については以下の記事が参考になるのでご覧ください。

• GitHub Copilot Labsを使ってみた - Qiita
• GitHub Copilot Labsが最強すぎる

このうち、「CUSTOM」ブラシを利用することにより、まるで ChatGPT とチャットをするようにコードを修正することができたのでご紹介します。

CUSTOM ブラシの利用例

下記のコードに対して CUSTOM ブラシを試してみます。AWS Lambda 関数のハンドラーのコードになります。event データのpathParameters.book_idの値を取得して statusCode 200 として Return する処理を TypeScript で記述しています。

lib/cdk-sample-app.hogeFunc.ts

interface Event {
  pathParameters?: {
    book_id: string;
  };
}

export const handler = async (
  event: Event
): Promise<{ statusCode: number; body?: string }> => {
  console.log(JSON.stringify(event, undefined, 2));

  const path = event.pathParameters;

  const book_id = path?.book_id!;

  return {
    statusCode: 200,
    body: JSON.stringify({ book_id }),
  };
};

エディター上で Brushes を適用したいコード範囲を選択して、[CUSTOM]をクリックします。

入力プロンプトが表示されます。

このプロンプトに指示を入力して Enter を押下すれば Code Brushes によるコードの修正が行われます。この修正は必要に応じて「新規行の追記」や「既存行の修正」により行われます。

新規行の追記

まず、book_id が undefined の時にエラーを返すようにして下さいと指示してみます。

結構あいまいな指示をしたつもりでしたが、新規行として処理が追記されました。

lib/cdk-sample-app.hogeFunc.ts

export const handler = async (
  event: Event
): Promise<{ statusCode: number; body?: string }> => {
  console.log(JSON.stringify(event, undefined, 2));

  const path = event.pathParameters;

  const book_id = path?.book_id!;

  if (book_id === undefined) {
    return {
      statusCode: 400,
      body: JSON.stringify({
        message: 'book_id is required',
      }),
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ book_id }),
  };
};

ステータスコードも 400 と適切でほとんどそのまま利用できそうな記述です。

既存行の修正

次にbook_id がnullの場合にも 400 を返すようにしてと指示してみます。

すると今度は指示の通りに既存行が修正されました。（ただし14行目で修正後のコードでは不要な非nullアサーション演算子が残っているのでこれは手動削除する必要がありました）

lib/cdk-sample-app.hogeFunc.ts

export const handler = async (
  event: Event
): Promise<{ statusCode: number; body?: string }> => {
  console.log(JSON.stringify(event, undefined, 2));

  const path = event.pathParameters;

  const book_id = path?.book_id!;

  if (book_id === undefined || book_id === null) {
    return {
      statusCode: 400,
      body: JSON.stringify({
        message: 'book_id is required',
      }),
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ book_id }),
  };
};

このように、コード中にコメントを書いてコードを生成したり、入力中のサジェストに頼るのではなく、入力プロンプトを利用してまるでチャットをするようにコードを修正することができました。

おわりに

Code Brushes の CUSTOM ブラシを利用してチャットをするようにコードを修正してもらう方法を紹介しました。

先月に GitHub Copilot X と合わせて GitHub Copilot Chat が発表されましたが、この CUSTOM ブラシはその GitHub Copilot Chat に近い開発エクスペリエンスを先取りして体験できる機能だと個人的には思っています。

現在提供中の GitHub Copilot の機能の中でも非常に実用的な機能の1つではないでしょうか。

参考

• 【GitHub Copilotは序章に過ぎない!?】GitHub Next、次世代の開発エクスペリエンスを実現する圧倒的なプロジェクト群 | DevelopersIO
• 【忘れず登録しておこう！】GitHub Copilot X および GitHub Next の Waitlist 公開中プロジェクトまとめ | DevelopersIO

以上