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

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

目次

開く

閉じる

1. もっとAIを活用したいならプログラミングスクールの利用がおすすめ
2. AI・データサイエンスを学ぶなら転職も支援してくれるスクールがおすすめ
3. カリキュラムにない情報も学びたいなら対面型スクールがおすすめ
4. ChatGPTとVSCodeを連携させよう
5. ChatGPTとVSCodeの連携でできること
6. ChatGPTとVSCodeを連携させる方法
7. ChatGPTの「Codex」ならAPIなしで連携可能
8. ChatGPTとVSCodeの連携機能の使い方
9. 短期間で現場で使えるスキルを習得できるプログラミングスクール
10. 万全のサポートでつまづきを乗り越えられるプログラミングスクール
11. 直接対話しながら学びたい情報を指導してくれる対面型スクール
12. まとめ

もっとAIを活用したいならプログラミングスクールの利用がおすすめ

DMM 生成AI CAMPは、生成AIの事前知識が全くない方でも、現場で使えるスキルを短期間で学べるプラグラミングスクールです。マーケティングや営業など目的に応じて選べる4つのコースが用意され、生成AIエンジニアコースでは、初心者でも最短1ヶ月で生成AIアプリケーションを開発できるスキルを習得できます。

また、どのプランでも生成AIのプロによる課題フィードバックやチャットサポートを無制限で受けられるため、わかるまでサポートしてくれる体制が整っています。このように、ビジネスに活用できる生成AIのスキルを学びたい場合は、無制限でプロのサポートを受けられるDMM 生成AI CAMPの利用がおすすめです。

AI・データサイエンスを学ぶなら転職も支援してくれるスクールがおすすめ

AI プログラミングは、AIやデータサイエンスのスキルを習得できるプログラミングスクールです。現役講師によるリアルタイム解説・1対1でのメンタリングなどのサポート体制や、1,000社以上の研修実績から生まれた講座設計など、モチベーションを高く維持できるカリキュラムによって、未経験者でも99%が修了まで到達できます。

また、業界大手のdodaと連携し、IT転職に精通したキャリアコンサルタントが卒業後も転職活動を支援してくれるため、スクールで学んだスキルを活かせる仕事に就けるでしょう。スキルを習得してIT業界の転職を目指すなら、実践的なカリキュラムやキャリアコンサルタントのサポートが受けられるAI プログラミングがおすすめです。

カリキュラムにない情報も学びたいなら対面型スクールがおすすめ

.Pro（ドットプロ）は、講師との対面講義で学べる少人数特化型のプログラミングスクールで、未経験が選ぶAIが学べるプログラミングスクールでNo.1を誇っています。対面型によって直接コミュニケーションができるため、カリキュラムにはないけど学習したい情報を講師がキャッチアップし、柔軟に指導してくれます。

また、生成AIの開発には欠かせないPythonも学べるため、生成AIに関する知識を深く理解でき、講義時間外にはチャットでの対応や就職・転職のキャリア相談といったサポート体制も整っています。学びたいスキルをセミオーダー型のカリキュラムでしっかり習得したいと考えている方には、.Pro（ドットプロ）の利用がおすすめです。

ChatGPTとVSCodeを連携させよう

コードエディターであるVSCodeでは、拡張機能によって生成AIツールであるChatGPTと連携して使うこともできます。ChatGPTとVSCodeを連携させることで、より効率的に開発を行うことができます。

本記事では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つを連携するには、まずChatGPTのアカウント登録をしたうえで、VSCodeの拡張機能をインストールする必要があります。ここでは、順を追ってその方法を解説していきます。

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

VSCodeをインストールする

VSCodeをPCにまだインストールしていない場合は、公式サイトからインストールしておきましょう。ダウンロードページにアクセスすると、Windows、Linux、Macそれぞれのダウンロードボタンがありますので、使用中のOSに合わせて選びます。

ダウンロードできたらセットアップのためのファイルを開き、画面に従って設定を行い、インストールを完了させます。基本の言語は英語になっているため、日本語にしたい場合はメニューの「View」→「Command Palette」で「language」と入力し、「Configure Display Language」を選択して再起動します。

参考：Download Visual Studio Code – Mac, Linux, Windows

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

ChatGPTとVSCodeを連携させるには、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」のボタンが表示され、それををクリックするとCreate new secret keyの画面が出るので、任意の名前などを入力します。

