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

この記事は後から、「[GitHub dockyard Advent Calendar 2024](https://qiita.com/advent-calendar/2024/github-dockyard)」の 3日目の記事としても登録しました（投稿していたのは 11月中）。

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e7c54121-5b7d-9dff-ec11-70c116e16c87.png)

https://x.com/youtoy/status/1852715279316664681

また、その書きかえを実行した話の前に、「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/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0811c7d1-10f4-fd7e-3260-9f6155d36ef0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bd7536ff-ffde-44cd-c9dc-119ff72c0b39.png)

他に、[10月30日に、公式が X でポストしていたりもします](https://x.com/code/status/1851336106588950817
)。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/affe98a8-8047-8cfb-4d63-46cb4eda46b2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e22b7188-1784-2f4d-3583-0ac5a121153c.png)

#### 機能の有効化を行う項目を開く
[2つ目](https://code.visualstudio.com/docs/copilot/copilot-edits)の歯車アイコンがついてるほうは、その部分をクリックすると以下のような表示がでて、VSCode の設定の該当部分を直接開くことができるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3c4e791d-30c7-5f4f-ee43-c696dadf9e26.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/07749bb5-c96f-a06c-503e-e7558fef75e9.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ac4032d1-4507-c75c-65ee-68ec35043cfc.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a6a62d86-2a1c-f499-0ee6-b9c54d0ab457.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/37cbec74-88ac-1507-e60b-cdc1e5feb6ab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/54d84d61-0074-a8ec-d4a3-de7d5ce90e4e.png)

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

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

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

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

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

```javascript
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の説明を日本語に書きかえて
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e06ba0d2-0f70-985e-cf77-22a4a6b8213c.png)

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/gf_aEijtd5w?si=R4eIqrE4rhxZK6x0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

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

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

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

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

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/iDCt4jK5xyI?si=WOe5doKfMZLEAtUN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/aec6023e-90d2-29c9-cecf-fb7584784f2a.png)

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

```javascript
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);
}
```

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

```javascript
  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個までを同時に対象にできるようです↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/801427e9-6886-366c-ad44-632f379afc13.png)

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

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

https://x.com/youtoy/status/1852719997984092506

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

●[GitHub Copilot（VS Code版）の新機能「Copilot Edits」を使ってAIとテスト駆動開発をする - 電通総研 テックブログ](https://tech.dentsusoken.com/entry/2024/11/11/GitHub_Copilot%EF%BC%88VS_Code%E7%89%88%EF%BC%89%E3%81%AE%E6%96%B0%E6%A9%9F%E8%83%BD%E3%80%8CCopilot_Edits%E3%80%8D%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6AI%E3%81%A8%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86)