GitHub Copilot の「Copilot Edits」で直接の部分的なコード書きかえを行ってもらう（機能の有効化の話も）【GitHub dockyard】

この記事は後から、「GitHub dockyard Advent Calendar 2024」の 3日目の記事としても登録しました（投稿していたのは 11月中）。

はじめに

日本語のニュースだと、以下で出ていた GitHub Copilot の「Copilot Edits」の話です。

●GitHub Copilotが大幅アップデートを発表。Copilot EditsがもはやCursor
　https://smooz.cloud/news/column/github-copilot-update/

これを、適当な JavaScript のプログラムで試してみた話を記事にしました。
試した内容は「文章で指示した内容をもとに、GitHub Copilot にコードの直接の書きかえ（部分的な修正）を VSCode上で行ってもらう」というものです。

具体的に、部分的な修正が行われた時の状態や一連の流れは、↓このような感じのものになります。

また、その書きかえを実行した話の前に、「Copilot Edits」を有効化する設定項目についても記載しておきます。

「Copilot Edits」の公式情報

まずは、公式が出している「Copilot Edits」の情報を掲載してみます。
公式情報は、例えば以下のものが該当しそうです。

●Multi-file editing, code review, custom instructions, and more for GitHub Copilot in VS Code October release (v0.22) - GitHub Changelog
　https://github.blog/changelog/2024-10-29-multi-file-editing-code-review-custom-instructions-and-more-for-github-copilot-in-vs-code-october-release-v0-22/

●Copilot Edits
　https://code.visualstudio.com/docs/copilot/copilot-edits

他に、10月30日に、公式が X でポストしていたりもします。

機能の有効化について

GitHub Copilot の「Copilot Edits」を有効にする設定は、上記の公式情報の中で出ています。

具体的には、これらの部分です。

機能の有効化を行う項目を開く

2つ目の歯車アイコンがついてるほうは、その部分をクリックすると以下のような表示がでて、VSCode の設定の該当部分を直接開くことができるようです。

自分の環境で開いてみたのが以下です。

もちろん、上記の方法ではなくても、例えば　VSCode の設定をキーワードベースで探していく等のやり方でも良いかと思います。

「Copilot Edits」を試す

Edit Session を開く

設定の有効化ができた状態であれば、画面上部の GitHub Copilot用のアイコンからメニューを開いて、メニュー内の項目「Open Edit Session」を選んで使うことができます。

その操作を行うと、画面右で「Copilot Edits（「Copilot で編集する」という文字が書かれた部分）」が開きます。

ちなみに、画面上のほうのアイコンの部分を選ぶことで、「Copilot Edits」をチャットへと容易に切り替えることができるようです。もちろんチャットを「Copilot Edits」へ、という逆の切り替えも行えます。

「Copilot Edits」を使ってみる

それでは、実際に「Copilot Edits」を試してみます。

書きかえ対象とするコードについて

書きかえ対象とするコードは、自分がよく使う描画系のライブラリの「p5.js」に関するもので試してみました。

具体的には、以下に記載された公式サンプルです。

●createCapture
　https://p5js.org/reference/p5/createCapture/

書きかえ前のコードは、以下のとおりです。

let capture;

function setup() {
  createCanvas(100, 100);

  // Create the video capture and hide the element.
  capture = createCapture(VIDEO);
  capture.hide();

  describe('A video stream from the webcam with inverted colors.');
}

function draw() {
  // Draw the video capture within the canvas.
  image(capture, 0, 0, width, width * capture.height / capture.width);

  // Invert the colors in the stream.
  filter(INVERT);
}

内容的には、「Webページ内のキャンバス要素に Webカメラの映像を表示させ、その映像には色反転のフィルタをかけておく」というものです。

お試し1： コメント部分の翻訳

まずは軽いお試しで、1行だけ書きかえが起こりそうなものをやってみました。
具体的には、英語のコメントがついている行を、日本語に翻訳してもらうというものです。

依頼内容は、以下のとおりです。

describeの説明を日本語に書きかえて

この内容に対して、以下のような書きかえが行われました。
この時点だと、変更前と変更後の両方が表示されています。

そして、この変更を反映するか、または破棄するかを決めたり、再度書きかえをしてもらったりということもできます。

以下は、書きかえの依頼をして変更を反映させるまでの、一連の流れを動画にしたものです。

書きかえ前後の内容を、変更が生じた部分のみ以下に掲載してみます。

// 書きかえ前
  describe('A video stream from the webcam with inverted colors.');

// 書きかえ後
  describe('ウェブカメラからのビデオストリームを色反転して表示します。');

お試し2： 複数行の書きかえ

次は、複数行の書きかえが発生するようなものとして、以下の内容で試してみました。

キャンバスサイズとカメラ解像度を
640x480にして。また、フィルターを
グレースケールにするフィルターにして。

これを実行している時の様子は、以下のとおりです。

また、書きかえ結果を反映させる前の状態は以下のとおりです。

書きかえ後の内容全体を、以下に記載します。

let capture;

function setup() {
  createCanvas(640, 480);

  // Create the video capture and hide the element.
  capture = createCapture(VIDEO);
  capture.size(640, 480);
  capture.hide();

  describe('ウェブカメラからのビデオストリームをグレースケールで表示します。');
}

function draw() {
  // Draw the video capture within the canvas.
  image(capture, 0, 0, width, height);

  // Apply grayscale filter to the stream.
  filter(GRAY);
}

書きかわった箇所（書きかわった後のもののみ）と、追加された部分を抜粋すると、以下となります。

  createCanvas(640, 480);

  capture.size(640, 480);

  describe('ウェブカメラからのビデオストリームをグレースケールで表示します。');

  // Apply grayscale filter to the stream.
  filter(GRAY);

「キャンバスサイズとカメラ解像度を640x480にして」という内容（上記の 1つ目と 2つ目）と、「フィルターをグレースケールにするフィルターにして」という内容（上記の 4つ目）が適用されているのが分かります。
また、コメントの部分 2箇所に「色反転」「Invert the colors」というフィルターの説明が入っていたので、それを「グレースケールで表示」「Apply grayscale filter 」といった内容に修正しているようです。

とりあえず、GitHub Copilot の「Copilot Edits」を軽く試してみた、という内容は以上です。

まだまだ試せてない内容があるので、引き続き試していければと思います。

※ 例えば、複数ファイルを扱うこともできて、現状でファイル 10個までを同時に対象にできるようです↓

余談： モデルの切り替え

上記は、GPT-4o で試したましたが、モデルの切り替えもできるようでした（GitHub Universe 2024 で発表されていた件）。

Preview となっている機能ですが、GPT-4o から「o1-preview、o1-mini、Claude 3.5 Sonnet」の 3つに変更ができます。

【追記】他の「Copilot Edits」に関する記事

テスト駆動開発に「Copilot Edits」を使うという事例の記事を見かけたので、こちらにリンクを追記してみました。

●GitHub Copilot（VS Code版）の新機能「Copilot Edits」を使ってAIとテスト駆動開発をする - 電通総研 テックブログ