なぜChatGPTとVSCodeを連携するのか？
公式拡張 (Codex)
- Plusアカウント必須 (追加コスト0)
- ファイル自動読込・プロジェクト全体考慮
- エディタ内でペアプロ的やりとり
- 導入は1分
サードパーティ (例: Genie AI)
- APIキー必要 (API利用料別途)
- カスタマイズ性高い
- コミットメッセージ自動生成
- GPT-4o対応
開発効率が劇的に変わる理由
室谷代表取締役エディタの中でChatGPTが動くのと、ブラウザで都度コピペするのとでは、生産性が全然違うんですよね。MYUUUでも導入したんですが、コードレビューの回転率が明らかに上がりました。
テキトー教師.AI認定講師たしかに。特に初心者の頃って、「このエラー何？」って都度検索してコピペして…で集中力が切れるんです。
それがエディタ内で完結すると、思考を止めずに進められる。
それがエディタ内で完結すると、思考を止めずに進められる。
室谷代表取締役しかも、ChatGPTが開いてるファイルを自動で読んでくれるから、質問の文脈をいちいち説明しなくていい。あれ、結構でかいですよ。
テキトー教師.AI認定講師そこで「コード全体を見てるかどうか」って意外と盲点なんですよね。選択範囲だけじゃなくてプロジェクト全体を考慮した提案が来るのは強い。
公式拡張機能とサードパーティ製の違い
室谷代表取締役まず公式の「Codex」拡張機能があります。これはChatGPT Plus以上のアカウントがあれば使えて、エディタ内でペアプロ的にやりとりできる。
あと、ChatGPTデスクトップアプリと連携するための拡張機能もあって、そっちは「Work with Apps」という機能ですね。
あと、ChatGPTデスクトップアプリと連携するための拡張機能もあって、そっちは「Work with Apps」という機能ですね。
テキトー教師.AI認定講師一方、サードパーティ製も多いです。例えば「ChatGPT - Genie AI」はインストール数100万超えで、自分のAPIキーを入れれば使える。
GPT-4oとかにも対応していて、コミットメッセージの自動生成なんかもできる。
GPT-4oとかにも対応していて、コミットメッセージの自動生成なんかもできる。
室谷代表取締役公式とサードパーティ、どっちを選ぶかは「課金体系」と「求める機能の幅」ですね。公式はChatGPTプランに含まれてるから追加コストがゼロ。
サードパーティはAPI利用料が別途かかるけど、カスタマイズ性が高い。
サードパーティはAPI利用料が別途かかるけど、カスタマイズ性が高い。
テキトー教師.AI認定講師最初に戸惑うのが「どの拡張機能が本当に使えるのか」という点。マーケットプレイスで評価を見ても、公開時期が古かったりするものもあるので、最新の情報を確認したほうがいいです。
どんな開発者におすすめか
室谷代表取締役全部の開発者におすすめしたいけど、特に「コードを書きながら頻繁に質問したい人」には必須ですね。フロントエンドのデザイン調整とか、APIの使い方をその場で聞ける。
テキトー教師.AI認定講師逆に「完全にオフラインで書きたい」とか「VSCode以外のエディタがメイン」という人はあまり恩恵がないかも。あとは、ChatGPT Plusに課金してない人にとっては、サードパーティ製の方がAPIキーで使える分ハードルが低い。
室谷代表取締役結局、時給換算したときに「検索時間のロス」をどれだけ減らせるかという話。月20ドルのPlus代なんて、1時間分の工数削減でペイするんで、個人開発者でもすぐに元は取れます。
テキトー教師.AI認定講師そうなんですよね。「ちょっと聞くだけ」の回数が多いほど効いてくる。
導入のハードルとしては、拡張機能のインストール自体は1分で終わるので、まずは試してほしいですね。
導入のハードルとしては、拡張機能のインストール自体は1分で終わるので、まずは試してほしいですね。
公式の連携方法：Codex拡張機能のインストール
マーケットプレイス
- 検索窓で「OpenAI Codex」を検索
- クリック一発でインストール
- 公式拡張機能を選ぶ必要あり
コマンドパレット
- Ctrl+P で「ext install openai.chatgpt」
- パッケージ名を正確に入力
- 慣れたら最速、初心者はマーケットプレイス推奨
インストール手順：マーケットプレイスから最短で
室谷代表取締役Codex、もうマーケットプレイスから直接入れられるんですよね。検索窓で「OpenAI Codex」で出てくるんで、クリック一発です。
テキトー教師.AI認定講師たしかに。でも慣れないと、どの拡張機能が公式か迷いますよね。
OpenAI公式って書いてあるので、それを選べば大丈夫です。
OpenAI公式って書いてあるので、それを選べば大丈夫です。
室谷代表取締役あとはコマンドパレットから直接入れる方法もあります。
現場のエンジニアにはこっちの方が早いですね。
Ctrl+P で ext install openai.chatgpt って打つと一発。現場のエンジニアにはこっちの方が早いですね。
テキトー教師.AI認定講師パッケージ名覚えなくちゃいけないのが難点ですけど、慣れたら楽です。最初はマーケットプレイスで検索するのが無難ですね。
VSCodeフォークへの対応：CursorやWindsurfでも使える
室谷代表取締役VSCode の派生エディタ、Cursor や Windsurf でも同じ拡張機能が使えるんですよ。コマンドがちょっと変わるだけ。
テキトー教師.AI認定講師そうなんです。Cursor なら
cursor:extension/openai.chatgpt、Windsurf はサイドロードが必要で、VSIX ファイルをダウンロードしてインストールする形になります。室谷代表取締役うちのチームでも Cursor で使ってますが、全然問題ないです。むしろ VSCode 標準より快適って人もいますね。
テキトー教師.AI認定講師VSCodium でも同じく VSIX サイドロードです。最初に戸惑う人が多いポイントですね。
初期設定とChatGPTアカウントの連携
室谷代表取締役インストールしたら、まず ChatGPT アカウントでサインインですね。拡張機能のアイコンをクリックして、画面の指示に従うだけです。
テキトー教師.AI認定講師ここで注意なのが、サインイン後に利用プランによって使える機能が変わること。Plus 以上なら問題ないんですが、Free プランだと使えない場合もあります。
室谷代表取締役そう、Codex は Plus 以上が必須です。うちの現場では Pro にしてるメンバーが多いですね。
コスト対効果は高いです。
コスト対効果は高いです。
テキトー教師.AI認定講師あと、macOS の ChatGPT アプリと連携する「Work with Apps」機能を使うには、別途アプリ側の設定も必要です。ここは少しややこしいので、公式のヘルプを参照した方がいいですね。
ChatGPTデスクトップアプリとの連携（macOS）
Work with Apps機能とは
テキトー教師.AI認定講師これ、macOS版のChatGPTアプリにだけある機能なんですよね。VSCodeと連携するには、まず公式の拡張機能「openai.chatgpt」を入れる必要があります。
室谷代表取締役そうです。マーケットプレイスで「openai.chatgpt」を検索するか、Quick Openから直接コマンド叩けば一発です。
テキトー教師.AI認定講師インストール後、ChatGPTアプリの設定で「Work with Apps」を有効にしてVSCodeを選ぶと、エディタで開いてるファイルの内容がChatGPTに送れるようになります。
VSCode拡張機能との違い
室谷代表取締役これ、Codex拡張機能とは別物なんですよね。CodexはIDE内で完結するエージェントですが、Work with AppsはChatGPTアプリ側からVSCodeのファイルを読む仕組み。
テキトー教師.AI認定講師たしかに。あっちはサイドパネルで完結、こっちはアプリのチャットでコードの質問ができるイメージ。
用途が微妙に違います。
用途が微妙に違います。
室谷代表取締役個人的には、アプリの画面で広いスペース使ってやり取りしたいときはWork with Apps、エディタ内で素早く修正したいときはCodex、という棲み分けが自然だと思います。
実際の使いどころ
テキトー教師.AI認定講師「この関数の挙動、どうなってる？」みたいに、編集中のファイルをコンテキストとして渡して質問するのに丁度いいですよね。
室谷代表取締役そう。わざわざコードをコピペして貼らなくて済むので、特にリファクタリングの相談とか楽です。
テキトー教師.AI認定講師注意点としては、CursorやVSCodiumにも対応してるけど、VSIXのサイドロードが必要なケースもある。公式ドキュメントを確認した方が安全です。
サードパーティ製拡張機能の選び方
Genie AI
- 自分のAPIキーを持ち込む
- ChatGPT Plusとは別にAPI利用料がかかる
- 使いたいモデルを選べる自由度が高い
- 無料インストール可能だがAPIキー設定が必要
vscode-openai
- スポンサー付き無料インスタンス or 自分でAPIキー設定
- プロバイダをAzure OpenAIに切替可能
- APIキー管理が甘いと漏洩リスク
- キーを設定に直接書く方式でGitコミット注意
公式Codex拡張
- ChatGPT Plus契約で追加料金なし
- コード補完からチャットまで全て利用可能
- 月額約24ドル（Plus料金）
- まず公式で足りるか試すのが得策
主要拡張機能の特徴比較
テキトー教師.AI認定講師Genie AI って結構ダウンロード数ありますけど、実際どうなんですかね？
室谷代表取締役あれは自分のAPIキーを持ち込むタイプですね。公式のCodex拡張と違って、ChatGPT Plusの契約とは別にAPI利用料がかかるんですよ。
ただ、使いたいモデルを選べる自由度は高い。
ただ、使いたいモデルを選べる自由度は高い。
テキトー教師.AI認定講師現場でよく聞かれるのが「無料で使える拡張機能はどれ？」って質問です。Genie AIは無料でインストールできるけど、APIキーを設定しないと使えないんですよね。
室谷代表取締役そう、そこを勘違いしてる人は多い。無料でインストールできても、APIコールには従量課金が走る。
最初にちゃんと理解しておかないと、後で請求が来て驚くパターンです。
最初にちゃんと理解しておかないと、後で請求が来て驚くパターンです。
APIキーを使った独自設定が可能なツール
室谷代表取締役vscode-openai っていう拡張もあるんですけど、あれはスポンサー付きの無料インスタンスか、自分でAPIキーを設定するかの二択ですね。
テキトー教師.AI認定講師公式のCodex拡張とは違って、プロバイダをAzure OpenAIに切り替えられるのも特徴です。企業でAzure使ってるなら便利でしょうね。
室谷代表取締役ただ、APIキーの管理が甘いと漏洩リスクがあるから注意が必要。コミュニティの投稿でも「キーが漏れた」って報告があります。
テキトー教師.AI認定講師実際、APIキーを拡張機能の設定に直接書く方式が多いので、gitにコミットしないように気をつけないと。
無料で始めるなら？
テキトー教師.AI認定講師結局、一番手軽なのは公式のCodex拡張ですね。ChatGPT Plusに加入していれば追加料金なしで使えます。
室谷代表取締役そうなんですよ。Plus契約してれば、月額20ドル（今は24ドルか）でコード補完からチャットまで全部使える。
サードパーティの拡張を探す前に、まず公式で足りるか試すのが得策ですね。
サードパーティの拡張を探す前に、まず公式で足りるか試すのが得策ですね。
テキトー教師.AI認定講師無料で試したいなら、スポンサー付きインスタンスを持ってるvscode-openaiが選択肢に入ります。ただしモデルが古い可能性もある。
室谷代表取締役まあ、個人でちょっと試す分にはそれでいいけど、本番開発なら素直にPlusに入るのがコスパいいですよ。時給換算したらすぐペイします。
実際のコーディングでどう活用する？
コード生成と補完の使い方
室谷代表取締役Codexの拡張機能、インストールしてすぐに使えるんですが、実際のコーディングでどう活用するかが肝心ですよね。僕のチームでは、関数の雛形生成によく使ってます。
コードを選択して「Codexに説明させる」だけで、あとは微調整するだけ。時給換算するとかなりの工数削減になります。
コードを選択して「Codexに説明させる」だけで、あとは微調整するだけ。時給換算するとかなりの工数削減になります。
テキトー教師.AI認定講師たしかに、最初に「どこから聞けばいいかわからない」って声をよく聞きます。でも、エディタ上でコードを選択して右クリック→「Codexに質問」で、簡単な説明や実装例が一瞬で返ってくる。
特にPythonの標準ライブラリとか、覚えるのが面倒な部分は助かります。
特にPythonの標準ライブラリとか、覚えるのが面倒な部分は助かります。
室谷代表取締役そうそう、そこです。APIドキュメントをいちいちブラウザで開く必要がなくなる。
拡張機能がエディタ内で完結するので、コンテキストスイッチが減る。これ、ROIで考えるとすぐペイするんですよ。
拡張機能がエディタ内で完結するので、コンテキストスイッチが減る。これ、ROIで考えるとすぐペイするんですよ。
テキトー教師.AI認定講師ええ。ただ、初心者がハマるのが「プロンプトの書き方」です。
漠然と「コード書いて」ではなく、「この関数で例外処理を追加して」と具体的に指示しないと、思ったのと違う結果が返ってくる。そこは慣れが必要ですね。
漠然と「コード書いて」ではなく、「この関数で例外処理を追加して」と具体的に指示しないと、思ったのと違う結果が返ってくる。そこは慣れが必要ですね。
バグ発見と修正提案
テキトー教師.AI認定講師コード生成の次に使えるのが、バグの発見と修正提案です。特にコンパイルエラーやランタイムエラーが出たとき、エラー文をCodexに貼り付けると、原因と修正案を出してくれます。
現場でよくあるのが「エラー本文をコピーするだけ」なんですけど、それで結構解決します。
現場でよくあるのが「エラー本文をコピーするだけ」なんですけど、それで結構解決します。
室谷代表取締役うちの開発者も、テスト中に「なんで動かないんだ」ってとき、まずCodexに投げてますね。自分でデバッグログを仕込むより速い。
ただ、信用しすぎると危ない。AIの提案はあくまでたたき台として扱わせてます。
ただ、信用しすぎると危ない。AIの提案はあくまでたたき台として扱わせてます。
テキトー教師.AI認定講師そこは大事です。提案されたコードをそのまま適用せずに、差分を確認してから反映する習慣をつけるといいですね。
テストコードやドキュメントの自動作成
室谷代表取締役もう一つ、地味に効くのがテストコードとドキュメントの自動生成です。自分で書くのが面倒なユニットテストを、関数の命名や型情報から自動で生成してくれる。
これはチームで導入するとベースラインが揃いやすい。
これはチームで導入するとベースラインが揃いやすい。
テキトー教師.AI認定講師そうですね。私はよく「この関数のDocstringを書いて」と頼みます。
日本語で要件を書いておくと、英語のDocstringにしたいときもすぐ変換してくれる。ただし、生成されたテストが完璧かというと、境界値テストが抜けてたりするんで、必ずレビューは必要です。
日本語で要件を書いておくと、英語のDocstringにしたいときもすぐ変換してくれる。ただし、生成されたテストが完璧かというと、境界値テストが抜けてたりするんで、必ずレビューは必要です。
室谷代表取締役そこは人間の仕事ですよね。AIはアウトラインレベルで、細かい設計判断は人がやる。
これで生産性が上がるのは間違いない。
これで生産性が上がるのは間違いない。
料金プランと知っておくべき注意点
Codexが使えるプラン
無料不可。Plus以上で利用可能。Plusで十分なケースも多いが、チームはBusiness、ヘビーはPro以上。利用上限に注意。
APIキー使用時の追加料金
公式拡張はサブスク内。サードパーティ拡張はAPIキーが必要で従量課金。使いすぎに注意。
セキュリティとコード品質のリスク管理
APIキー漏洩対策（環境変数など）。生成コードのレビュー必須。チームルールの策定が重要。
Codexが使えるプラン（Plus, Pro, Businessなど）
室谷代表取締役Codex、Plusから使えるんですよね。Pro、Business、Edu、Enterprise全部含む。
これ、意外と知られてないんですけど、無料プランだと使えないんで注意です。
これ、意外と知られてないんですけど、無料プランだと使えないんで注意です。
テキトー教師.AI認定講師たしかに。初めて触る人が「ChatGPT持ってるから大丈夫」と思ってインストールしたら、サブスクリプションが必要って気づくパターン、よく聞きます。
室谷代表取締役Plusでも十分なケースは多いですけど、チームで導入するならBusinessの管理機能が効く。個人的には月額の差よりも、使えるモデルや制限の違いを事前に確認した方がいいと思います。
テキトー教師.AI認定講師そうですね。プランによって利用上限が変わるので、ヘビーに使う人はPro以上を検討した方が無難です。
APIキー使用時の追加料金
室谷代表取締役もう一つ盲点なのが、サードパーティの拡張機能を使うケース。あれ、APIキーが必要で、ChatGPTのサブスクとは別に課金が発生するんですよね。
テキトー教師.AI認定講師そこ、よく混乱するポイントです。公式のCodex拡張はサブスク内で使えますが、Genie AIとかvscode-openaiみたいな拡張は、自分でOpenAIのAPIキーを設定して、その利用量に応じて課金されます。
室谷代表取締役APIの料金は従量制なんで、使いすぎると意外と高くつく。コード生成をバンバンやるなら、月額のサブスクの方がコストが読める場合もあります。
テキトー教師.AI認定講師使い始めは少額でも、慣れてくるとAPIコールが増えますからね。最初は両方試してみて、自分の利用パターンに合う方を選ぶのがいいです。
セキュリティとコード品質のリスク管理
室谷代表取締役コスト面だけでなく、セキュリティも考えないといけない。特にAPIキーを拡張機能に設定する場合、キーが漏れるリスクがある。
公式のCodex拡張だとその辺は安心ですが、サードパーティ製は注意が必要です。
公式のCodex拡張だとその辺は安心ですが、サードパーティ製は注意が必要です。
テキトー教師.AI認定講師現場でよく「APIキーをGitにうっかりコミットしちゃった」って話を聞きます。環境変数で管理するか、専用の設定ファイルを使うように徹底した方がいいです。
室谷代表取締役あと、生成されたコードの品質。AIが書いたコードをそのまま本番に出すのは危ないんで、レビューは必須。
ROIで考えると、レビュー工数を考慮した上で導入するのが現実的です。
ROIで考えると、レビュー工数を考慮した上で導入するのが現実的です。
テキトー教師.AI認定講師そうですね。AIの提案はあくまで参考程度にして、最終判断は人間がする。
その辺りのルールをチームで決めておかないと、後でトラブルになります。
その辺りのルールをチームで決めておかないと、後でトラブルになります。
よくある質問
Q1. ChatGPTとVSCodeを連携すると、コードが外部に送信されるのが不安です。セキュリティは大丈夫ですか？
室谷代表取締役これ、現場でもよく聞かれます。ChatGPTのAPI通信はすべて暗号化されます。
企業利用ならデータ処理の設定で「API経由で学習に使わない」を選べるので、機密情報を扱う場合は有効にしたほうがいいです。
企業利用ならデータ処理の設定で「API経由で学習に使わない」を選べるので、機密情報を扱う場合は有効にしたほうがいいです。
テキトー教師.AI認定講師そうですね。Codex拡張機能は公式なので一定の信頼性はありますが、サードパーティ拡張機能を使う場合はプライバシーポリシーを確認した方が無難です。
室谷代表取締役MYUUUでも社内コードを扱うときは専用のAPIキーを発行して、ログを監視してます。個人開発ならそこまで気にしなくても大丈夫だと思いますよ。
Q2. WindowsでもChatGPTデスクトップアプリとの連携は可能ですか？
テキトー教師.AI認定講師現状、ChatGPTの公式デスクトップアプリはmacOS版のみなんですよね。Windowsユーザーだと「なんで？」ってなる気持ちは分かります。
室谷代表取締役ただ、Windowsでもブラウザ版のChatGPTをサイドパネルに表示してコピペする方法はあります。あとはサードパーティ拡張機能の「CodeGPT」なんかがWindowsでも安定して動くので、そちらを検討するのが現実的です。
テキトー教師.AI認定講師たしかに、公式のmacOS連携にこだわらなければ、Windowsでも同等の体験は得られますね。
Q3. サードパーティの拡張機能はどれを選べばいいですか？
室谷代表取締役有名なところだと「CodeGPT」「Continue」「Genie」あたりですかね。どれも似たような機能ですが、違いは対応モデルとUIの好みです。
テキトー教師.AI認定講師初心者には無料で始めやすいCodeGPTがおすすめです。ただ、設定が豊富すぎて最初戸惑う人もいるので、まずは公式のCodexで慣れてからステップアップするのも手ですよ。
室谷代表取締役そうですね。サードパーティはアップデートが頻繁で動作が不安定なこともあるので、本番環境で使うなら公式を推奨します。
Q4. 無料版のChatGPTでもVSCode連携は使えますか？
テキトー教師.AI認定講師無料版ではAPIキーが提供されないので、直接連携はできません。ただし、ChatGPTのWeb版を開いてコードをコピペする運用なら無料で行けます。
室谷代表取締役ただ、それだと効率が悪いので、週に数時間でも節約したいなら月20ドルのPlusプランが現実的です。時給換算したら一瞬で元が取れます。
テキトー教師.AI認定講師あと、サードパーティ拡張機能の一部はChatGPTの無料アカウントと連携できるものもありますが、かなり制限されるので結局有料プランが推奨です。
Q5. 連携中にChatGPTの応答が遅い時があります。どうすればいいですか？
室谷代表取締役これ、よくある悩みです。APIのレスポンスはモデルと時間帯に依存します。
GPT-4よりもGPT-3.5-turboのほうが高速なので、処理速度重視ならモデルを切り替えるといいですよ。
GPT-4よりもGPT-3.5-turboのほうが高速なので、処理速度重視ならモデルを切り替えるといいですよ。
テキトー教師.AI認定講師あと、拡張機能によってはタイムアウト設定がデフォルトで短い場合があります。設定画面でタイムアウト秒数を伸ばすとエラーが減ります。
室谷代表取締役それでも遅い場合は、リクエストするコードの量を減らすとか、複数ファイルを一度に投げずに分割するのも効果的です。
まとめ
テキトー教師.AI認定講師今回はChatGPTとVSCodeの連携方法をざっと見てきましたが、初心者でも公式拡張機能を入れるだけで数分で始められるのがいいですね。
室谷代表取締役そうですね。料金も個人ならPlusで十分。
企業でバリバリ使うならAPI直叩きのほうがコスパいいケースもありますけど。
企業でバリバリ使うならAPI直叩きのほうがコスパいいケースもありますけど。
テキトー教師.AI認定講師あとは、実際に使ってみて「こんなに違うのか」と感動する人が多いです。最初は簡単なリファクタリングから試すのがおすすめです。
室谷代表取締役今後のアップデートでさらに連携が深まると思うので、まずは今のうちに環境を整えておくといいですよ。
テキトー教師.AI認定講師そうですね。まずはVSCodeに拡張機能を入れて、実際にコードを書くときにChatGPTに質問してみてください。
きっとその便利さに驚くはずです。
きっとその便利さに驚くはずです。
