ChatGPTとVSCodeを連携！2つの方法や注意点などを紹介！

ChatGPTを使っているものの、ブラウザとVSCodeを行き来することで生産性が落ちていると感じていませんか？

そのままではコピペミスなどで余計な手間が発生し、せっかくのChatGPTの力を活かしきれていない可能性もあります。

ChatGPTとVSCodeを連携させれば、コードの生成やレビューをリアルタイムで効率化できます。

本記事では、ChatGPTとVSCodeをシームレスに連携する方法、具体的な連携ツール、さらに注意点について詳しく解説しています。

この記事を読めば、ChatGPTとVSCodeを連携させ、作業の手戻りやミスを減らし、より効率的にコーディングを進められるようになるでしょう。

以下の記事では、ChatGPTのプログラミングへの活用やコツ、各ツールのプログラミング能力の比較について解説しています。ぜひあわせてご覧ください。

弊社SHIFT AIでは、ChatGPTをスムーズに導入できるよう、セミナーを開催しています。無料で参加可能ですので、ぜひこれを機会に詳細を確認してみてください。

ChatGPTとVSCodeは連携できる？

ChatGPTとVSCodeは実は簡単に連携できます。

連携することで、ChatGPTの強力なAI機能をVSCode内で直接活用でき、コード生成やレビューのプロセスを一層効率化することが可能です。

VSCodeにプラグインを導入することで、これまでブラウザとエディタ間で行き来していた煩わしさを解消し、リアルタイムにAIの支援を受けることができるようになります。

現在、いくつかのツールがChatGPTとVSCodeの連携をサポートしています。

例えばGenie AIやBito AIなどの拡張機能は、手軽にインストールでき、APIキーを利用して最新のモデルも利用可能です。

これにより、コードの自動生成、バグ修正、リファクタリングなど、幅広いタスクをChatGPTに任せられます。

また、ChatGPTを日本語で利用することも可能です。

インターフェースや機能が英語中心であっても、VSCode内で日本語の指示を与えることができるので、効率よく作業を進められます。

次に、ChatGPTとVSCodeを連携させるための事前準備について解説していきます。

ChatGPTとVSCodeを連携させる事前準備

ChatGPTとVSCodeを連携させるためには、まずChatGPT側で以下の準備が必要です。

• ChatGPTのアカウントを作成
• API Keyを取得
• 支払い方法の登録

これらについて解説します。

ChatGPTのアカウントを作成

最初のステップとして、ChatGPTを使用するためにOpenAIのアカウントを作成します。

公式サイト（OpenAI Platform）にアクセスし、「Sign Up」ボタンをクリックします。

任意の方法でアカウントを作成し、ログインしてください。

アカウントを作成することで、ChatGPTをブラウザやAPIから利用できます。

次に、APIの利用やツール連携に進むために、API Keyの取得を行います。

API Keyを取得

ChatGPTとVSCodeの連携は、基本的にはAPIを介して行われるため、OpenAIのAPI Keyが必要です。

以下の手順に従ってAPI Keyを取得しましょう。

1. OpenAIのダッシュボードにアクセス
   先ほどのOpenAIのダッシュボードにログインします。
2. API Keyの生成
   ダッシュボードのメニュー内にある「API Keys」タブを選択し、「Create new secret key」ボタンをクリックします。これにより新しいAPI Keyが生成されます。

3. API Keyの保存
   生成されたAPI Keyは一度しか表示されないため、必ずコピーしてメモ帳などにペーストするなどして保管してください。

API Keyを取得することで、VSCodeの拡張機能でChatGPTを利用できるようになります。

また、APIの利用に応じたクエリ数やリクエスト数もこのKeyに紐づいているため、正確に管理することが重要です。

支払い方法の登録

OpenAI APIの利用には、支払い方法の登録が必須です。

以下の手順で支払い方法を登録してください。

1. OpenAIのアカウントにログイン
   OpenAIのダッシュボードにログインし、右上のアイコンから「Your plofile」に移動します。

2. 支払い情報の入力
   「Billing」タブに移動し、Pyment methodsから支払い情報を登録します。

3. クレジットの購入
   Billingタブで「Add to credit balance」を選択して、クレジットを追加します。
   クレジットは、$5から$97ドルの間で追加でき、オートチャージにも対応しています。

ここまでの設定を完了することで、APIからChatGPTを利用する準備が整います。

ChatGPTとVSCodeを連携する方法2選！