入力後、「Create secret key」を押すとkeyが表示されます。keyの横にある緑のアイコンでkeyがコピーできるので、メモ帳などに貼り付けて保管しておきます。API Keyの取得はこれで完了です。

なお、API Keyは一度表示されたら再表示できません。忘れないよう必ずどこかに記録しておきましょう。

参考：API keys – OpenAI API

APIの利用は有料

ChatGPT（OpenAI）のAPIキーの取得は無料ですが、利用には従量課金制で料金が発生します。APIの料金は、使用するGPTのモデルによって異なります。

なお、OpenAIではサービス料金の変動が頻繁にあるので、APIを利用する場合はその時の料金を確認しておくと良いでしょう。

参考：API 料金

支払い情報の登録も忘れずに

APIの利用は有料なので、支払い情報の登録も忘れずにしておきましょう。APIプラットフォームにログインした状態で画面左側のサイドメニューにある「Go to Billing」をクリックすると、保有しているクレジットの詳細画面が表示されます。

APIの料金はクレジットを購入して支払う形態なので、はじめはクレジット残高が「$0.00」になっています。その下に「Add payment details」のボタンがあるので、そこからクレジットカードの情報を登録しましょう。

なお、ChatGPTの有料プランに加入している場合もAPI用に別途支払い情報の登録が必要で、登録できるのはクレジットカードのみです。

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

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

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

GenieAI

GenieAIは最も代表的なVSCodeのChatGPTプラグインです。コード補完やバグ修正など、コーディング・プログラミングに関するさまざまなタスクを支援してくれます。

日本語にも対応しており、GPT-4、GPT-3.5、GPT-3といったモデルを活用してタスクを行うことができます。カスタマイズ機能も柔軟性があり、ニーズに応じて自由にAPIの動作を調整できることも特徴です。

参考：Genie AI: ChatGPT in VS Code

参考：ChatGPT – Genie AI｜Visual Studio Marketplace

Continue

Continueも、コーディング・プログラミングに関するさまざまなタスクを支援してくれるChatGPTベースのAI拡張機能です。エージェントとして機能するので、AIと協力して一連の開発タスクを進められます。

チャットで質問や相談をしたり、入力時にコードの候補を受け取ることなどもできます。編集と会話の同時並行作業がしやすくなっているため、効率よく作業ができるでしょう。

参考：Continue – Ship faster with Continuous AI

参考：Continue – open-source AI code agent｜Visual Studio Marketplace

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

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

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

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

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

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

ChatGPTの「Codex」ならAPIなしで連携可能

上記はChatGPTを提供するOpenAIのAPIを利用する前提での連携方法ですが、中にはAPIなしで連携ができる拡張機能もあります。代表的なのが「Codex」を利用する方法です。

Codexとは、2025年5月に新たに登場したChatGPTのAIコーディングエージェントです。ChatGPTのPlus、Pro、Businessといった有料プランでのみ利用可能で、コードの作成・レビュー・リリースをサポートしてくれます。

ChatGPTの有料ユーザーであれば、「Codex IDE 拡張機能」を使ってVSCodeと連携させることができます。IDE拡張機能をインストールするとChatGPTアカウントでのサインインが求められるので、有料プラン契約中のアカウント情報を入力します。

ChatGPTのプラン料金にCodexの使用クレジットが含まれているため、追加の料金は必要ありません。

参考：Codex｜OpenAI

参考：Codex IDE extension

参考：Codex – OpenAI’s coding agent｜Visual Studio Marketplace

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

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

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

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

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

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

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

バグを発見してもらう

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

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

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

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

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

GenieAIなどではデフォルトのプロンプトにもコード最適化機能があり（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を連携させると、VSCode上でChatGPTがプログラムコードの作成や修正の参考になるさまざまな提案をしてくれ、コーディングの効率化が図れます。

2つのツールの連携には、VSCodeのインストール、およびOpenAIへの登録とAPI Keyの取得が必要です。その後、VSCodeの拡張機能をインストールします。また、CodexなどAPIなしで連携できる拡張機能も一部あります。

APIやCodexの利用料金はかかりますが、ChatGPTとVSCodeを連携させれば、バグの発見やコードの最適化・テストコードの作成などができ、コーディングやプログラミングの強い味方になってくれます。