codex vscodeで使う方法｜VS Code拡張でAIコーディングを始める

この記事でわかること
エディタ上で使う前に知っておくこと
VS Codeでの実務的な使い方
VS Code記事で扱うとよい読者の悩み
VS Codeでは開いている範囲から依頼する
ソース管理ビューで差分を見る
VS Codeでは表示中ファイルから試す
拡張機能の利用範囲をそろえる
VS Code導入後にできること
まとめ
参照元（公式・公式に準じる情報のみ）

この記事でわかること

VS Code拡張でCodexを使う手順
エディタ上で依頼しやすい作業例
差分確認と権限管理の注意点
画面利用との違いと安全な管理方法
料金・権限・差分確認で注意する点

エディタ上で使う前に知っておくこと

CodexはVS Code上でも利用できます。OpenAIのCodex IDE extension公式ドキュメントでは、Codex拡張はVisual Studio Code Marketplaceから入手でき、VS Code互換のエディタやJetBrains IDEs向けにも案内されています。VS Codeで開発している人にとっては、普段のエディタを離れずにAIコーディング支援を受けられるのが大きな利点です。

VS CodeでCodexを使う基本手順は、拡張機能をインストールし、サイドバーからCodexを開き、ChatGPTアカウントまたはAPIキーで認証する流れです。インストール後にCodexが見えない場合は、VS Codeを再起動する必要がある場合があります。公式ドキュメントでは、VS Codeの場合、Codexは標準で右サイドバーに開くと説明されています。

VS Code拡張の強みは、エディタ内の文脈を見ながら作業できることです。ターミナルのCLIでもCodexは使えますが、VS Codeでは開いているファイル、エラー表示、差分、プロジェクト構造を見ながらやり取りできます。たとえば、Reactコンポーネントを開いた状態で「このコンポーネントを責務ごとに分割して」「既存のスタイルを崩さずにスマホ表示を修正して」と依頼できます。

VS Codeでの実務的な使い方

VS CodeでCodexを使う場合、左側にファイルツリー、中央にコード、右側にCodexという形にすると作業しやすくなります。開いているファイルを見ながら、Codexに「この部分の責務を説明して」「この関数の副作用を洗い出して」「この変更で影響するファイルを教えて」と依頼できます。コードレビューに近い使い方です。

デザイン修正でも有効です。たとえば、CSSやコンポーネントを開いた状態で「375px幅で崩れている原因を探してください」「HTML構造は変えず、CSSだけで調整してください」「既存のクラス名を維持してください」と指示できます。特に既存サイトの修正では、余計な構造変更を避ける制約が重要です。

VS Code拡張を使うと便利な一方で、変更が目の前で進むため、つい確認を省きがちです。作業後は必ずソース管理ビューで変更ファイルを確認し、不要な差分がないかを見ます。Codexがフォーマットだけを大量に変えてしまった場合は、目的の変更が見えづらくなるため、「フォーマット変更はしない」と事前に伝えるのも有効です。

VS Code記事で扱うとよい読者の悩み

VS CodeでCodexを使う読者は、「拡張を入れたけどどこに表示されるのか」「ChatGPTアカウントでログインするのか」「APIキーが必要なのか」「どのファイルを読まれるのか」「勝手に変更されないか」といった不安を持ちやすいです。インストール手順だけでなく、最初の安全な依頼例と、変更後の差分確認方法まで入れると実用性が高くなります。

VS Codeで使う最大の利点は、AIの提案と実際のコードを同じ画面で確認できることです。チャットだけで完結させず、エディタ上の差分、エラー、ターミナル結果を見ながら判断できるため、初心者にも比較的説明しやすい導入方法です。

VS Codeでは開いている範囲から依頼する

VS Code拡張では、まず開いているファイルや選択範囲に対して依頼すると確認しやすくなります。プロジェクト全体を一度に直すより、表示中のコンポーネント、CSS、テストファイルなどに範囲を絞る方が差分を追いやすいです。

ソース管理ビューで差分を見る

VS CodeでCodexを使った後は、ソース管理ビューで変更ファイルを確認します。不要な整形変更や関係ないファイルの変更が混ざっていないかを見てから、必要に応じてテストやビルドを実行します。

VS Codeでは表示中ファイルから試す

VS Code拡張では、まず開いている1ファイルの説明や小さな修正から始めると安全です。「このコンポーネントの役割を説明する」「この型エラーだけ直す」のように範囲を限定すれば、ソース管理ビューで差分を確認しやすくなります。

拡張機能の利用範囲をそろえる

チームでVS Code拡張を使う場合は、対象リポジトリ、読み込ませてよいファイル、秘密情報を含むファイル、レビュー手順をそろえます。拡張機能は作業中のコードに近いため、便利さと同時に入力してはいけない情報の管理も必要です。

VS Code導入後にできること

できること	使いどころ
ファイルの説明	初めて触るコードの理解
小さな修正	文言変更、軽微なバグ修正、型の整理
テスト案の作成	変更に対して確認すべき観点を出す
差分の説明	PR前に変更内容を整理する

CodexのVS Code利用で向いている作業は、既存コードの理解と小〜中規模の修正です。具体的には、「このファイルの役割を説明して」「このエラーの原因を調べて」「この関数を読みやすくして」「重複している処理を共通化して」「テストを追加して」「型エラーを解消して」などです。画面を見ながら確認できるため、初心者でもCLIより作業内容を追いやすい場合があります。

一方で、VS CodeにCodexを入れたからといって、すべてを任せてよいわけではありません。AIが作った変更は、必ず差分で確認する必要があります。特に、複数ファイルをまたぐ変更、依存関係の追加、設定ファイルの変更、認証や決済に関わる処理は慎重に見るべきです。VS CodeのGit機能を使って変更箇所を確認し、不要な変更は破棄できるようにしておきます。

プロンプトを書くときは、VS Codeで開いているファイルに対して具体的に指示すると効果的です。「このファイルを改善して」ではなく、「このコンポーネントの表示ロジックとデータ整形を分けてください。UIの見た目は変えないでください。既存のprops名は変更しないでください」のように書きます。さらに「変更前に方針を説明して」「差分を小さくして」「テストがあれば更新して」と入れると、レビューしやすくなります。

VS Codeで使う場合、CursorやWindsurfなどとの関係も気になるところです。公式ドキュメントでは、Codex IDE extensionはVS Code forksであるCursorやWindsurfでも動作すると説明されています。つまり、VS Codeそのものだけでなく、VS Code系のエディタを使っている人も導入候補になります。ただし、UIや拡張表示位置はエディタによって異なる可能性があります。

ChatGPTアカウントで使うかAPIキーで使うかも確認ポイントです。ChatGPTのプランに含まれるCodexとして使う場合と、APIキーで従量課金的に使う場合では、機能や利用条件が異なる可能性があります。公式Pricingページでは、APIキー利用はCLI、SDK、IDE拡張で使える一方、クラウドベースのGitHubコードレビューやSlack連携などは含まれないと説明されています。

業務利用でVS Code拡張を使う場合は、社内ルールの確認が必要です。コードをAIに読ませてよいか、機密情報や顧客情報を含むファイルを扱ってよいか、GitHub連携を許可するか、ログや監査をどう扱うかを決めておく必要があります。個人開発では便利な拡張でも、会社のリポジトリでは管理者の許可が必要になることがあります。