VSCodeで使えるようになったCopilot Editsを使ってみた

こんにちは、サーバエンジニアの池脇です。
今回はVSCodeで最近利用できるようになったCopilot Editsについて紹介したいと思います。

## Copilot Editsとは

https://code.visualstudio.com/docs/copilot/copilot-edits

2024/10/29に発表されたVSCode上でCopilotを利用してコードの書き換えをしてもらう機能です。
今までのCopilot Chatよりも手軽に、また精度も高くコードの書き換えをすることが可能です。

### Copilot Editsの有効化方法
前提としてGithub CopilotとGithub Copilot Chatの拡張機能はインストールしてください。

![スクリーンショット 2024-11-28 18.41.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/d6c501d2-c881-0076-de5c-fe2af1d1e03e.png)
ユーザ設定で「Copilot Edits」を検索。
上記画像のようにCopilot編集機能を有効化することで利用できるようになります。

![スクリーンショット 2024-11-28 18.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/4e34eb65-436c-2170-e555-373f41fddead.png)
赤丸の部分が表示されていればOKです。

:::note
VSCodeは最新のバージョンに更新をしてください。
古いバージョンのままでは上記の設定が表示されません。
:::

### Copilot Editsの利用方法
![スクリーンショット 2024-11-28 18.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/8c8cee84-7780-56cc-1e39-3ce166c4581b.png)
先ほど有効化されたアイコンのところから「Open Copilot Edits」を選択

![スクリーンショット 2024-11-28 18.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/178022b5-19c5-f757-fa35-80a247e57bb0.png)
選択すると上記の画像のようなウィンドウが開くのでそこのチャットウィンドウに命令を書き込むことで利用できます。

### 実例
とりあえずSQLを作ってもらいます。
チャット欄に
```
以下のテーブルを作成するSQLを作ってください
・id、name、value、is_activeを持つテーブル
・idをPKとする、auto incrementにする
・nameは文字列で100文字
・valueは数値でlong型
・is_activeは真偽値
```
と打ち込んで送信すると以下の画像のようになりました。

![スクリーンショット 2024-11-28 19.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/0bd1ce57-0037-4391-c5f9-f6f64ed19ac8.png)
今回は新規の空ファイルに書きこんでいるため、今回の追記内容のみが記載されています。
この変更に問題がなければ赤矢印の「Accept」、元に戻したい場合は「Discard」を選択することで今回の内容を確定させることができます。
とりあえず今回はAccept。

テーブル名の指定を忘れていたため、テーブル名の変更を指示します。

![スクリーンショット 2024-11-28 19.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/0d715691-004a-046d-02e4-6156c2f14e7a.png)
このようにテーブル名の箇所だけ変更してくれています。

次にhtmlファイル作成し、Copilot Editsのところにドラッグ&ドロップ、または「+ Add Files...」のところから作成したhtmlファイルを選択し、Working Setに追加します。

![スクリーンショット 2024-11-28 19.28.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/754395c6-b05a-024a-f508-fec4919eaa13.png)
上記の画像のようになっていればOKです。
htmlファイルに作成したテーブルを表示するように指示してみます。

![スクリーンショット 2024-11-28 19.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/96604833-d345-4f93-5701-80076fb23432.png)
先ほどのテーブル構造の通りにテーブルを表示するhtmlを作ってくれました。
このようにWorking Setにファイルを追加することで複数ファイルを読み取った上での修正もしてくれます。
他にもhtmlに直接書かれているcssを別ファイルに移す等の作業も可能です。

:::note
ちなみにCopilot Editsで編集した内容はタイムラインではこのように指示した内容で表示されるのでローカルの変更履歴も見やすいかと思います。

![スクリーンショット 2024-11-28 19.40.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/6f5898a4-f3c9-7369-b48e-74dcd3b99bdb.png)
:::

## まとめ
今回はVSCodeで使えるようになったCopilot Editsを使ってみました。
指示の出し方が割と大雑把でもそれっぽく出してくれるのでモック作成としても有用ですし、既存のコードの修正の際にも利用しやすいと思います。
気になった方はまず自分で試してみることをおすすめします。

## 参考
- [GitHub Copilot の「Copilot Edits」で直接の部分的なコード書きかえを行ってもらう（機能の有効化の話も）](https://qiita.com/youtoy/items/5249b5f7a1acabda5f01)
- [VSCodeの新機能「Copilot Edits」、GitHub Copilotが複数ファイルにわたるコード変更や生成に対応。「ダークモードとライトモードのテーマに対応して」など複雑な指示も可能に
](https://www.publickey1.jp/blog/24/vscodecopilot_editsgithub_copilot.html)