ChatGPTをVSCodeで使いたい!連携方法を図解で紹介
thumb_chatgptvs_01
ChatGPTをVSCodeで使いたい!連携方法を図解で紹介
アンドエンジニア編集部
2024.02.21
この記事でわかること
ChatGPTとVSCodeを連携させるには、OpenAIのAPIが必要
VSCodeの拡張機能を追加することで、ChatGPTと連携することができる
ChatGPTとVSCodeを連携させると、コードの自動生成やバグの修正もできる

ChatGPTとVSCodeの連携で開発が便利に

img_chatgptvs_01

プログラミングを学習している人や、仕事でコードを書いている人の中には、VSCodeを利用している人も多いでしょう。

VSCodeには拡張機能がありますが、最近その中にChatGPTの拡張機能が追加されました。そのため、この拡張機能を追加することで、ChatGPTとVSCodeを連携できます。

今回はそんなVSCodeとChatGPTを連携させて、開発をより効率的にする方法をご紹介します。 ChatGPTとVSCodeの連携方法や、具体的な使い方を図解で紹介しますので、普段の開発でVSCodeを利用して開発をされている人は、是非参考にしてください。

VSCodeとは?定番のコードエディタを他のエディタと比較して解説
ChatGPTとは?今話題のAIチャットボットの概要や仕組みを解説!

ChatGPTとVSCodeを連携させるとできること

対話型のAIとして知られるChatGPTと、VSCodeを連携させると具体的にどのようなメリットがあるのかご紹介します。

例えば、サンプルコードの出力や既存のコードを解説してもらったり、バグの発見をしてもらうこともできます。

最終的にはご自身でコードを確認する必要がありますが、上記のような使い方をすれば開発効率はかなり上がるでしょう。

具体的な使い方は後述しますので、詳しく知りたい方は是非後述の記事を参考にしてください。

VSCodeをインストールする方法とは?設定方法まで丁寧に解説
VSCodeの使い方を図解!画面説明からよくある質問・操作方法まで解説

ChatGPTのVSCode拡張機能とは

img_chatgptvs_02

まず、ChatGPTを連携できるVSCode拡張機能がどんな場面で役立てられるかを説明し、代表的な拡張機能を3つ紹介します。あわせて、拡張機能を使う場合に必要となることがあるOpenAIのAPIの課金についても触れていきます。

ChatGPTでできることは? 何ができるか、できないことも併せ全12編を解説

ChatGPTとVSCodeを連携するメリットとは

ChatGPTとVSCodeの連携は、コーディングを行うエンジニアにとって様々なメリットがあります。

まず、アプリを切り替えることなく、VSCode内でコーディングしながらそのままChatGPTを活用できることが大きなメリットと言えます。

VSCodeで入力中のコードについてそのままChatGPTに質問をしたり、コードに関するアドバイスをもらえるため、今開いているコードに即した活用が簡単にできるでしょう。

また、ChatGPTとの対話を通じて、作成中のコードについて新しい発想やアイデアを得ることも可能です。新しい知識を学んだり、想定しなかった提案で新たなコーディングの切り口が見えることもあるでしょう。

ChatGPTの活用方法!エンジニアの業務に活かせるか利用してみた
ChatGPTの面白い使い方10選!活用例・活用アイデアを図解

用途に合った拡張機能を探そう

VSCodeで使用できるChatGPT連携の拡張機能は、数多く提供されています。それぞれに機能や特長が異なるので、自分の用途や好みに合ったものを選ぶことが大切です。

ここではChatGPTとの連携を行える3つのVSCode拡張機能を紹介します。ここに挙げたものを参考にしながら、自分が使いやすい拡張機能を探してみると良いでしょう。

■GenieAI

GenieAIは、VSCode内からChatGPTを呼び出すことができる拡張機能です。コーディング中にVSCode内でそのままChatGPTと対話が可能なため、プログラミング作業の効率化やコードレビューに役立ちます。

主な機能としては、サイドバーからChatGPTに質問できる機能や、書いたコードからバグを発見する機能、分からないコードを解説してくれる機能など、コーディングが便利になるものばかりです。

【参考】:GitHub - ai-genie/chatgpt-vscode

■CodeGPT

CodeGPTは、VSCodeでのコーディングの際に、オートコンプリート、コードの説明、エラーチェックなどを行ってくれるVSCode拡張機能です。

CodeGPTでは、CodeGPTの有償プランであるCodeGPT Plusで利用することで、画像をアップロードしてさらに便利に活用できます。画像に関する質問に回答してくれたり、WebインターフェースからReactコンポーネントのコードを生成してくれます。