VSCodeとChatGPTを連携するためには、いくつかのツールが存在します。

ここでは、特に人気のある以下の2つのツールを紹介します。

• Genie AI：VSCodeで最も人気のあるChatGPT連携ツール
• Bito AI：API Key不要で気軽に使えるツール

これらを活用することで、VSCode内でChatGPTのサポートを受けながら、リアルタイムでコーディングやレビューを効率化することが可能です。

Genie AI：VSCodeで最も人気のあるChatGPT連携ツール

Genie AIは、VSCodeとChatGPTをシームレスに連携させるために最適なツールです。

この拡張機能を使えば、API Keyを用いてChatGPTの強力なAI機能をVSCode内で直接活用できます。

Genie AIは、リアルタイムのコード補完やバグ修正、リファクタリングなど、様々な開発タスクを支援してくれます。

• 特徴：高度なカスタマイズ機能があり、開発者が自由にAPIの動作を調整可能。入力補完やデバッグの際も、ChatGPTの柔軟なサポートが得られます。
• 使い方：API Keyを取得し、Genie AIの設定に入力することで、すぐにVSCode内で利用可能です。必要な手順は簡単で、ツールの導入は数分で完了します。
• 利便性：Genie AIは、日本語入力にも対応しているため、英語が苦手なエンジニアにも適しています。

Genie AIは、VSCodeの拡張機能であり、VSCode内で検索して簡単にインストールできます。

インストールが完了したら、画面左端のバーにGenie AIのアイコンが表示されるので、そちらをクリックしてください。

すると、このようにGenie AIのChat画面が表示されます。

ここでなんでもいいので、何か一言Chatをしてください。

するとこのようにAPI Keyの設定を求められます。

ここに、あらかじめ取得したOpenAI API Keyを入力してください。

設定が正常に完了すると、このように先ほど入力したChatに対する回答が出力されます。

当然日本語にも対応しています。

ここからは、Genie AIの機能について紹介します。

まずは、Chat形式でChatGPTに質問ができる「GENIE: CONVERSATION VIEW」モードです。

こちらは先ほどの画像で紹介した機能で、ブラウザ版ChatGPTと同じような感覚でChatGPTを使うことができます。

続いて、プロンプトで指定した条件でコードを生成してくれる「GENIE: EDITOR VIEW」モードです。

テキストボックスに実装したい内容を入力して、Askをクリックすることで、このようにコードを生成してくれます。

Genie AIには、これらの代表的な機能以外にも多くの機能があり、それらはエディタ内で右クリックから利用できます。

これらの機能について簡単にまとめます。

• Genie: Add Tests
  選択したコードに対応するテストコードを生成します。テストコードの作成を自動化することで、テストプロセスの時間を短縮します。
• Genie: Find Bugs
  コード内のバグや潜在的な問題を検出します。右クリックして「Find bugs」を選択すると、ChatGPTがコードを解析し、問題点を報告します。
• Genie: Optimize
  コードの最適化提案を行います。選択したコードに対して「Optimize」を実行すると、ChatGPTが効率的なコードに改善する提案をします​。
• Genie: Explain
  選択したコードの動作や意味を詳しく説明します。コードの理解が必要なときに、右クリックして「Explain」を実行することで、即座に詳細な説明を得られます。
• Genie: Add Comments
  選択したコードに自動的にコメントを追加します。右クリックして「Add comments」を選択することで、ChatGPTが適切なコメントを生成してコードに付加します。
• Genie: Complete Code
  この機能は、未完成のコードや省略されたコード部分を自動的に補完します。選択したコードブロックに基づいて、ChatGPTが適切なコードを提案し、必要な処理を自動で完了します。
• Genie: Ad-hoc Prompt
  カスタムプロンプトを使用して、特定のコードブロックに対する個別の質問やタスクを実行できる機能です。右クリックで選択したコードに対して「Ad-hoc Prompt」を実行し、自分の好みのカスタムプロンプトを指定すると、そのプロンプトが次回以降のクエリに使用されます。これにより、特定のニーズに合わせた柔軟な対応が可能です​。

このツールを導入することで、日々のコーディング作業が大幅に効率化され、エラーの少ない開発プロセスを実現できます。

なお、Genie AIは最新のGPT-4oやo1-previewにも対応しており、設定から使用するモデルを変更できます。

Bito AI：API Key不要で気軽に使えるツール

Bito AIは、API Keyを必要とせずにVSCode内でChatGPTの機能を活用できるツールです。

