VSCodeとChatGPTを連携してコード爆速生成（macOS、ChatGPT Plusプラン以上）

# はじめに

VSCodeとChatGPTを連携してコード生成や変更を爆速でできるとのことで試してみた。

# 前提条件

OS：macOS
ChatGPTプラン：Plus以上

https://help.openai.com/en/articles/10119604-work-with-apps-on-macos

https://x.com/OpenAIDevs/status/1897700857833193955?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1897700857833193955%7Ctwgr%5Ea0b248be75810b736501641100e03d975cb0c4c0%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F25%2Fchatgptxcodevscodemac.html

# 手順

### VSCodeエクステンションのインストール
`ChatGPT - Work with Code on macOS`をインストール。
（`chatgpt mac`とかで検索すれば出てくる）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/263a5dce-6b6a-408c-8037-3c06ff46e56c.png)

確認があるがそのままインストールでOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/38c8e301-e749-44ef-83db-1279928ac130.png)

### ChatGPTのインストール（インストール済みの場合はスキップ）
エクステンションをインストールするとWelcomeページが表示され、設定を促される。

私はインストール済みだったのでスキップしたが、`Download ChatGPT for macOS`をクリックするとdmgのダウンロードが始まる（はず）。
画面に従ってインストール。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/95894f3e-a2b4-4f09-8c6a-17d7de242195.png)

### ChatGPTアプリ起動
`Open ChatGPT for macOS`をクリック。
（ここからではなく普通にアプリ起動しても問題ない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/6b1838b1-4de5-4bb7-8dc3-21bc916cf0fc.png)
`ChatGPT`アプリが立ち上がる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/71cfc575-0011-4674-a4ce-9e2d60053a84.png)

### VSCodeと連動
`Pair with Visual Studio Code`をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/f33edae1-8410-4879-ab3b-6fa295dceec2.png)
ChatGPT側でファイルへのアクセスを許可していない場合だと下記エラーが出るため、アプリにアクセス権を付与する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/60e55eeb-4888-4113-a85d-9b1c6a208358.png)
プライバシーとセキュリティからフルディスクアクセスを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/28f6c8eb-0f7a-4230-b1c6-8c3042bf86a2.png)
＋ボタンをクリックしインストールした`ChatGPT`アプリを指定。（インストール場所が異なる可能性もあるため割愛）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/62105886-9bff-4b6f-bac8-2692840cab77.png)
再度試すと連動され、入力欄の付近にCodeと表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/fae1bfae-6c3c-4a28-b406-51bbcd0bd980.png)

### ChatGPTへ質問
下記手順が表示されているが、一旦無視して問題ない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/8b965aa7-4128-454e-b2d2-feb759c6ac79.png)
VSCodeで新しいファイルを開く（Command+N）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/1bfbda91-7d1f-4f05-b4bb-109fc78c5c53.png)
ChatGPTアプリにて、画面下部の入力欄あたりに現在VSCodeで表示されているソースコードウィンドウのタイトルが反映されていることを確認し、何か適当なソースコード生成指示を行う。
回答コードの右上にある`適用する`ボタンをクリックする。
（画像は指示した後のソース適用前の状態）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/f729f85d-f619-4e93-afc5-d8fa54893101.png)
するとVSCode側へコードが反映される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/67cac814-a995-4846-a79f-2d68a7bde8da.png)
ちなみにコード修正依頼時はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38724/b0094b8b-9e60-429d-86f3-dd45049a51be.png)


# まとめ

### 料金面

似たようなサービスで料金比較すると、
- CopilotPro: 3,200円/月
- ChatGPTPlus: 3,000円/月
- ClineのAI利用料: 従量課金（モデルによる）

※執筆時点の値段

利用頻度によるが、VSCodeと連携しコード生成をするのみであればClineが一番お安い？
コード生成以外にも日常生活でヘヴィに生成AIを利用するのであればChatGPTの方がいいかなと思う。
（ちょうどChatGPTのPlusプランに入っていた）
Copilotはコード補完があるが無料版でもそこそこの回数を使えるため、自身のシチュエーションだとコード補完はCopilot、コード生成はChatGPTでいいかなと思っている。

あとは精度的なところかな。
Copilotは話題のClaudeを使えるとのことなので。
この辺も踏まえた最適解は使っていく上で精査しよう。

### 使い勝手

VSCode側で開いているコードに対してのみなので、複数読み込ませたい場合はソースウィンドウを分割しそれぞれが前面に表示されている状態にする必要がある。
それとあまり調べてないが、GPTと連携する時のショートカット（Option+Space）変え方が不明。Alfredと被るから変えたい。