ChatGPTとVSCodeを連携させる方法｜使い方を解説

VSCodeには、ChatGPTの拡張機能が追加されており、ChatGPTとVSCodeを連携させると開発を効率的に行うことができるようになります。本記事では、ChatGPTとVSCodeの連携でできることや、連携方法・使い方について解説します。

目次

開く

閉じる

1. ChatGPTとVSCodeを連携させよう
2. ChatGPTとVSCodeの連携でできること
3. ChatGPTとVSCodeを連携させる方法
4. ChatGPTとVSCodeの連携機能の使い方
5. まとめ

ChatGPTとVSCodeを連携させよう

ChatGPTとVSCodeの連携とは、コードエディターであるVSCodeでChatGPTを使えるようにすることです。VSCodeとChatGPTを連携させることで、より効率的に開発を行うことができます。

本記事ではChatGPTとVSCodeの連携について、その方法などを交えて解説していきます。まずは、ChatGPTやVSCodeについて、その概要を解説していきます。

ChatGPTとは

ChatGPTは2022年11月に米国OpenAIからリリースされた、自然言語で会話ができる生成AIチャットボットです。基本的なチャットのみであれば無料で利用できることもあり、一気に世界中に広まりました。

ChatGPTは日常会話から一般的な事象に関する情報収集、アイデア出しなどさまざまな場面で活用できますが、特にIT業界ではコードの自動生成やコードレビューなどの使い方が注目されています。

ChatGPTは、英語や日本語といった自然言語のみならず多数のプログラミング言語にも対応しており、プログラミングの学習や業務にも活用できるのです。

参考：ChatGPT

VSCodeとは

Microsoftが提供するVSCode（Visual Studio Code）は、Windows・macOS・Linuxで使用できるほとんどの言語に対応した、無料で使える開発用コードエディターです。

無料で使えることで人気のコードエディターですが、拡張機能の豊富さも人気の秘密の1つです。本記事で紹介するChatGPTとの連携もVSCodeの拡張機能を利用したもので、コーディングやプログラミング開発の効率化に大きな貢献を果たしています。

参考：Visual Studio Code

ChatGPTとVSCodeの連携でできること

ChatGPTとVSCodeを連携させると、VSCodeで作成したコードに関することをChatGPTに問い合わせて、回答を得ることができます。対応するプログラム言語は、VSCodeが対応しているPython・JavaScriptなど幅広いです。

回答が得られる質問は、アルゴリズムやデータ構造の解説・バグの修正提案・コードレビューなど、コーディングやプログラミングの作業全般に渡ります。

今まで人の目によるチェック・人の手による修正と、一から人力で行っていた部分でChatGPTの力を借りることで、業務効率・学習効率が大幅にアップするでしょう。

ChatGPTとVSCodeを連携させる方法

2つを連携するには、VSCodeの拡張機能をインストールする必要があります。ここでは、順を追ってその方法を解説していきます。

＼気になる項目をクリックで詳細へジャンプ／

ChatGPTのアカウント登録をする

ChatGPTの利用には、ChatGPTでのアカウントが必要です。まだ登録が済んでいない場合は、ChatGPTでのアカウント登録から始めます。必要な情報はメールアドレスと電話番号です。メールアドレスの代わりにGoogle・Microsoftのアカウント・AppleIDでも可能です。

メールアドレスで登録した場合、入力したメールアドレスにメールが届きます。メールの中の「Verify email address」をクリックし、アカウント名を入力します。Google・Microsoft のアカウントやAppleIDで登録した場合は、この手順は不要です。

次の電話番号の入力画面では、スマートフォンの電話番号を入力します。すると、コード入力の画面に代わるため、スマートフォンにショートメッセージで届いた認証コードを入力します。これでChatGPTにログインできるようになります。

ChatGPTのAPI Keyを取得する

他のアプリケーションやシステムにChatGPTを連携させるにはChatGPTのAPI（Application Programming Interface）が必要で、API Keyを取得する必要があります。

API Keyを取得するには、OpenAI PlatformにログインしてAPI Keysのページを開きます。画面右上に「+ Create new secret key」のボタンが表示されますので、それををクリックするとAPI key generatedの画面が出て、下にkeyが表示されます。

keyの横にある緑のアイコンでkeyがコピーできるので、メモ帳などに貼り付けて保管しておきます。API Keyの取得はこれで完了です。なお、API Keyは一度表示されたら再表示できません。必ずどこかに記録しておきましょう。

参考：OpenAI Platform API keys

API Keyの利用は有料

ChatGPT（OpenAI）のAPIキーの取得は無料ですが、利用には従量課金制で料金が発生します。APIの料金は、使用するGPTのモデルによって異なります。ただし、3か月間は5ドル分を無料で使えます（2024年7月執筆時点）。

なお、OpenAIではサービス料金の変動が頻繁にあるので、無料期間が終了、あるいは無料文字数を超過して使用する場合は、必ずその時の料金を確認しましょう。

参考：Pricing｜OpenAI

VSCodeで拡張機能をインストールする

次に行うのは、VSCodeで提供されているChatGPT向けの拡張機能（プラグイン）のインストールです。VSCodeの起動画面の左上にある検索スペースに拡張機能名を入力して検索すると、機能が表示されます。

インストールしたい機能をえらでクリックすると詳細画面が表れるので、 確認してインストールします。なお、ChatGPTとの連携ができる拡張機能は多数あります。それぞれ用途が異なるので、ニーズに合ったものを選びましょう。以下でおすすめを2つ紹介します。