インストール後、複雑な設定をすることなく、すぐに利用できるため、導入の手間を最小限に抑えたいユーザーに最適です。

特に、コストや技術的なハードルを気にせず、ChatGPTを試したいというエンジニアにとって魅力的な選択肢です。

• 特徴: API Keyの取得や設定が不要で、簡単なインストールだけで利用開始可能。無料でも利用できる範囲が広く、初期コストを抑えたい場合に最適です。
• 使い方: 拡張機能をインストールするだけで、すぐにVSCodeでChatGPTの支援を受けることができます。設定も直感的で、初心者でも簡単に導入できます。
• 利便性: API Keyの管理を気にせずに、簡単にChatGPTを試せるため、スピーディーに導入したい企業や開発者におすすめです。

Bito AIの利用を始めるには、まずアカウント登録が必要になります。

アカウント登録が完了すると、このようにBito AIを利用可能になります。

なお、アカウント登録の際AIのアウトプット言語を設定でき、日本語にも対応しています。

Bito AIには、無料の「Forever Freeプラン」と有料の「10X Developerプラン」の2種類のプランがあります。

「Forever Freeプラン」では、1日のリクエスト数が20件に制限され、利用できるモデルも基本モデル（恐らくGPT-3.5等）です。

「10X Developerプラン」になると、GPT-4oやClaude 3.5 Sonnet等の最新の高度なAIモデルが利用できます。

また、リクエスト数も1か月あたり600件になり、追加でリクエストすることも可能です。

料金は月額15ドル（約2,100円）で、追加のリクエスト1件につき0.03ドル（約4円）が課金されます。

基本的な機能はGenie AIと変わらず、Chat機能やコード生成機能、エディタ内で右クリックしてBito AIの様々な機能を利用できます。

Bito AIは、特に手軽さを重視するユーザーにぴったりのツールで、ChatGPTの機能を気軽に試しながら、効率的に作業を進めることが可能です。

Genie AIとAI支援機能を搭載したコードエディタCursorの機能と使い勝手を比較

ここからは、VSCodeをベースにChatGPTとの連携を前提に設計されたAIコードエディタであるCursorと、先ほど紹介したGenie AIと機能や使い勝手を比較します。

具体的には以下の項目を比較します。

• ChatGPT統合の柔軟性
• エラー修正とコード補完
• UIの使い勝手
• 拡張性
• セキュリティ・プライバシー管理

AI機能がネイティブに組み込まれた開発環境と比較して、VSCodeの拡張機能であるGenie AIがどれほどの使い勝手や機能を有しているのか検証していきましょう！

ChatGPT統合の柔軟性

Genie AIは、VSCodeの拡張機能としてChatGPTを統合しているため、既存のVSCode環境や他の拡張機能と併用することが可能です。

これにより、普段使用している開発フローを大きく変えることなく、ChatGPTの支援を受けられます。

また、必要に応じて細かい設定ができ、使い方に応じた柔軟な調整が可能です。

一方で、Cursorは、VSCodeベースの独立したコードエディタとしてChatGPTをネイティブに統合しており、AI機能がエディタ全体に深く組み込まれています。

これにより、AI支援機能がより一貫して動作し、VSCodeと比較してAIの処理が自然に溶け込むような体験を提供します。

例えば、コードの選択した部分について、ショートカットキー（ctrl+L）ですぐにChat形式でAIモデルに質問することも可能です。

これらの違いから、既存のVSCode環境を活かしつつChatGPTを使いたい場合はGenie AIが適しており、AI機能を中心に開発を進めたい場合にはCursorがより効率的に機能するでしょう。

エラー修正とコード補完

Genie AIは、ChatGPTを活用したエラー修正やコード補完をVSCode内で行うことができます。

VSCodeの標準機能に加えて、ChatGPTの高度な自然言語処理を使って、リアルタイムでコードの修正提案や補完を提供します。

これにより、コードの品質向上や効率的なバグ修正が可能になります。

さらに、コード全体の理解をもとに、よりコンテクストに沿ったアドバイスが得られるため、複雑なエラーの解決にも有効です。

Cursorは、独立したエディタとしてAI支援機能を標準で組み込んでおり、エラー修正やコード補完の機能がさらにスムーズに動作します。

Cursorでは、コーディング中にリアルタイムでエラーを検知し、AIによる修正提案がすぐに行われます。

また、修正したい部分を選択してctrl+Kをクリックすることで、AIモデルに自然言語で指示を出してコードを修正できます。

