ChatGPTとVSCodeの連携で開発が便利に
プログラミングを学習している人や、仕事でコードを書いている人の中には、VSCodeを利用している人も多いでしょう。
VSCodeには拡張機能がありますが、最近その中にChatGPTの拡張機能が追加されました。そのため、この拡張機能を追加することで、ChatGPTとVSCodeを連携できます。
今回はそんなVSCodeとChatGPTを連携させて、開発をより効率的にする方法をご紹介します。 ChatGPTとVSCodeの連携方法や、具体的な使い方を図解で紹介しますので、普段の開発でVSCodeを利用して開発をされている人は、是非参考にしてください。
ChatGPTとVSCodeを連携させるとできること
対話型のAIとして知られるChatGPTと、VSCodeを連携させると具体的にどのようなメリットがあるのかご紹介します。
例えば、サンプルコードの出力や既存のコードを解説してもらったり、バグの発見をしてもらうこともできます。
最終的にはご自身でコードを確認する必要がありますが、上記のような使い方をすれば開発効率はかなり上がるでしょう。
具体的な使い方は後述しますので、詳しく知りたい方は是非後述の記事を参考にしてください。
ChatGPTのVSCode拡張機能とは
まず、ChatGPTを連携できるVSCode拡張機能がどんな場面で役立てられるかを説明し、代表的な拡張機能を3つ紹介します。あわせて、拡張機能を使う場合に必要となることがあるOpenAIのAPIの課金についても触れていきます。
ChatGPTとVSCodeを連携するメリットとは
ChatGPTとVSCodeの連携は、コーディングを行うエンジニアにとって様々なメリットがあります。
まず、アプリを切り替えることなく、VSCode内でコーディングしながらそのままChatGPTを活用できることが大きなメリットと言えます。
VSCodeで入力中のコードについてそのままChatGPTに質問をしたり、コードに関するアドバイスをもらえるため、今開いているコードに即した活用が簡単にできるでしょう。
また、ChatGPTとの対話を通じて、作成中のコードについて新しい発想やアイデアを得ることも可能です。新しい知識を学んだり、想定しなかった提案で新たなコーディングの切り口が見えることもあるでしょう。
用途に合った拡張機能を探そう
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.
ChatGPT APIの課金について
ChatGPTを連携するVSCode拡張機能を選ぶときには、ChatGPT APIを使用するかどうかをチェックしましょう。ChatGPT APIを使う拡張機能の場合、APIの使用量に応じてChatGPT側で課金されます。
課金される金額は、GPT-4、GPT-3.5 Turboなどの使用するモデルや、やりとりをした単語数を表すトークン数に応じて決まります。拡張機能の持つ機能の中で、トークン数が多いものや少ないものなどの違いもあるでしょう。
ChatGPTの設定で利用状況をチェックしたり、毎月のAPI利用料金の上限を設定したりすることもできるので、予算に応じて上手に活用しましょう。
【参考】：ChatGPT Pricing
ChatGPTとVSCodeの連携方法
では早速、ChatGPTとVSCodeの連携方法について紹介します。先ほども軽く触れた通り、VSCode上で拡張機能を追加する必要があります。また、VSCodeとChatGPTを連携させるために、OpenAIでのAPIキーの取得も必要になります。
本記事では、APIキーの取得方法から説明します。特に難しい手順はありませんので、本記事を参考にしながら、一緒に手を動かしてみましょう。
ChatGPTでAPIキーを取得する
まずは、ChatGPTでAPIキーを取得しましょう。ChatGPTの公式サイトにアクセスし、画面上部の「Developers」というメニューの中の「API reference」をクリックしましょう。
ちなみに、ChatGPTを利用するにはOpenAIに登録が必要です。そのため、まだユーザー登録していない人は先にサインアップをしましょう。
また、OpenAIのAPI利用は、従課金制でお金を支払う必要があります。ただし、執筆時点では無料トライアルの期間もありましたので、このような制度を利用しつつ試してみましょう（2024年2月時点）。料金の詳細は、公式サイトを必ず確認した上で利用してください。
「API reference」をクリックすると画面が切り替わり、APIリファレンスを参照できるエリアが表示されます。こちらからAPIキーを取得します。
ログインした状態でAPIリファレンスの画面を開くと、画面右上に自分のアカウントが表示されます。こちらの中から「View API keys」をクリックしましょう。
そうすると、下図のように「Create new secret key」が表示されます。APIキーを発行する際に任意の名前を入力し、「Create secret key」をクリックするとAPIキーが発行されますので、こちらをコピーします。
取得したAPIキーは、VSCodeに拡張機能を導入した後に使用します。
【参考】：OpenAI 公式サイト 【参考】：OpenAI 公式サイト APIリファレンス 【参考】：OpenAI 公式サイト 料金
VSCodeで拡張機能を導入する
VSCodeを起動すると画面左側にメニューバーが現れます。下図の赤枠の拡張機能のアイコンをクリックしましょう。
すると検索モードが表示されますので、ここに「ChatGPT」と入力します。いくつか候補が表示されますが、今回は「ChatGPT - Genie AI」を利用します。
候補の中からこちらをクリックすると、拡張機能の詳細が画面右側に表示されます。拡張機能の詳細を確認し、問題がないようであれば、赤枠のインストールボタンを押しましょう。
【図】：ChatGPT - Genie AIのインストール
インストールが完了するとメニューバーの1番下にランプのマークが追加されます。すると画面が切り替わり、拡張機能の特徴などが表示されます。
その中に「Try editor view」というボタンがありますのでこちらを押してください。そうすると、画面が切り替わり、プロンプトの入力するエリアやショートカットが表示されます。
Genie AIにAPIキーを読み込ませる
最後にGenie AIに先ほど取得したAPIキーを読み込ませましょう。VSCodeの画面左側にあるランプのアイコンをクリックし、Templatureの下の入力エリアに文字を入力します。
下の「Ask」ボタンをクリックすると、画面上部にAPIキーの入力を促すメッセージが表示されます。先ほど取得したAPIキーを貼り付けて、エンターキーを押せば、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を設定しましょう。
これで、拡張機能の導入から準備が完了しました。次は、VSCodeでのChatGPTの使い方を紹介します。
ChatGPTとVSCodeの使い方
ChatGPTとVSCodeを連携させることができたら、次はChatGPTの機能を試してみましょう。本記事では、実際にコードの生成などをさせた画面も併せて紹介しますので、是非参考にしてください。
コードの自動生成する
それでは、コードを自動生成する方法をご紹介します。画面左側のランプマークをクリックし、Genie AIの画面を開きます。Templatureという場所に、入力エリアが表示されますので、こちらに指示を入力していきましょう。
例として、本記事ではGenie AIのTemplatureの入力エリアに「HTMLとJavascriptを使ってサンプルコードを記述して」と入力しました。その結果、下図のように簡単なコードを記述してくれました。
今回は簡単なコードを作成しましたが、条件をより具体的に追加することで、自分の作りたいコードを生成してくれるでしょう。
バグの発見
次に、既存のコードからバグを発見してみましょう。今回は、先ほど自動生成したコードの一部を、わざと間違えた状態にしました。
そして、間違えた状態のコードを記載したうえで「以下のコードのバグの原因を解説してください。また、バグの箇所を修正をしてください。」と指示を出します。
その結果、下図のようにバグの原因を指摘し、正しいコードを出力してくれました。最終的な動作確認はご自身で行う必要がありますが、この機能を使えば非常に効率的に開発を進められると分かります。
コードの解説をしてもらう
次は、コードの解説をさせてみます。既存のコードで、分からない部分などがある時、本来であればドキュメントを引いたり検索をする必要があります。しかし、この機能を使えば簡単にコードの解説をしてもらえます。
早速、コードの解説をしてもらいましょう。まずはコードを記述し、分からない部分をドラッグして範囲選択してください。そのうえで、右クリックをし「Gienie:Explain」を選択します。
すると、画面左側に選択範囲に関する説明が表示されます。ちなみに説明文は英語表記ですので、日本語にするには翻訳機能を使う必要があります。
ChatGPTとVSCodeを連携させて効率的に開発しよう
このように、ChatGPTとVSCodeを連携させることで、開発を非常に効率的に進めることができるとお分かりいただけたかと思います。コードの解説やバグの修正を自力で全て行うと、時間も労力もかかりますので、必要に応じてChatGPTを活用してみましょう。
Open AIのAPIは無料ではありませんが、従課金制ですので使った分だけ支払えば利用することができます。
VSCodeを開発で利用している場合、開発効率を上げる便利な機能となります。是非本記事を参考にして、ChatGPTを開発に取り入れてみましょう。
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
