ChatGPTにVSCodeを連携させる方法を解説｜導入方法から使える機能まで

ChatGPTとMicrosoftの提供するVisual Studio Code（VSCode）が連携できることは知っているものの、詳しい手順までわからない方もいるのではないでしょうか。
ChatGPTとVSCodeを連携できると、コード開発やバグの発見などの業務効率化に役立ちます。

そこで、本記事では、VSCodeをChatGPTを利用して使いたい方向けに、ChatGPTとVSCodeを連携させる方法を導入方法から使える機能まで詳しく解説します。

ChatGPTを使って仕事の生産性を図りたい場合は、以下の記事も参考にしてみてください。

ChatGPTとは？

ChatGPTは、Open AI社が開発した対話型のAIサービスです。
自然言語処理技術を利用することで、質問に対して人間のようにスムーズに会話できるのが特徴です。
文章生成だけでなく、動画や画像の生成も可能で、音声でも対話できるようになりました。
ChatGPTの利用によって、カスタマーサポートやIT業界など、さまざまな分野で業務が効率化されており、今後の発展が期待されています。

ChatGPTとVSCodeの連携拡張機能「Genie AI」とは？

ChatGPTにVSCodeを連携させると、コードエディタであるMicrosoftの提供するVisual Studio Code（VSCode）でChatGPTが使えるようになり、コード開発の効率アップにつながります。
その際、ChatGPTとVSCodeをつなぐ役割を行うのがVSCodeへの拡張機能「ChatGPT – Genie AI」です。

ChatGPTは、さまざまな対応が可能ですが、最新のデータや専門的な知識に基づく回答は正しくない場合があります。
しかし、Genie AIは、コーディングとプログラミングに特化した拡張機能のため、VSCodeの専門的な知識に関する質問にも対応可能です。
Genie AIが対話できるのはコーディングやプログラミング全般の内容で、プログラミング言語に関する質問、アルゴリズムの分析、データ構造の解説、コードのバグ修正・レビューなどが挙げられます。
Genie AIを使えば、ChatGPTをコーディングやプログラミングのサポートツールとして活用できるため、スキルの向上に重宝するでしょう。

なお、VSCodeの拡張機能には「gencay.vscode-chatgpt」がありますが、自動ログイン機能が利用規約に法律や規則に触れていたようで、現在開発中止になっています。

ChatGPTに関する他の拡張機能が気になる方は、以下の記事も読んでみてください。

ChatGPTとVSCodeを連携する方法

ChatGPTとVSCodeを連携する手順は、以下のとおりです。

ChatGPTとVSCodeを連携する手順5STEP

STEP1：アカウント登録し、ログインする
STEP2：APIキーを取得する
STEP3：拡張機能をインストールする
STEP4：拡張機能にAPIキーを設定する
STEP5：動作確認する

それぞれのSTEPを見ていきましょう。

STEP1：アカウント登録し、ログインする

Open AI社（ChatGPT）のアカウントが未登録の場合は、アカウントを作成する必要があります。

Open AI社のAPIページにアクセスし、「Log in」をクリックしてください。

登録したいEメールアドレスの入力または連携したいアカウントを選択し、登録・ログインを進めてください。

Chat GPTのアカウントを作成済みの場合は、Eメールアドレスの入力または登録したアカウントを選択し、「続ける」をクリックしてログインを進めてください。

次の画面が表示され、右側のAPIを選択すればログインが完了します。

STEP2：APIキーを取得する

TOP画面の左上の鍵アイコン「API keys」を選択し、「+Create new secret key」をクリックします。

「Create secret key」をクリックします。

ポップアップ表示される「Create new secret key」から、APIキーの情報をコピーしてメモしておきましょう。

STEP3：拡張機能をインストールする

次に、VSCodeへの拡張機能「ChatGPT – Genie AI」をインストールします。
VSCodeを起動して画面の左上の検索窓に「genieai」と入力して拡張機能を検索し、ランプアイコンの「ChatGPT – Genie AI」を選択してください。

説明画面を確認してインストールをクリックします。
左側のサイドバーにランプアイコンが追加されていればインストール完了です。

