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

若槻龍太

2023.04.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、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種類となります。

ブラシ名	説明
`READABLE`	各処理にコメントを追加してコードを読みやすくする
`ADD TYPES`	コードに適切な型を追加する
`FIX BUG`	バグを修正する
`DEBUG`	変数値をコンソール出力処理を追加する
`CLEAN`	他のブラシにより追加された処理を削除する
`LIST STEPS`	コメントを追加して処理のステップを分かりやすくする
`MAKE ROBUST`	処理を堅牢化する
`CHUNK`	処理を分割する
`DOCUMENT`	ドキュメントを追加する
`CUSTOM`	ユーザーが指定した修正を実施する

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

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

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

CUSTOM ブラシの利用例

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

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 の時にエラーを返すようにして下さいと指示してみます。

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

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アサーション演算子が残っているのでこれは手動削除する必要がありました）

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 }),
  };
};

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