VSCodeにChatGPTを！ 導入方法や使い方を理解して次世代の開発環境を整えよう
開発用エディタのド定番「VSCode」を使いこなそう 第4回
第4回は、AIを開発効率やプログラミングスキルの向上に役立てようということで、話題のChatGPTをVSCodeから利用できる拡張機能を紹介します。
はじめに
Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させ、利用の領域を拡げられることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。
対象読者
- テキストエディタメインで開発してきた方
- Visual Studioより軽い環境が欲しいと考えている方
- Visual Sudio Codeをもっと使いこなしたい方
必要な環境
本記事の内容は、以下の環境で動作を確認しています。
-
macOS Ventura 13.2
- Visual Studio Code 1.77
ChatGPTをVSCodeから利用できる「ChatGPT – Genie AI」
ChatGPTは、米国OpenAI社が提供するチャット型のAIサービスです。その卓越した性能は、国や教育機関で利用が制限されるなど、IT業界はもとより一般社会でも話題に上るサービスとなっています。特にIT業界では、コードを自動生成させる、コードをチェックさせるなど、実用的な面が注目されています。VSCodeには、このChatGPTを利用するための拡張機能がいくつか存在しますが、最近になって利用者数が増加しているのが「ChatGPT – Genie AI」です。
ChatGPT – Genie AIとは
ChatGPT – Genie AI（以降、Genie AI）は、VSCodeとChatGPTの橋渡しをする拡張機能です。拡張機能自身がAI機能を提供するわけではもちろんなく、VSCode上にあるコードに絡めた質問をChatGPTに問い合わせ、回答を表示するといった機能を持ちます。単に質問を出すだけならOpenAIのサイトでも行えますが、VSCode上のコードと絡められる、定型的な質問をあらかじめ用意しておけるなどのメリットがあります。ChatGPTを良きアドバイザーとして活用したり、ペアプログラミングの相手として切磋琢磨したりしながら、プログラミングスキルの向上に役立てることができるでしょう。
質問は、コンテキストメニューから発行することができ、既定では表1に挙げる質問があります。
| 質問 | 目的 |
|---|---|
| Add Tests | テストコードを生成したいとき |
| Find Problems | コードの問題点を指摘してほしいとき |
| Optimize | コードを最適化してほしいとき |
| Explain | コードのやっていることを説明してほしいとき |
| Add Comments | コードにコメントを追加してほしいとき |
| Complete Code | 未完成のコードを完成させてほしいとき |
| Custom Prompt | 上記以外の質問をしたいとき（Prompt1とPrompt2の2個） |
開発者からすれば、テストコードを作成してくれたり、コードの問題点を指摘してくれたり、コメントを入れてくれたりと至れり尽くせりなのですが、あくまでもアドバイスとして受け入れるのが正しい使い方です。具体的な実行例は後述していきますが、この姿勢で臨むようにしましょう。
［NOTE］gencay.vscode-chatgptは開発中止
ChatGPTをVSCodeから利用する拡張機能としては、かつてはAli GençayによるChatGPT（gencay.vscode-chatgpt）が人気がありましたが、仕様の一部がOpenAIの利用規約に触れるということで開発中止となっています。gencay.vscode-chatgptのWebページではGenie AIが後継としてレコメンドされています。
OpenAIのアカウントを取得する
拡張機能の利用にあたっては、まずはOpenAIのアカウントを取得するところから始めます。メールアドレス、Googleアカウント、Microsoftアカウントのいずれかの方法で登録が可能です。以下の画面（図1）から登録を済ませておきましょう。詳細は省きますが、登録に使用したメールアドレスに検証メールが届くので、そこにあるリンクにアクセス、携帯電話の番号を入力して到着するSMSからのメッセージの番号を入力すれば終了です。
［NOTE］アカウントの登録ができない場合
本記事の作成時点において、OpenAIのアカウントの登録時にエラーとなる事例が発生しています。サインアップ後に、「The email you provided is not supported.」というエラーメッセージが表示され検証メールが到着しなかったり、メールに記載されているURLにアクセスしても同様のメッセージが表示されて先に進めなかったりするものです。公式のサポート情報はありませんが、Google Chromeのシークレットモードを使用する、Firefoxなどの他のWebブラウザを使用するなどとすると回避できる場合もあるようです。筆者は、前者の方法で先に進めました。そのため、スクリーンショットにはシークレットモードである旨の表示があります。
この記事は参考になりましたか？
- 開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧
- この記事の著者
-
WINGSプロジェクト 山内 直（WINGSプロジェクト ヤマウチ ナオ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook ＜個人紹介＞WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