STEP4：拡張機能にAPIキーを設定する

左側に追加されたサイドバーのランプアイコンをクリックします。
初めて使用する場合は、右下にAPIキーの設定画面が表示されるため、取得したAPIキーを入力すれば、APIキーの設定は完了です。

表示言語を日本語にしたい場合は、ChatGPT-Genie AI画面のアンインストールボタン横の設定ボタンから変更を行ってください。
設定メニューから拡張機能の設定を選び、項目「Genieai › Prompt Prefix: Add…」を日本語に置き換えると日本語で表示されます。

STEP5：動作確認する

APIキーを設定の完了後は、VSCodeからChatGPTが使えるか動作確認をしてみましょう。
作成したコードを選択し右クリックして出てきた画面に、テストコードの生成など質問の選択肢が表示されれば、VSCodeからChatGPTが使える状態です。

ChatGPTとVSCodeの連携によって使える機能

ChatGPTとVSCodeの連携によって使える機能は、以下のとおりです。

コンテキストメニューから質問できる内容

質問	目的
Add Tests	テストコードの生成
Find bugs	バグの発見
Optimize	コードの最適化
Explain	コードの内容説明
Add Comments	コードへのコメント追加
Complete Code	未完成のコードの完成
Custom Prompt	上記以外の内容の質問（Prompt1とPrompt2の2個）

ここからは、以下つの機能の使い方を紹介します。

ChatGPTとVSCodeの連携によって使える代表的な機能5つ

・コードの自動生成
・テストコードの生成
・バグの発見
・コードの最適化
・コードの内容説明

それぞれの使い方を見ていきましょう。

機能1：コードの自動生成

コードの自動生成手順は、以下のとおりです。

コードを自動生成する方法

STEP1：サイドバーにあるランプアイコンをクリックする
STEP2：「Temperature」からGPTのレベルを選ぶ
STEP3：生成したいコード内容を入力して「Ask」をクリックする

GPTのレベルは、Precise（正確）・Balanced（バランス）・Creative（創造的）の3つの選択肢があります。
コードが正しくなければプログラムが動かない可能性があるため、Precise（正確）がおすすめです。

機能2：テストコードの生成

テストコードとは、指定したコードが適切に動くか動作確認するためのコードです。
テストコードを使うと、コードの不具合を早期に発見できたり、プログラムのバグを減らせたりします。
テストコードの生成は、以下のとおりです。

テストコードの生成方法

STEP1：コードを範囲指定して右クリックする
STEP2：メニューから「ChatGPT: Add tests」を選ぶ
STEP3：指定した範囲のテストコードが生成される

機能3：バグの発見

コードのバグを発見してもらうには、以下の手順が必要です。

バグの発見方法

STEP1：コードを範囲指定して右クリックする
STEP2：メニューから「ChatGPT: Find bugs」を選ぶ
STEP3：指定した範囲のバグの発見や、改善されたコードを提示してくれる

提示された改善内容が必ずしも正しいとは限らないため、最終的には自分で確認を行ってください。

機能4：コードの最適化

コードを最適化する手順は、以下のとおりです。

コードを最適化する方法

STEP1：コードを範囲指定して右クリックする
STEP2：メニューから「ChatGPT: Optimize」を選ぶ
STEP3：最適化したコードが提案される

コードを最適化するとプログラムの処理効率が向上しますが、最適化によってメモリ占有率が増える場合があります。
そのため、コードの最適化を使い過ぎないよう気を付けましょう。

機能5：コードの内容説明

ChatGPTを連携したVSCodeは、作成済みのコードの中で理解できない内容を解説してくれます。
通常だとコードの内容を調べるのに時間と手間がかかりますが、ChatGPTを連携したVSCodeを使えば短時間で回答が得られます。

コードの内容説明をしてもらうための手順は、次のとおりです。

コードを説明してもらう方法

STEP1：コードを範囲指定して右クリックする
STEP2：メニューから「ChatGPT: Explain」を選ぶ
STEP3：指定した範囲のコードの内容が文章で解説される