Genie AIでは、右クリックから選択することで、コードの修正案は提供してくれますが、修正は手動で行う必要があります。

Cursorは、AIのサポートがエディタ全体に統合されているため、補完や修正が迅速かつ自然に行われ、開発者の作業を途切れさせません。

どちらも優れたコード補完とエラー修正機能を提供しますが、Genie AIはVSCodeの拡張機能として柔軟に活用でき、CursorはAIによる支援がよりネイティブに統合された開発体験を提供します。

ChatGPTを活用できるプログラミングタスクについては、以下の記事で詳しく解説していますので、こちらもあわせてご確認ください。

UIの使い勝手

Genie AIは、VSCodeの拡張機能として提供されているため、VSCodeの既存のユーザーインターフェースに馴染んだ開発者にとって使いやすいのが特徴です。

拡張機能の導入後、VSCodeのターミナルやサイドバーを利用してChatGPTの機能を簡単に呼び出せるため、特別な学習や新しい操作感覚を覚える必要はありません。

また、VSCodeのカスタマイズ性をそのまま維持しながら、AI支援機能を追加できるのも大きな利点です。

Cursorは、VSCodeをベースに開発された独立したコードエディタであり、VSCodeの操作感を引き継ぎ、UIはほぼ変わりませんがAI機能がエディタ全体にシームレスに統合されています。

CursorのUIは、エラー検知やコード補完などのAI支援が自然に表示されるようにデザインされており、開発者の操作を邪魔しないスムーズな体験を提供します。

AIの提案やフィードバックが適切なタイミングで表示されるため、使い勝手に優れています。

Genie AIは既存のVSCodeユーザーにとって親しみやすいUIを提供し、CursorはAI支援機能を直感的に活用できるように最適化されたUIを実現しています。

どちらも開発者の生産性向上を支援する設計がされています。

拡張性

Genie AIは、VSCodeの拡張機能として動作するため、VSCodeが持つ豊富なカスタマイズオプションを活かせます。

VSCodeの設定や他の拡張機能との組み合わせが可能なため、個々の開発環境やワークフローに合わせて柔軟に調整できます。

拡張機能は、既存の開発フローに無理なく統合できるため、カスタマイズ性の面で非常に優れています。

Cursorは、独立したエディタであるため、カスタマイズ性はVSCodeほど広範ではないものの、AI支援機能を中心に設計されており、直感的でシンプルな操作を重視しています。

AI機能がすでにエディタに組み込まれているため、追加の設定やカスタマイズの必要が少なく、すぐに利用可能な形で提供されます。

そのため、細かな設定を調整したい開発者には少し制約がある一方で、初期設定のままで高い生産性を発揮することができます。

Genie AIは、VSCodeの拡張性と相まって非常に柔軟なカスタマイズを可能にし、Cursorはシンプルですが強力なAIエディタです。

ユーザーが求める自由度に応じて、どちらが適しているかを判断できるでしょう。

セキュリティ・プライバシー管理

Genie AIは、OpenAI APIを使用するため、API Keyを通じて外部と通信が行われます。

セキュリティ面では、OpenAIが提供するインフラに依存する部分が大きく、データが外部サーバーに送信されることになります。

そのため、企業のポリシーやプロジェクトの機密性に応じて、APIリクエストの管理やプライバシーに対する対策を講じる必要があります。

また、VSCodeの拡張機能として動作するため、VSCode自体のセキュリティ設定や拡張機能の管理も重要です。

Cursorは、AI支援機能がエディタ内にネイティブに組み込まれているため、データの処理や保存に関して独自のセキュリティ対策が施されています。

Cursorも外部サーバーへのデータ送信が行われるため、プライバシーに関する懸念はありますが、セキュリティポリシーの透明性とデータ処理の一貫性が強化されています。

企業やプロジェクトで使う際には、Cursorが提供するプライバシーポリシーやセキュリティガイドラインを確認することが推奨されます。

どちらのツールもOpenAI APIを利用した場合は外部サーバーにデータが送信されるため、利用する際には、企業のセキュリティポリシーに従って適切な管理を行う必要があります。

ただし、どちらもAzure OpenAI Serviceが利用可能で、Azure上でデプロイされたモデルを使用できるので、セキュリティ面を大幅に強化できます。

Genie AIはVSCodeの拡張機能として、Cursorは独立したエディタとして、それぞれ異なるセキュリティの取り組みがあるため、自分のプロジェクトに最適な選択をすることが重要です。

