ChatGPTとVSCodeを連携させる方法｜使い方を解説
Check!
- ChatGPTとVSCodeを連携することにより、開発が効率的に行える
- ChatGPTとVSCodeを連携させるには、OpenAIへの登録が必要になる
- ChatGPTとVSCodeの連携により、バグの発見やコードの最適化などができる
VSCodeには、ChatGPTの拡張機能が追加されており、ChatGPTとVSCodeを連携させると開発を効率的に行うことができるようになります。本記事では、ChatGPTとVSCodeの連携でできることや、連携方法・使い方について解説します。
ChatGPTとVSCodeの連携とは
ChatGPTとVSCodeの連携とは、コードエディタであるVSCodeでChatGPTを使えるようにすることです。その際に、2つの橋渡しを行うのがChatGPTｰGenie AIで、VSCodeからChatGPTのAPIにアクセスできるようにする拡張機能です。
ChatGPTは広い範囲の質問に答えてくれますが、Web上に情報の少ない専門的分野は苦手で、誤りのある回答を返すことも少なくありません。そこをカバーしているのがGenieAIです。コーディングとプログラミングに特化していて、正確な情報を提供してくれます。
したがって、ChatGPTとVSCodeの連携は、コーディングやプログラミングを支援してくれる機能といえます。以下では、ChatGPTやVSCodeについて、もう少し詳しく解説していきます。
ChatGPTとは
ChatGPTは2022年11月に米国OpenAIからリリースされ、基本的なチャットであれば登録のみで無料で利用できることもあり、一気に広まった自然言語で使えるチャットボットです。特にIT業界では、コードの自動生成やチェックなどの実用的な使い方が注目されています。
当初のChatGPTはブラウザ版だけでしたが、2023年3月にChatGPT APIがリリースされ、さまざまなアプリケーションやプログラムと連携させてChatGPTの活用ができるようになりました。
VSCodeとは
Microsoftが提供するVSCodeは、Windows・macOS・Linuxで使用できるほとんどの言語に対応した、無料で使える開発用コードエディターです。ソースコードもWebサイトで公開されており、誰でも利用できます。
無料で使えることで人気のコードエディタですが、拡張機能の豊富さも人気の秘密の一つです。本記事で紹介するChatGPTとの連携もVSCodeの拡張機能を利用したもので、コーディングやプログラミング開発の効率化に大きな貢献をしています。
ChatGPTとVSCodeの連携でできること
ChatGPTとVSCodeを連携させると、VSCodeで作成したコードに関することをChatGPTに問い合わせて、回答を得ることができます。対応するプログラム言語は、VSCodeが対応しているPython・JavaScriptなど幅広いです。
回答が得られる質問は、プログラミング言語の質問・アルゴリズムやデータ構造の解説・バグの修正提案・コードレビューなど、コーディングやプログラミング全般に渡ります。コーディングのトレーニングやプログラミングの頼もしい相棒として利用が期待できます。
ただし、VS Code自体はコードエディターなので、上記のようなプログラミングを効率化させるには拡張機能のインストールがほぼ必須です。
ChatGPTとVSCodeを連携させる方法
2つを連携するには、コードエディタのVSCodeの拡張機能を使ってChatGPT-Genie AIをインストールする必要があります。ここでは、順を追ってその方法を解説していきます。
＼気になる項目をクリックで詳細へジャンプ／
ChatGPTとVSCodeを連携させる5つの方法
OpenAIへ登録する
ChatGPTの利用には、ChatGPTを提供するOpenAIへの登録が必要です。まだ登録が済んでいない場合は、OpenAIへの登録から始めます。必要な情報はメールアドレスと電話番号です。メールアドレスの代わりにGoogle・Microsoftのアカウント・AppleIDでも可能です。
メールアドレスで登録した場合、入力したメールアドレスにメールが届きます。メールの中の「Verify email address」をクリックし、アカウント名を入力します。Google・Microsoft のアカウントやAppleIDで登録した場合は、この手順は不要です。
次の電話番号の入力画面では、スマートフォンの電話番号を入力します。すると、コード入力の画面に代わるため、スマートフォンにショートメッセージで届いた認証コードを入力します。入力後にどのOpenAIを使うかを問われますので、1つを選んで登録完了です。
Api Keyを取得する
アプリケーションやシステムにChatGPTを連携させるにはChatGPTのAPI（Application Programming Interface）が必要で、Api Keyを取得する必要があります。ただし、Api Keyは一度表示されたら再表示できません。必ずどこかに記録しておきましょう。
Api Keyを取得するには「Overview OpenAI API」にアクセスします。画面は「Welcome to the OpenAI platform」になります。画面右上のpersonal（個人的）をクリックして、メニューからView API Keysを選択します。
取得画面が表示され、Create new secret keyをクリックするとAPI key generatedの画面が出て、下にkeyが表示されます。keyの横にある緑のアイコンでkeyがコピーできるので、メモ帳などに貼り付けて保管しておきます。取得はこれで完了です。
OpenAIのAPIキーの取得は無料ですが、利用には従量課金制で料金が発生します。ただし、3か月間は18ドル分を無料で使えます。18ドル分は900万文字分とかなり大量ですが、返答の文字数もカウントされる点に注意が必要です。
また、OpenAIは料金の変動が頻繁にあるので、無料文字数の超過や期間が終了してからも使用する場合は、必ず確認しましょう。
拡張機能をインストールする
次に行うのは、VSCodeへの拡張機能genieai.chatgpt-vscodeのインストールです。VSCodeの起動画面の左上にある検索スペースに「genieai」と入力して検索すると、その下にランプマークのついた「ChatGPT-Genie AI」が検索されるので選択します。
すると画面左側にChatGPT-GenieAIの説明画面が表れるので、 確認してインストールします。インストールが完了すると。左側のサイドバーにランプマークが付け加えられます。これでインストールは完了です。
拡張機能を設定する
左側に付け加えられたサイドバーのランプマークをクリックして、出てきた画面に何かプロンプトを入力します。初めての方は右下にAPIキーの設定を求める画面が出てくるので、そこをクリックするとAPIキーの入力画面が出ます。
その入力画面に先ほど入手したAPIキーを入力すれば、APIキーの設定は完了です。一度設定すればシステムに記録されるので、再度行う必要はありません。
日本語化したい場合は、ChatGPT-Genie AI画面にあるアンインストールボタンの横にある設定ボタンから行います。設定メニューの中から拡張機能の設定を選択します。出てきた画面からGenieai › Prompt Prefix: Add…の項目を日本語に置き換えると日本語化できます。
正しく使えるか確認する
拡張機能の設定が終了すれば、VSCodeからChatGPTが使えるようになっているはずなので、確認してみるのがおすすめです。作成したコードの任意な部分を範囲選択して、右クリックした際に、ChatGPT:Add testsなど6つの項目が表示されていれば正常です。
ChatGPTとVSCodeの連携した使い方
同じ機能を使うにも、いくつかの方法があります。ここでは、一番使いやすい「該当のコードの範囲を指定→右クリック→メニューから機能を選択」で使う方法と、コードの自動生成をしてもらう方法を解説します。
＼気になる項目をクリックで詳細へジャンプ／
ChatGPTとVSCodeの連携した使い方
コードを自動生成してもらう
ChatGPTとVSCodeを連携させた場合の代表的な使い方とも言えるコードの自動生成は、以下の4ステップで簡単に行えます。
- サイドバーのランプアイコンをクリック
- 「Temperature」からGPTの正確さを選択
- 入力エリアに生成したいコードの指示を入力
- 「Ask」をクリック
ステップ2の正確さは、Precise（正確）・Balanced（バランス）・Creative（創造的）の3つから選べますが、コードの生成では正確性が求められるシーンが多いため、基本的にはPreciseがおすすめです。
バグを発見してもらう
コードのバグを発見してもらうには、コードの範囲指定→右クリック→メニューから「ChatGPT: Find bugs」を選択します。すると、選択した範囲内のバグを発見すると同時に改善されたコードも提示してくれます。
提示してくれた上部にある、「Copy≫insert」をクリックすると選択部分が改善案に置き換わります。ただし、提示してくれた改善案がすべて正しいとは限りません。最終確認は自分で行う必要がありますが、コーディングの際の強い味方になる機能です。
コードを最適化してもらう
コードを最適化することで、処理効率のいい読みやすいコードになり、プログラムの実行効率の向上が図れます。ただし、最適化したことでメモリ占有率が増えてしまう場合もあるので、使用しすぎには注意が必要です。
ChatGPTを組み込んだVSCodeでコードの最適化を図るためには、コードの範囲指定→右クリック→メニューから「ChatGPT: Optimize」を選択します。すると、最適化したコードを提案してくれます。
テストコードを教えてもらう
テストコード とは、そのコードが予定通りに動いているかを確認するためのコードです。不具合の早期発見やプログラムのバグを減らすなどのさまざまな目的を持ち、コーディングの基本技能です。
ChatGPTを組み込んだVSCodeでテストコードを作成してもらうには、コードの範囲指定→右クリック→メニューから「ChatGPT: Add tests」を選択します。すると指定した部分のテストコードを提案してくれます。
コードを説明してもらう
ChatGPTを利用したVSCodeには、既に作成されているコードの中に理解できない部分がある場合に、そのコードを解説してくれる機能があります。本来なら調べるのに時間がかかるところを一瞬で解決してくれ、コーディング勉強中の方には大きな助けとなる機能です。
この機能を使うには、コードの範囲指定→右クリック→メニューから「ChatGPT: Explain」を選択します。するとその部分の意味の解説文が生成されます。
その他
範囲指定で右クリックすると、上で紹介した機能以外にもさまざまな機能がでてきます。主なものを下に簡単に紹介します。
- ChatGPT: Add Comments 選択したコードにコメントを付け加える
- ChatGPT: Complete code 未完成や不足しているコードを完成させる
- ChatGPT: Ad-hoc prompt 選択したコードに対し、自分でプロンプトを設定する
「ChatGPT: Ad-hoc prompt」では、メソッド名で迷った時に、プロンプトで質問すればいくつかの候補をあげてくれるなど、さまざまなシーンで利用できます。
まとめ
ChatGPTとVSCodeを連携させると、プログラムコード作成の参考になるさまざまな提案をしてくれ、コーディングの効率化が図れます。2つの連携には、OpenAIへの登録とApi Keyの取得が必要です。ただし、ChatGPTの利用には従量課金制で料金が発生します。
2つを連携するには、VSCodeの拡張機能としてChatGPT-Genie AIをインストールします。ChatGPTとVSCodeを連携させれば、バグの発見やコードの最適化・テストコードの作成などができ、コーディングやプログラミングの強い味方になってくれます。