【参考】:Code like a Pro with the CodeGPT AI Copilot

■EasyCode

EasyCodeは、既存のコードベースを活用したコーディングのサポートが可能な拡張機能です。インデックスの作成によってプロジェクトのコードベースを理解した上で対話でき、そのプロジェクトに即してCodeGPTによるコード生成やコードに関する質問などができます。

指定した部分のコードが何をしているのか説明したり、あるメソッドがコードベースの他の部分に与える影響を説明してくれたりするなど、実際のコードと結びついた対話によってコーディングを手助けしてくれます。

【参考】:EasyCode - AI that understands your codebase.

VS Codeのプラグインとは?導入方法やおすすめの拡張機能も紹介

ChatGPT APIの課金について

ChatGPTを連携するVSCode拡張機能を選ぶときには、ChatGPT APIを使用するかどうかをチェックしましょう。ChatGPT APIを使う拡張機能の場合、APIの使用量に応じてChatGPT側で課金されます。

課金される金額は、GPT-4、GPT-3.5 Turboなどの使用するモデルや、やりとりをした単語数を表すトークン数に応じて決まります。拡張機能の持つ機能の中で、トークン数が多いものや少ないものなどの違いもあるでしょう。

ChatGPTの設定で利用状況をチェックしたり、毎月のAPI利用料金の上限を設定したりすることもできるので、予算に応じて上手に活用しましょう。

【参考】:ChatGPT Pricing

ChatGPTのAPIとは?概要や使い方を分かりやすく図解

ChatGPTとVSCodeの連携方法

img_chatgptvs_03

では早速、ChatGPTとVSCodeの連携方法について紹介します。先ほども軽く触れた通り、VSCode上で拡張機能を追加する必要があります。また、VSCodeとChatGPTを連携させるために、OpenAIでのAPIキーの取得も必要になります。

本記事では、APIキーの取得方法から説明します。特に難しい手順はありませんので、本記事を参考にしながら、一緒に手を動かしてみましょう。

ChatGPTでAPIキーを取得する

まずは、ChatGPTでAPIキーを取得しましょう。ChatGPTの公式サイトにアクセスし、画面上部の「Developers」というメニューの中の「API reference」をクリックしましょう。

ちなみに、ChatGPTを利用するにはOpenAIに登録が必要です。そのため、まだユーザー登録していない人は先にサインアップをしましょう。

img_chatgptvs_04
【図】:OpenAIの公式サイト

また、OpenAIのAPI利用は、従課金制でお金を支払う必要があります。ただし、執筆時点では無料トライアルの期間もありましたので、このような制度を利用しつつ試してみましょう(2024年2月時点)。料金の詳細は、公式サイトを必ず確認した上で利用してください。

「API reference」をクリックすると画面が切り替わり、APIリファレンスを参照できるエリアが表示されます。こちらからAPIキーを取得します。

img_chatgptvs_05
【図】:ChatGPTの公式サイト APIリファレンスの表示画面

ログインした状態でAPIリファレンスの画面を開くと、画面右上に自分のアカウントが表示されます。こちらの中から「View API keys」をクリックしましょう。

そうすると、下図のように「Create new secret key」が表示されます。APIキーを発行する際に任意の名前を入力し、「Create secret key」をクリックするとAPIキーが発行されますので、こちらをコピーします。

取得したAPIキーは、VSCodeに拡張機能を導入した後に使用します。

img_chatgptvs_06
【図】:ChatGPTの公式サイト APIキーの取得

【参考】:OpenAI 公式サイト 【参考】:OpenAI 公式サイト APIリファレンス 【参考】:OpenAI 公式サイト 料金

ChatGPTの使い方とは?実際に使用するまでの流れを解説!

VSCodeで拡張機能を導入する

VSCodeを起動すると画面左側にメニューバーが現れます。下図の赤枠の拡張機能のアイコンをクリックしましょう。

すると検索モードが表示されますので、ここに「ChatGPT」と入力します。いくつか候補が表示されますが、今回は「ChatGPT - Genie AI」を利用します。

img_chatgptvs_07
【図】:VSCodeで拡張機能「ChatGPT」を検索

候補の中からこちらをクリックすると、拡張機能の詳細が画面右側に表示されます。拡張機能の詳細を確認し、問題がないようであれば、赤枠のインストールボタンを押しましょう。

img_chatgptvs_08

【図】:ChatGPT - Genie AIのインストール

インストールが完了するとメニューバーの1番下にランプのマークが追加されます。すると画面が切り替わり、拡張機能の特徴などが表示されます。

その中に「Try editor view」というボタンがありますのでこちらを押してください。そうすると、画面が切り替わり、プロンプトの入力するエリアやショートカットが表示されます。