GenieAI

GenieAIは最も代表的なVSCodeのChatGPTプラグインです。コーディング・プログラミングに関する質問や相談に特化しています。

GenieAIをインストールすることで、VSCodeのサイドバーからChatGPTに質問や相談ができるようになり、さらにデフォルトのプロンプトによって作成したコードのレビューやコードの解説などを行ってくれます。

ChatGPT Reborn

ChatGPT Rebornは、ChatGPTの機能を使用してコードの記述や改善、最適化などができるプラグインで、GenieAIから派生したものです。「System Context」を編集できるのが大きな特徴で、これにより日本語によるやり取りなど個別のニーズに対応可能になります。

デフォルトのプロンプトでバグの発見やコードの最適化、テストやコメントの追加などができ、さらにカスタムプロンプトも追加することができます。

VSCodeの拡張機能にAPI Keyを設定する

拡張機能を追加すると、サイドバーにアイコンが追加されます。アイコンをクリックして、出てきた画面に何かプロンプトを入力します。初めての利用ではAPI Keyの設定を求める画面が出てきます。

その入力画面に先ほど入手したAPI Keyを入力すれば、設定は完了です。VSCode上でChatGPTを使えるようになります。一度API Keyを設定すればシステムに記録されるので、再度行う必要はありません。

正常に動作するか確認する

拡張機能の設定が終了すれば、VSCodeからChatGPTが使えるようになっているはずなので、正常に動作するか確認してみましょう。

例えばGenieAIなら、作成したコードの任意の範囲を選択して右クリックした際に、ChatGPT:Add testsなど6つのデフォルトプロンプトの項目が表示されていれば正常です。

ChatGPTとVSCodeの連携機能の使い方

ChatGPTとVSCodeを連携させると、プログラミング・コーディングにおいてさまざまなことができるようになります。どのようなことができるのか、具体的な使い方について一例を紹介していきます。

＼気になる項目をクリックで詳細へジャンプ／

コードを自動生成してもらう

ChatGPTとVSCodeを連携させた場合の代表的な使い方とも言えるのが、コードの自動生成です。GenieAIやChatGPT Rebornでは、以下の3ステップで簡単に行えます。

1. サイドバーのアイコンをクリック
2. 入力エリアにコード生成の指示を入力
3. 「Ask」をクリック

指示（プロンプト）次第で出力も変わるため、ごく簡単なコードからやや高度なコードまで幅広く対応することができます。Pythonや JavaScript、HTMLなど、主要な言語でコードを生成可能です。

バグを発見してもらう

GenieAIやChatGPT Rebonでは、デフォルトのプロンプトに「ChatGPT: Find bugs」というものがあります。このプロンプトは、コードの範囲指定→右クリック→メニューから選択できます。

Find bugsでは、選択した範囲内のバグを発見すると同時に改善されたコードも提示してくれます。提示してくれた改善案がすべて正しいとは限りませんが、最終確認は自分で行う必要がありますが、コーディングの際の強い味方になる機能です。

なお、コード生成の時と同じようにプロンプトを手動入力してバグの発見・修正を実行してもらうこともできます。

コードを最適化してもらう

コードを最適化することで、処理効率のいい読みやすいコードになり、プログラムの実行効率の向上が図れます。

デフォルトのプロンプトにもコード最適化機能があり（ChatGPT: Optimize）、バグの発見と同じようにコードの範囲指定→右クリック→メニューから選択できます。これにより、最適化したコードを提案してくれます。

テストコードを教えてもらう

テストコード とは、そのコードが予定通りに動いているかを確認するためのコードです。不具合の早期発見やプログラムのバグを減らすなどのさまざまな目的を持ち、コーディングの基本技能です。

ChatGPTを組み込んだVSCodeでテストコードを作成してもらうには、コードの範囲指定→右クリック→メニューから「ChatGPT: Add tests」を選択します。すると、指定した部分のテストコードを提案してくれます。

コードを説明してもらう

ChatGPTを利用したVSCodeには、既に作成されているコードの中に理解できない部分がある場合に、そのコードを解説してくれる機能があります。本来なら調べるのに時間がかかるところを一瞬で解決してくれ、コーディング勉強中の方には大きな助けとなる機能です。

この機能を使うには、コードの範囲指定→右クリック→メニューから「ChatGPT: Explain」を選択します。するとその部分の意味の解説文が生成されます。

その他

デフォルトプロンプトのメニューには、上で紹介した機能以外にもさまざまな機能がでてきます。主なものを下に簡単に紹介します。

1. ChatGPT: Add Comments 　 選択したコードにコメントを付け加える
2. ChatGPT: Complete code 未完成や不足しているコードを完成させる
3. ChatGPT: Ad-hoc prompt　 選択したコードに対し、自分でプロンプトを設定する

「ChatGPT: Ad-hoc prompt」では、メソッド名で迷った時に、プロンプトで質問すればいくつかの候補をあげてくれるなど、さまざまなシーンで利用できます。

まとめ

ChatGPTとVSCodeを連携させると、プログラムコード作成の参考になるさまざまな提案をしてくれ、コーディングの効率化が図れます。2つの連携には、OpenAIへの登録とAPI Keyの取得が必要です。また、APIの利用には従量課金制で料金が発生します。

2つを連携するには、VSCodeの拡張機能をインストールします。ChatGPTとVSCodeを連携させれば、バグの発見やコードの最適化・テストコードの作成などができ、コーディングやプログラミングの強い味方になってくれます。