ツール

Visual Studio CodeでChatGPT支援型コーディング(拡張機能ChatGPT – Genie AI)

2023年8月16日

ChatGPTはPythonなどのプログラミング言語に対応しているため、ChatGPTに書いてもらったコードをコピペして使用することができます。
しかし、毎回GUIのChatGPTを開いて手作業でコードを指定してコピペするのは少々面倒です。
そこで今回は、Visual Studio Code (VSCode) の拡張機能を使用してVSCode上でChatGPTを利用する方法について紹介します。

ChatGPT – Genie AI

Visual Studio Code (VSCode)の拡張機能"ChatGPT – Genie AI"。この拡張機能は、APIを使用してVSCode上でGUI形式でChatGPTと会話することができる。ChatGPTの回答のうちプログラミングコード部分は1クリックでコピペして挿入することができる。VSCode: ver1.80.0, ChatGPT – Genie AI: ver0.0.8

今回はVisual Studio Code (VSCode) 上でChatGPTを利用するために、拡張機能"ChatGPT – Genie AI"を使用します。

ChatGPT – Genie AIを使用することで、GUI同様にChatGPTに質問した回答のコード部分を1クリックでコピペ・挿入することができます。
この拡張機能を使用する際にはOpen AIのAPIを使用するためトークン数に応じて課金されます。
そのため、ChatGPTと会話する前にAPIキーの入力・保存が求められます。

Visual Studio Code (VSCode)の拡張機能"ChatGPT – Genie AI"のチャット画面。左下のAsk a questionと書かれたボックスに文章を入力して実行すると返答が得られる。ChatGPTの回答のうちプログラミングコード部分は1クリックでコピペして挿入することができる。VSCode: ver1.80.0, ChatGPT – Genie AI: ver0.0.8

ChatGPT – Genie AIを有効化すると左端にある縦長にアイコンが並んだアクティビティバーにランプのアイコンが追加されます(上の画像ではアクティビティバーに追加されたアイコンのうち一番下に配置)。
このランプのアイコンをクリックすると上の画像のようにサイドバー(アクティビティバーのすぐ右側)が現れます。
サイドバーの一番下の"Ask a question…"と書かれたボックスに文章を入力して、右向きの矢のようなボタン(Submit prompt)をクリックするとChatGPTが返答してくれます。

質問の回答にコードが含まれる場合、次の画像のようにコードをコピー・挿入することができます。

Visual Studio Code (VSCode)の拡張機能"ChatGPT – Genie AI"を使用したコード挿入画面。拡張機能を利用してAPI経由でChatGPTにコードを作成してもらったコードを挿入している。ChatGPTの回答のうちプログラミングコード部分は"Insert"ボタンを押すことで1クリックでコピペして挿入することができる。VSCode: ver1.80.0, ChatGPT – Genie AI: ver0.0.8

上の画像では、都道府県を入力すると県庁所在地を返す関数をPythonで作成するように指示しています。

ChatGPTが返したコード部分には、Diff, Copy, Insert, Newなどのボタンがついています。
DiffはChatGPTが作成したコードと右側の自分が作成したコードの差分を視覚的に示してくれます。
Copyはコードをクリップボードにコピーします。
Insertを押すと右側で開いているスクリプトにChatGPTが書いたコードを挿入してくれます。
Newを押すと新しいタブを開いてChatGPTが書いたコードを出力してくれます。

Insertボタン1クリックでChatGPTが書いたコードをコピペできるため、簡単にコードを作成することができます。
APIを使用するため使えば使うほど課金される点が欠点ですが、VSCode内でChatGPTを使用できるため無料のGUI版よりもシームレスにコーディングを進めることができます。

-ツール
-,