img_chatgptvs_09
【図】:ChatGPT - Genie AIをインストール後の画面

【参考】:拡張機能 ChatGPT - Genie AI

Genie AIにAPIキーを読み込ませる

最後にGenie AIに先ほど取得したAPIキーを読み込ませましょう。VSCodeの画面左側にあるランプのアイコンをクリックし、Templatureの下の入力エリアに文字を入力します。

下の「Ask」ボタンをクリックすると、画面上部にAPIキーの入力を促すメッセージが表示されます。先ほど取得したAPIキーを貼り付けて、エンターキーを押せば、APIキーの読み込みは完了です。

img_chatgptvs_10
【図】:APIキーの入力画面

APIキーの読み込みは基本的に1度で大丈夫ですので、再度入力を求められない限り再入力は必要ありません。

その他のGenie AIの設定

最後に、OpenAIのOrganization IDを設定します。Organization IDはOpenAIの公式サイトにアクセスすると、アカウント情報のページに記載されています。

そちらをコピーし、VSCodeのGenie AIの設定に入力する必要があります。まず、VSCodeの画面を開き、画面左下の歯車マークをクリックします。設定画面の検索窓に「@ext:genieai.chatgpt-vscode genieai.」と入力するとGenie AIに関する設定ができます。

設定項目の一覧の中に、「OpenAI Organization」という項目がありますので、こちらにOrganization IDを設定しましょう。

img_chatgptvs_11
【図】:Genie AIの設定画面

これで、拡張機能の導入から準備が完了しました。次は、VSCodeでのChatGPTの使い方を紹介します。

ChatGPTとVSCodeの使い方

img_chatgptvs_12

ChatGPTとVSCodeを連携させることができたら、次はChatGPTの機能を試してみましょう。本記事では、実際にコードの生成などをさせた画面も併せて紹介しますので、是非参考にしてください。

コードの自動生成する

それでは、コードを自動生成する方法をご紹介します。画面左側のランプマークをクリックし、Genie AIの画面を開きます。Templatureという場所に、入力エリアが表示されますので、こちらに指示を入力していきましょう。

例として、本記事ではGenie AIのTemplatureの入力エリアに「HTMLとJavascriptを使ってサンプルコードを記述して」と入力しました。その結果、下図のように簡単なコードを記述してくれました。

img_chatgptvs_13
【図】:コードの作成

今回は簡単なコードを作成しましたが、条件をより具体的に追加することで、自分の作りたいコードを生成してくれるでしょう。

バグの発見

次に、既存のコードからバグを発見してみましょう。今回は、先ほど自動生成したコードの一部を、わざと間違えた状態にしました。

そして、間違えた状態のコードを記載したうえで「以下のコードのバグの原因を解説してください。また、バグの箇所を修正をしてください。」と指示を出します。

その結果、下図のようにバグの原因を指摘し、正しいコードを出力してくれました。最終的な動作確認はご自身で行う必要がありますが、この機能を使えば非常に効率的に開発を進められると分かります。

img_chatgptvs_14
【図】:バグの原因を解説し修正させる

コードの解説をしてもらう

次は、コードの解説をさせてみます。既存のコードで、分からない部分などがある時、本来であればドキュメントを引いたり検索をする必要があります。しかし、この機能を使えば簡単にコードの解説をしてもらえます。

早速、コードの解説をしてもらいましょう。まずはコードを記述し、分からない部分をドラッグして範囲選択してください。そのうえで、右クリックをし「Gienie:Explain」を選択します。

すると、画面左側に選択範囲に関する説明が表示されます。ちなみに説明文は英語表記ですので、日本語にするには翻訳機能を使う必要があります。

img_chatgptvs_15
【図】:コードの解説

ChatGPTとVSCodeを連携させて効率的に開発しよう

img_chatgptvs_16

このように、ChatGPTとVSCodeを連携させることで、開発を非常に効率的に進めることができるとお分かりいただけたかと思います。コードの解説やバグの修正を自力で全て行うと、時間も労力もかかりますので、必要に応じてChatGPTを活用してみましょう。

Open AIのAPIは無料ではありませんが、従課金制ですので使った分だけ支払えば利用することができます。

VSCodeを開発で利用している場合、開発効率を上げる便利な機能となります。是非本記事を参考にして、ChatGPTを開発に取り入れてみましょう。

VSCodeのショートカット一覧!開発作業を効率化する秘訣を解説
ChatGPTでコードレビューができる?やり方や事例・VSCodeとの連携方法も解説
気になる人のXをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

編集部おすすめコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT