この記事のポイント
この記事は、AI対話システム「ChatGPT」とコードエディタ「VSCode」を連携する方法について説明しています。- ChatGPTとVSCodeを連携させることで、プログラミング作業が効率的に進められるといったメリットがあります。
監修者プロフィール
坂本将磨
Microsoft AIパートナー、LinkX Japan代表。東京工業大学大学院で技術経営修士取得、研究領域：自然言語処理、金融工学。NHK放送技術研究所でAI、ブロックチェーン研究に従事。学会発表、国際ジャーナル投稿、経営情報学会全国研究発表大会にて優秀賞受賞。シンガポールでのIT、Web3事業の創業と経営を経て、LinkX Japan株式会社を創業。
対話型AI「ChatGPT」と高機能コードエディタ「VSCode」の連携により、開発者はプログラミング作業を更に効率的かつスムーズに進めることが可能です。
本記事では、そんなChatGPTとVSCodeを連携させるメリットや導入方法、実際の使用例や注意点をわかりやすく解説いたします。コードの自動補完、デバッグ支援、最適化の提案など、AIを活用した開発環境の構築方法について知りたい方はぜひ参考にしてください。無限に広がる開発の可能性を、ChatGPTの支援とともに体験していただけることでしょう。
最新モデル、ChatGPT4o(GPT-4o)について詳しく知りたい方は、こちらの記事もご覧ください⬇️
ChatGPT-4o(GPT4 omni)とは？使い方、料金など詳細を徹底解説！
目次
ChatGPTとは
ChatGPTはOpenAIが開発した対話型AIシステムです。学習した大量のデータをもとに様々な質問に回答することができ、更には人間のような自然な会話も可能で、分野を問わず様々な領域で使用されています。
そして、ChatGPTは単なるチャットボットに留まらず、プログラミングにおいても優れた性能を発揮します。
簡単なコーディングはもちろん、デバッグやコードの最適化などにおいても非常に強力なサポートを得る事ができ、開発者の生産性向上に大きく貢献できるツールとしても注目されています。
【関連記事】
➡️ChatGPTをプログラミングに活用するコツを解説！対応言語や使用例も紹介
VSCodeとは？
VSCode(Visual Studio Code)はMicrosoftが開発・提供している軽量なコードエディタです。シンプルな操作性と高い拡張性を備えており、最近では多くの開発者に利用されています。
VSCodeの最大の特徴は、豊富な拡張機能です。デバッグツール、自動補完、文法チェックなど、開発をサポートするさまざまな拡張機能をインストールできます。これにより、生産性と開発効率を大きく向上させることができます。
ChatGPTとVSCodeの連携させるメリット
ChatGPTとVSCodeを連携させる主なメリットは以下の通りです。
- コードの自動補完機能や、生成が容易に行える
- バグの特定やデバッグがスムーズに行える
- コードの要約に加え、コメントの自動生成も可能
- 開発作業の手順で迷った時に、いつでもChatGPTに質問する事が可能
- ChatGPTによるコードレビューや提案を活用できる
- 開発ドキュメント作成を自動で行える
このように、ChatGPTの高度な言語処理能力とVSCodeの豊富な機能がシナジーを発揮し、開発スピードを飛躍的に向上させる事が可能になります。
AIを活用することで、より創造性を高めつつ、スピード感のあるコーディングが実現できるのです。
連携の前提条件と必要な環境
ChatGPTとVSCodeの連携を行なうには、以下の前提条件を満たす必要があります。
- Windows、Macどちらでも可能
- VSCodeがインストール済みであること
- ChatGPTのAPIキーを取得済みであること
- VSCodeでChatGPT連携機能を提供する拡張機能をインストールしている
これらについては次の連携させていく手順で解説していきますので安心して下さい。
連携に必要な拡張機能として、Genia AIやGithub Copilotなどがあります。機能面での違いはあるので、目的に合わせて選択しましょう。
【関連記事】
➡️Github Copilotとは？その使い方や料金、VScodeへの導入方法を解説
ChatGPTとVScodeを連携させる方法
ここからは、ChatGPTとVSCodeの具体的な導入手順を説明していきます
。
初心者の方でもわかりやすいように、OpenAIのアカウント開設やAPIキーの取得方法から解説しています。
OpenAI(ChatGPT)へ登録する
まずはOpenAIのアカウント登録が必要です。以下の手順でアカウントを取得してください。
- OpenAIのサイトにアクセス
- 右上の[Sign Up]からアカウント登録
- 必要事項を入力し、アカウントを作成
- メール認証(電話番号を完了させる)
【関連記事】
➡️ChatGPTの始め方・ログイン方法をわかりやすく解説！
OpenAI(ChatGPT）のAPIキーを取得する
次にAPIキーを取得します。これはChatGPTとの連携する上で必須です。
- OpenAI APIにアクセス
- [Create new Secret Key]から新しいAPIキーを取得する
- APIキーをコピーし、以降の設定で使用できるようにしておく
APIキーの発行手順で不明点がある場合はこちらの記事を参照してみて下さい。
➡️ChatGPT(OpenAI)のAPIキー発行・取得手順を解説！
拡張機能をインストールする
VSCodeにChatGPT連携機能を追加する拡張機能をインストールする手順を説明していきます。
代表的な拡張機能としては、Genia AIやGithub Copilotなどが挙げられますが、
ここではGenie AIを用います。
-
「VSCode」を起動し、左サイドバーから「拡張機能」をクリックすると画像のページが表示されます。
拡張機能ストア
-
左上に検索バーが表示されるので、「Genie AI」と検索し、インストールをクリックします。
Genie AI
-
左サイドバーにランプのアイコンが表示されればインストール完了です。
サイドバーにランプマークが表示
Genie AIにAPIキーを設定する
最後に、インストールしたGenie AIに APIキーを読み込ませる必要があります。
-
左サイドバーのランプアイコンをクリックすると、次のような画面が表示されます。
Genie AIのホーム画面
-
チャット欄でメッセージを送信すると、画面上部でAPIキーの入力求められるので、先ほど発行したキーを入力します。
画面上部のバー：APIキーの入力を求められる
- エンターキーを押し、特にエラーが表示されなければ設定は完了です。
APIキーは一度登録すれば、基本的にはそれ以降求められる事はありません。
ChatGPTとVScodeを連携してできること
設定が完了したら、さまざまなChatGPTの機能をVSCode上で利用できます。ここでは代表的な機能を紹介していきます。
コードの自動生成をする
コードの自動生成は、開発効率を大きく向上させてくれます。
以下は、ChatGPTを用いてコードを生成した例です。
Python、OpenCVを用いて、画像にモザイクをかける関数を作るようにChatGPTに指示を出したところ、このようなコードを提案してくれました。
コードを生成してもらう
ただコードを生成するだけではなく、コード内のコメントでそれぞれの行が何をしているのかを明示し、さらにはコードの全体的な説明やOpenCVのインストールなどを丁寧に説明してくれています。
バグの発見と解決
コードにバグがある場合、ChatGPTにバグの原因を尋ねることができます。多くの場合、正確な原因を指摘してくれます。
さらに、バグを解決するための提案もしてくれるので、スムーズにデバックを行う事ができます。
以下の画像は、先ほどChatGPTに生成してもらったコードを一部変更してエラーが出るようにしたものです。エラーメッセージも与えずに、大雑把な質問の仕方をしてみました。
エラーの特定と解説
このように、エラーが出てしまうコードをChatGPTに送信するだけでエラーの原因を特定し、修正箇所を解説してくれました。
コード最適化の提案をしてもらう
同じ結果をより効率的に実現する最適化コードの提案もしてくれます。実行速度を上げたり、メモリ使用量を下げるなどのアドバイスがもらえます。
以下のコードは、Pythonでfor文を使って0から9999999までの数の平方のリストを作成するコードです。
ChatGPTに最適化を頼むコード
このコードをより速く実行できるようなコードの提案をChatGPTに頼むと、以下のようなコードを提案してくれました。
ChatGPTが最適化したコード
提案されたコードは、リスト内包表記活用したものです。
筆者のローカル環境でそれぞれのコードを実行してみたところ、前者は約1.1秒、後者は約0.7秒と、ChatGPTが提案してくれたコードでは処理速度が高速化されていることを確認できました。
ChatGPT利用時の注意点とトラブルシューティング
ChatGPTは強力なツールですが、完璧とは限りません。注意すべき点やトラブルへの対処法を紹介します。
- 生成結果に誤りが含まれる可能性があるため、常に確認が必要
- 大量のプロンプト送信は利用制限につながる場合がある
- ネットワークエラー時の再接続には時間がかかることがある
このような点に注意し、ChatGPTの回答を鵜呑みにせず確認する習慣が大切です。
【関連記事】
➡️ChatGPTの問題点とは？その危険性や社会に与える影響を解説
まとめ
この記事では、APIキーの発行から拡張機能の導入手順と、実際の機能や活用例についてを解説しました。
ChatGPTとVSCodeを連携することで、開発効率と生産性が格段に向上します。コードの自動生成やデバッグ、最適化などAIの能力を開発の場面で最大限に活用できます。
ただし、ChatGPTによる出力は必ずしも完璧とは限りません。その能力を過信せず、注意深く利用することが大切です。
本記事で紹介した拡張機能の設定方法や、代表的な使用例を参考に、自分の開発に取り入れてみてください。
