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を連携する手順は、以下のとおりです。
それぞれの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個） |
ここからは、以下つの機能の使い方を紹介します。
それぞれの使い方を見ていきましょう。
機能1：コードの自動生成
コードの自動生成手順は、以下のとおりです。
GPTのレベルは、Precise（正確）・Balanced（バランス）・Creative（創造的）の3つの選択肢があります。
コードが正しくなければプログラムが動かない可能性があるため、Precise（正確）がおすすめです。
機能2：テストコードの生成
テストコードとは、指定したコードが適切に動くか動作確認するためのコードです。
テストコードを使うと、コードの不具合を早期に発見できたり、プログラムのバグを減らせたりします。
テストコードの生成は、以下のとおりです。
機能3：バグの発見
コードのバグを発見してもらうには、以下の手順が必要です。
提示された改善内容が必ずしも正しいとは限らないため、最終的には自分で確認を行ってください。
機能4：コードの最適化
コードを最適化する手順は、以下のとおりです。
コードを最適化するとプログラムの処理効率が向上しますが、最適化によってメモリ占有率が増える場合があります。
そのため、コードの最適化を使い過ぎないよう気を付けましょう。
機能5：コードの内容説明
ChatGPTを連携したVSCodeは、作成済みのコードの中で理解できない内容を解説してくれます。
通常だとコードの内容を調べるのに時間と手間がかかりますが、ChatGPTを連携したVSCodeを使えば短時間で回答が得られます。
コードの内容説明をしてもらうための手順は、次のとおりです。
ChatGPT研修「BotCamp」の特徴
わたしたちが提供する「BotCamp」は、ChatGPT研修の使い方を初心者から学べる研修です。
・日々登場する新しいAIツールやプラグインに、インプットが追いつかない
・AIツールの選択肢が多すぎて、自分にとって最適なツールを見つけられない
・生成系AIが仕事にどう役立つのか、あまりイメージできない
・すでに業務にAIを取り入れているが、使い方が適切なのかわからない
・時間をかけて学習しても、投資対効果がよいのか分からない
・プロンプトエンジニアリングって難しそう。とっつきづらく感じている
このようなお悩みをお持ちの方におすすめです。
BotCampの特徴1：プロンプトを難しく考えずシンプルに捉える
生成AIからのアウトプットの質を高めるコツは、指示文を「端的に・具体的に」書くことです。
だらだらと長く書く必要はありません。プログラミングやシステムエンジニアリングのように、用語めいた難しい言葉を使う必要も一切ありません。
「プロンプトエンジニアリング」と聞くとやや学術的で高度な技術的理解が必要な印象を受けるかもしれませんが、Prompt Simpleという考え方で、誰でも最小限の労力で最大限AIパワーを活用する方法をお伝えします。
BotCampの特徴2：便利なプラグインを厳選して紹介
日々増え続ける膨大なChatGPTプラグインのうち、業務改革のインパクトが大きく重要なプラグインを厳選して紹介します。
業務の種類ごとに、どの機能を使うべきか自分で考え判断できる応用力を身につけることができます。
BotCampの特徴3：Advanced Data Analysis（旧Code Interpreter）で「一億総データサイエンティスト」に
CSV、PDFなどのデータをアップロードした上で、ChatGPT上でPythonのコードを生成・実行できる機能「Advanced Data Analysis」を活用し、高度な専門性がなくても誰もがデータサイエンティストのようなモデル作成、データの予測ができるようになります。
BotCamp開催概要
| 開催日程 | 研修内容ページを確認 |
| 研修時間 | 9:00～17:00もしくは10:00-18:00 |
| 料金 | 33,000円(税込) |
| 開催形式 | 対面のみ(オンライン参加不可) |
| 会場 | 水道橋開催の場合 コンフォート水道橋 東京都千代田区神田三崎町2-7-10 帝都三崎町ビル 2階,5階 https://www.relo-kaigi.jp/comfort-suidoubashi/access/ 神田開催の場合 BIRTH KANDA 東京都千代田区神田錦町1-17-1 神田髙木ビル7F https://birth-village.com/ |
| 備考 | ・ChatGPT(GPT-4)が入ったWindowsPCをお持ちください ・推奨のOSはWindowsです。Macでの受講はご遠慮ください。 ・セキュリティ上ChatGPTが使えないPCでの受講はご遠慮ください。 |