ChatGPTとVSCodeを連携する際の2つの注意点

ChatGPTとVSCodeを連携することで、コーディング効率を大幅に向上させることができますが、導入の際にはいくつかの注意点があります。

ここでは、特に重要な以下の2点について解説します。

• APIリクエストの頻度とコスト
• データプライバシーとセキュリティ

これらの点に注意しながら、ChatGPTとVSCodeの連携を進めることで、効率的で安全な開発環境を整えることが可能です。

それぞれの注意点を深掘りしてみましょう。

APIリクエストの頻度とコスト

ChatGPTをVSCodeと連携させる際に、APIリクエストの頻度が高まるほど、コストが増加します。

特に、コード生成やコードレビューなど、複数回のリクエストが必要なタスクを頻繁に行う場合、APIのリクエスト数が大幅に増加します。

このため、どの程度の頻度でAPIを使用するかを事前に見積もり、プロジェクトの予算に合ったプランを選択することが重要です。

また、無駄なリクエストを減らすために、効率的な指示の仕方を工夫することもコスト管理の一助になります。

ただし、OpenAI APIはあらかじめクレジットをチャージしておくシステムなので、チェージしたクレジット数を超えるリクエストはできないようになっています。

上限を決めてチャージしておくことで、コスト超過のリスクを抑えることができます。

このように、適切に管理すればコストを抑えつつ効率的な開発支援を受けることが可能です。

データプライバシーとセキュリティ

ChatGPTをVSCodeと連携させる際には、データプライバシーとセキュリティに特別な注意が必要です。

特に、APIを通じて外部のサーバーにコードや機密情報が送信されることになるため、扱うデータの内容や送信方法について慎重な管理が求められます。

企業やプロジェクトで機密性の高いコードや情報を扱う場合、APIリクエストによってそれらのデータが外部に送信されるリスクを十分に考慮する必要があります。

具体的には、以下のような点に注意してください。

• 送信データの管理：必要以上に機密情報を送らないよう、APIリクエストの内容を慎重に設定する。
• 暗号化の確認：API通信は暗号化されているか、データが安全に送信されているかを確認する。
• OpenAIのプライバシーポリシーの確認：データの保存や利用に関するポリシーを把握し、適切な対策を講じる。

企業内のセキュリティポリシーに従って、外部ツールやAPIを使用する際の制限や承認プロセスを事前に確認することも重要です。

また、先ほども紹介しましたが、よりセキュリティリスクの低い環境でChatGPTを利用できるAzure OpenAIとの連携も選択肢に入れることをお勧めします。

これらの対策を講じることで、ChatGPTとVSCodeの連携による利便性を享受しつつ、データプライバシーとセキュリティを確保することが可能になります。

ChatGPTとVSCodeを連携してコーディングをもっと効率的に！

ChatGPTとVSCodeを連携させることで、コーディング作業は飛躍的に効率化されます。

リアルタイムでChatGPTのサポートを受けることで、開発者が取り組むルーチンワークやコードレビュー、ドキュメント作成などの作業が大幅に簡略化され、より生産的な環境を手に入れることが可能です。

また、エディタとブラウザを頻繁に行き来する煩雑さを解消し、一貫したワークフローの中でスムーズに作業を進めることができます。

ブラウザとエディタの切り替えによる時間の無駄を排除し、全体の開発フローがChatGPTの力で加速します。

その結果、開発者は、より高度でクリエイティブな作業や複雑な問題解決に専念できるようになります。

ChatGPTとVSCodeを連携することでできることと注意点

• コード補完や生成がエディタ内で完結し、バグ修正もリアルタイムにサポート
• ドキュメント生成やコードレビューの自動化により、手間が削減される
• VSCode内でリアルタイムにChatGPTを活用するため、ブラウザとの行き来が不要
• APIリクエストの頻度が高まるとコストが発生するリスクがあるため、管理が必要
• データのプライバシーやセキュリティの管理も必須

これらの利点を最大限に活用すれば、ChatGPTとVSCodeを連携させることで業務効率が一層向上します。

特に、複雑な開発タスクにおけるAI支援が強化されることで、開発者の負担が大幅に軽減され、プロジェクト全体のスピードと品質が向上します。

さらに業務効率を向上させたい方は、ぜひ弊社SHIFT AIで開催している無料のセミナーへのご参加を検討ください。

興味のある方は、以下よりセミナーの詳細を確認して、AI人材への第一歩を踏み出してみませんか。