CodexをVSCodeで使う初心者向けガイド|開発環境の始め方と基本操作

VSCodeでCodexを使いながらコードを確認している初心者 AI活用

※本記事はプロモーションを含みます

CodexはVSCodeに公式拡張機能を入れ、プロジェクトを開けば、日本語でコード生成・修正・確認を進められます。

初心者が最初に覚えたいのは、難しいプログラミング用語よりも「作業するフォルダを開く」「小さく指示する」「変更内容を確認してから採用する」という3点です。

※本記事は2026年8月7日(JST)時点で確認できるOpenAI公式情報と、2025年9月14日公開のQiita記事、2026年8月6日更新のSHIFT AI TIMESなどの参考資料をもとに整理しています。画面表示、利用できるモデル、プランごとの上限は変更される可能性があるため、最新情報は公式案内も確認してください。

CodexをVSCodeで使うと何ができる?

VSCode内でCodexに日本語でコード修正を依頼しているパソコン画面
※画像はAIによるイメージ

CodexをVSCodeで使う最大のメリットは、コードを見る場所とAIに相談する場所をほぼ一つにまとめられることです。

OpenAIの公式ドキュメントでは、Codex IDE extensionを使うと、エディタで開いているファイルや選択したコードを文脈として渡し、コードの説明、修正、レビューなどを進められると案内されています。

これまで生成AIでプログラムを作る場合は、AIのチャット画面にコードをコピーし、回答されたコードをVSCodeへ戻すという往復が必要でした。

Codex IDE extensionでは、この「行ったり来たり」を減らしやすくなります。

たとえば、次のような使い方ができます。

  • 「このコードが何をしているのか初心者向けに説明して」
  • 「このエラーの原因を調べて」
  • 「このボタンを押したら画面が切り替わるようにして」
  • 「既存のデザインを崩さず入力欄を追加して」
  • 「この変更に問題がないか確認して」
  • 「テストを作って動作を確認して」

特に便利なのが、変更前と変更後を見比べながら確認できることです。

OpenAIの現在の公式説明でも、Codexが行った変更について要約と変更箇所をエディタの近くで確認し、必要な変更だけを残せる仕組みが案内されています。

これは初心者にとって、とても大きな意味があります。

AIがコードを書いてくれること以上に、「どこを変えたのかを見ながら学べる」からです。

プログラミングを始めたばかりの頃は、完成した100行のコードを渡されても、何が起きているのか分からなくなりがちです。

一方で、「この3行を追加しました」「この部分を変更しました」と差分を追えれば、少しずつコードの役割が見えてきます。

私は、Codexを初心者が使う価値は、単なる時短だけではないと考えています。

AIに全部書かせる道具ではなく、変更を一つずつ確認しながら開発を覚える補助輪として使えることが、むしろ大きな魅力です。

VSCodeやCodexを初めて触ると、インストール、認証、設定など、覚えることが一度に増えて戸惑いやすいですよね。情報をあとで確認できる入口を先に用意したい場合は、「LINE 友だち追加」のページを確認しておく方法もあります。リンク先では、LINEアプリの友だち追加画面からQRコードを読み取る手順をスマートフォンで確認できます。追加後に見られる内容については元資料では確認できないため、最新の案内はリンク先で確認してください。⇒ LINE友だち追加|スマホで登録手順を確認


CodexをVSCodeへ入れるには?初心者向け3ステップ

VSCodeでCodex拡張機能を入れてプロジェクトフォルダを開く3ステップ
※画像はAIによるイメージ

CodexをVSCodeで使い始める流れは、大きく分ければ「拡張機能を入れる」「サインインする」「プロジェクトを開く」の3段階です。

公式ドキュメントでも、VS Codeなど対応IDEへCodexを導入し、Codexを開いてプロジェクトから最初のチャットを始める流れが案内されています。

1. VSCodeにCodex拡張機能をインストールする

まずVisual Studio Codeを起動します。

左側にある拡張機能の画面を開き、Codexを検索します。

参考資料では、Visual Studio MarketplaceにあるOpenAI公式の「Codex – OpenAI’s coding agent」をインストールする方法が紹介されています。

似た名前の拡張機能が表示される可能性もあるため、提供元がOpenAIであることを確認してから導入するのが安心です。

現在のOpenAI公式ドキュメントでは、VS Codeのほか、Cursor、Windsurf、Visual Studio Code InsidersなどもCodexの利用先として案内されています。

ただし、この記事では初心者が迷わないようにVSCodeに絞って説明します。

2. ChatGPTアカウントでサインインする

インストール後は、VSCode内からCodexを開きます。

Codexのアイコンが見つからない場合、現在の公式ドキュメントではコマンドパレットから「Codex: Open Codex Sidebar」を実行する方法も案内されています。

画面の案内に従ってChatGPTアカウントで認証します。

認証方法や初回画面はアップデートによって変わる可能性がありますので、ここでは表示される案内に沿って進めれば大丈夫です。

「細かい設定を全部理解してから始めなければ」と考える必要はありません。

参考となった2025年9月のQiita記事でも、設定項目を確認しつつ、最初は多くを変更せずデフォルト状態で試しています。

初心者の場合も、まず動作を確認してから必要な設定だけ覚えていくほうが負担を減らせます。

3. 必ずプロジェクトのフォルダを開く

ここは、初心者が最もつまずきやすいポイントです。

Codexを開いただけではなく、作業対象となるプロジェクトのフォルダをVSCodeで開いてください。

OpenAI公式も、最初のチャットを始める際にプロジェクトを開き、コードベースの説明や小さな変更、デバッグを依頼する流れを案内しています。

2025年9月14日に公開されたQiitaの記事でも、実際にこの点で一度止まっています。

記事を書いたのはKDDI株式会社所属の@youtoy(Yosuke Toyota)さんで、2025年9月14日夜に開催されたAI道場の「Codexもくもく会」へ参加したことをきっかけに、Codex IDE extensionを試しています。

最初に、

「指定したページと同じ見た目のものをHTML+CSS+JavaScriptで作って」

という趣旨の依頼をしたものの、VSCodeのワークスペースにフォルダが登録されていなかったため、そのままでは処理を進められませんでした。

そこで適当なフォルダを作り、ワークスペースへ登録したところ、Codexを実行できる状態になっています。

この実例は、初心者にとってかなり参考になります。

「Codexが動かないから設定を間違えた」と焦る前に、そもそも作業するフォルダを開いているかを確認してみましょう。

フォルダを開いたら、いきなり大きなアプリを作らせる必要はありません。

最初は、

「このフォルダの構成を初心者向けに説明して」

「簡単なHTMLページを1つ作って」

「変更する前に、何をする予定か説明して」

といった小さな依頼がおすすめです。

最初の成功体験を小さくするほど、「何が起きたか分からないまま大量のコードが増える」という失敗を避けやすくなります。


Codex VSCodeの基本操作は?安全に使う5つのポイント

Codexの変更差分と権限設定を確認しながら安全に開発している画面
※画像はAIによるイメージ

Codexを使い始めたら、機能を全部覚えるより、安全に変更を確認する流れを身につけることが先です。

私は初心者の方には、次の順番をおすすめします。

順番 やること 目的
1 やりたいことを日本語で伝える ゴールを明確にする
2 変更前に方針を確認する 意図しない修正を減らす
3 小さな範囲だけ変更する 問題の切り分けを簡単にする
4 Diffや変更ファイルを確認する AIの変更を把握する
5 動作確認してから次へ進む 不具合の積み重なりを防ぐ

まず日本語で普通に相談する

Codexだからといって、特別な命令文を覚える必要はありません。

「ログイン画面を作って」

だけでも動かせますが、初心者ほど少しだけ条件を加えると失敗を減らせます。

たとえば、

「既存ファイルをできるだけ壊さず、ログイン画面を追加してください。変更前に作業内容を説明してください」

という伝え方です。

ゴール、制約、確認方法の3点を短く入れるだけで、AI側も作業範囲を判断しやすくなります。

開いているファイルや選択部分を文脈として使う

現在のCodex IDE extensionは、開いているファイル、選択したコード、最近のチャットなどを文脈として扱えることが公式に案内されています。

つまり毎回、

「○○フォルダの△△ファイルの、この関数の、この部分ですが」

と長々説明しなくても、対象を開いた状態で質問しやすくなります。

ここが普通のチャット型AIとIDE統合型ツールの大きな違いです。

Diffを確認してから変更を採用する

Codexは便利ですが、生成されたコードが常に正しいとは限りません。

AIが意図していないファイルを変更したり、必要な処理まで削除したりする可能性はあります。

参考資料のSHIFT AI TIMESでも、

  • 変更されたファイルが意図したものか
  • 不要なコードが追加されていないか
  • 必要なコードまで削除されていないか
  • セキュリティ上の問題がないか

といった確認の重要性が説明されています。

初心者だとコードを全部読めないこともあります。

その場合でも、

「なぜこのファイルを変更したの?」

「削除した部分は本当に不要?」

「今回変更したファイルを一覧で説明して」

とCodex自身に説明させることができます。

読めないから確認しないのではなく、読めない部分ほど説明させるのがAI時代の学び方です。

大きな変更の前にはGitなどで戻せる状態を作る

現在のOpenAI公式ドキュメントでは、タスクの前後にGitのチェックポイントを作り、必要なら変更を戻せる状態にすることも推奨されています。

Gitは初心者には少し難しく聞こえるかもしれません。

簡単にいえば、「作業前の状態を保存しておき、失敗したら戻せるようにしておく仕組み」です。

最初からGitを完璧に使いこなす必要はありませんが、Codexへ広い範囲の修正を任せるようになったら覚えておきたい考え方です。

権限は最初から最大にしない

Codexはファイル編集やコマンド実行まで扱えるため、権限の設定は重要です。

2026年8月6日更新のSHIFT AI TIMESでは、確認を挟みながら操作する設定、自動レビューを含む設定、より広いアクセスを許可する設定などが紹介されています。

ただし、設定名や表示される選択肢はアップデートによって変わる可能性があります。

そのため、「この名前のモードを必ず選ぶ」と覚えるより、

初心者のうちは、ファイル変更やコマンド実行を自分で確認できる設定から始める

と覚えるほうが長く使える知識になります。

便利だからと最初から広い権限を与える必要はありません。

車を運転し始めた日に高速道路でアクセルをいっぱいに踏む必要がないのと同じで、AI開発も最初はガードレールがあるほうが安心です。

Codexは便利でも、変更内容の確認、権限設定、エラー対応まで全部一度に覚えようとすると負担が大きくなります。情報を確認する手段を増やしたい場合は、「LINE 友だち追加」ページを使う方法もあります。リンク先ではQRコードを使った友だち追加の流れが案内されており、スマートフォンのLINEアプリから確認できます。まとまった時間を取れない場合も登録手順だけ少しずつ確認できますが、追加後の内容は元資料では未確認です。最新情報はリンク先をご確認ください。⇒ LINE友だち追加|登録方法を短時間で確認


WindowsでCodexを使う場合は?料金・スキルも確認

CodexをVSCodeで使う初心者が検索していると、Windows、WSL2、料金プラン、モデルなど、次々と新しい言葉が出てきます。

ここは情報が変化しやすいため、古い記事の内容をそのまま現在の仕様だと思わないことが大切です。

WindowsではWSL2が必須とは限らない

一部の参考記事では、WindowsでCodexを使う場合はWSL2を強く推奨する説明があります。

ただし、2026年8月7日時点のOpenAI公式ドキュメントを見ると、現在はWindows向けのサンドボックスに関する案内もあり、WSL2は「すべてのWindowsユーザーが必ず使わなければならないもの」とは整理されていません。

公式では、Linuxネイティブのツールが必要な場合、すでに開発環境をWSL2内に置いている場合、Windows側のサンドボックスが環境に合わない場合などにWSL2を選ぶ考え方が示されています。

WSL2とは、簡単にいえばWindowsパソコンの中でLinuxの開発環境を使える仕組みです。

Linux向けのツールを多く使う本格的な開発では便利ですが、初めてHTMLやCSSを作る人が、Codexを試す前に必ず理解しなければならないものではありません。

必要になった時点で導入を検討すれば十分です。

WSL2を使う場合、OpenAI公式はVSCodeをWSL内から開く方法も案内しており、リポジトリをLinux側のホームディレクトリへ置くことで、速度や権限関連の問題を減らしやすいと説明しています。

Codexを使えるプランは最新情報を確認する

料金についても、過去記事と現在の情報に違いがあります。

2026年8月7日時点のOpenAIヘルプでは、CodexはFree、Go、Plus、Pro、Business、Edu、Enterpriseの各プランに含まれると案内されています。ただし、利用上限や追加クレジットの扱いはプランによって異なります。

そのため、古い記事にある「有料プランでなければ使えない」といった説明を、そのまま現在の条件として受け取るのは避けたほうがよいでしょう。

PlusやProについては、含まれる利用枠を使い切った後、対象ユーザーが追加クレジットを利用できる仕組みも案内されています。

また、2026年4月にはCodexの料金体系がトークン利用量を基準とする形へ変更されています。

料金や上限は変わりやすい部分なので、この記事では特定の月額料金を固定情報として掲載しません。

契約前には、必ず自分のアカウントに表示される最新条件を確認してください。

モデル選びより先に操作方法を覚える

参考記事ではGPT-5.5、GPT-5.4、GPT-5.3-Codexなど、複数のモデルが紹介されています。

しかしモデル構成は更新が速く、OpenAI公式の現在のCodex IDE画面例では「5.6-Sol」と表示されている例も確認できます。

ここから分かるのは、「初心者は特定のモデル名を暗記しなくていい」ということです。

最初に覚える優先順位は、

1. 対象フォルダを開く
2. 小さな指示を出す
3. 変更内容を見る
4. 動作確認する
5. 必要になったらモデルや推論設定を調整する

という順番で十分です。

モデルを細かく比較する前に、基本の流れを安全に回せるようになったほうが、実際の作業では役立ちます。

繰り返す作業にはSkillsも使える

少し慣れてきたら「Skills」という仕組みも便利です。

現在のOpenAI公式ドキュメントでは、SkillsはChatGPTデスクトップアプリ、Codex CLI、IDE extensionで利用できると案内されています。

Skillは、繰り返し使う作業ルールをまとめておく仕組みです。

たとえば、

「HTMLを変更したら必ずスマホ表示も確認する」

「既存のファイルを勝手に削除しない」

「変更後は何を変えたか初心者向けに説明する」

といった、自分なりの開発ルールを繰り返し使いやすくできます。

公式仕様では、Skillは`SKILL.md`を含むフォルダとして作成し、`name`と`description`を記述します。リポジトリ内では`.agents/skills`から読み込む仕組みが案内されています。

ただし、Codexを初日に触る人がSkillsまで設定する必要はありません。

まず普通のチャットで何度か作業し、「毎回同じことを頼んでいるな」と感じ始めてから使うと理解しやすいでしょう。


実例から分かるCodex VSCode初心者の進め方と今後

CodexをVSCodeで使うとき、初心者ほど「一度の指示で完成させよう」としないことが重要だと私は考えています。

参考になったQiita記事でも、その点がよく見えます。

@youtoyさんは最初、OpenAIのCodex IDE extension公式ページと同じ見た目のページをHTML、CSS、JavaScriptで作るようCodexへ依頼しました。

しかしCodexが元ページのHTMLを直接取得するような動きをしたため、「見た目を再現してコーディングしてもらう」という本来の試したい内容とは少し違うと気づき、方針を変更しています。

そこで、元ページのキャプチャ画像を用意し、その画像を参考にHTMLとCSSで似たレイアウトを作るよう依頼しました。

結果として、画像素材をそのまま使わずにグラデーションなどを組み合わせたページが生成され、細かな差は残ったものの、全体として元画像に近い見た目まで作られています。

この実例で重要なのは、「Codexが一発で完璧なページを作った」という部分ではありません。

途中で目的とのズレに気づき、人間側が依頼方法を変えていることです。

私はここに、AIコーディングを長く使ううえで大切な姿勢が表れていると感じます。

Codexに任せるとは、考えることまで放棄することではありません。

AIが作業を進め、人間は、

「今やっていることは目的に合っているか」

「この変更は必要か」

「もっと簡単な方法はないか」

を判断します。

つまり「コードを書くのはAI、人間は監督」という役割分担に近づいていきます。

初心者におすすめなのは「一画面、一機能、一変更」

私なら、最初の開発では次のように区切ります。

最初から、

「会員登録、ログイン、商品一覧、決済、管理画面があるサービスを全部作って」

とは頼みません。

まず、

「白い背景にタイトルとボタンだけのページを作って」

と頼みます。

表示できたら、

「ボタンの下に入力欄を追加して」

と頼みます。

それも確認できたら、

「ボタンを押したら入力内容を表示して」

と進めます。

これは遠回りに見えますが、初心者にはむしろ近道です。

問題が起きても、「直前に追加した部分」を確認すればよいため、原因を探す範囲が小さくなるからです。

AIで開発速度が上がるほど、この「小さく区切る力」が重要になると考えています。

今後は「コードを書けるか」より「変更を判断できるか」が重要になる

これは私見ですが、CodexのようなAIコーディングエージェントが広がるほど、初心者でもWebツールや小さなアプリを作り始めやすくなるでしょう。

OpenAIの現在の公式説明でも、Codex IDE extensionはエディタの文脈を使った編集だけでなく、より長い作業を別の環境へ引き継ぐ流れまで意識した設計になっています。

一方で、AIにできることが増えるほど、「生成されたものを確認せず使う危険」も大きくなります。

これから重要になるのは、コードを何百行も暗記して書けることだけではありません。

「何を作るのかを言葉にする力」

「変更内容を見る力」

「分からないことをAIへ質問する力」

「おかしいと感じたら止める力」

こうした判断力も、開発スキルの一部になっていくと私は考えています。

私自身、体力を使う仕事から働き方を見直し、AIやITツールを学び始めたとき、専門用語が並ぶ画面を見るだけで「これは自分には難しいかもしれない」と感じることがありました。

けれど、すべてを理解してから始める必要はありません。

分からない項目を一つずつ確認し、「今日はフォルダを開けた」「今日はHTMLを1枚作れた」と積み重ねていけば十分です。

Codexを使う意味は、プログラミング経験者だけが速く開発することではなく、これまで開発の入口で立ち止まっていた人が、小さな一歩を踏み出しやすくなることにもあるのではないでしょうか。


まとめ

CodexをVSCodeで使う場合、最初に覚える流れはそれほど複雑ではありません。

OpenAI公式のCodex拡張機能を導入し、ChatGPTアカウントでサインインして、作業したいプロジェクトフォルダを開けば、コードの説明、生成、修正、レビューなどをVSCode内から進められます。

初心者が特に意識したいのは、最初からすべて自動化しないことです。

小さな指示を出し、変更箇所を確認し、動作を見てから次へ進む。

この繰り返しなら、コードをまだ十分に読めなくても、AIに説明してもらいながら理解を深められます。

Windows環境や料金プラン、モデル名などは今後も変わる可能性があります。

固定された古い情報だけに頼らず、公式情報を確認しながら、自分の環境に必要なものだけを少しずつ覚えていきましょう。

Codexは「何でも勝手に完成させてくれる魔法」ではありません。

けれど、人間が目的と確認を担当し、AIに作業を手伝ってもらう形なら、これまでより負担の少ない開発環境を作る有力な選択肢になりそうです。

CodexとVSCodeの基本を理解できたら、次は自分が無理なく続けられる情報収集の方法も整えておくと安心です。「LINE 友だち追加」のリンク先では、QRコードを使ってLINEへ友だちを追加する具体的な操作方法を確認できます。スマートフォンから手順を確認できるので、パソコン作業とは別のタイミングでも進められます。追加後に提供される内容は元資料では確認できないため、利用前にリンク先の最新案内を確認し、自分に必要か判断してみてください。⇒ LINE友だち追加|次の一歩の登録方法を確認


よくある質問

CodexはVSCode初心者でも使えますか?

はい。プロジェクトフォルダを開き、日本語で指示を入力するところから始められます。

ただし、AIが行った変更をそのまま採用するのではなく、変更ファイルやDiffを確認し、小さな修正から試す使い方がおすすめです。

Codexを使うには有料のChatGPTプランが必要ですか?

2026年8月7日時点のOpenAI公式ヘルプでは、CodexはFree、Go、Plus、Pro、Business、Edu、Enterpriseに含まれると案内されています。

ただし、利用上限や追加クレジットの条件はプランごとに異なるため、最新の利用条件は自分のアカウントと公式案内で確認してください。

WindowsではWSL2を入れないとCodexを使えませんか?

必ずしもそうではありません。

OpenAI公式ではWindows向け環境とWSL2の両方に関する案内があり、WSL2はLinuxネイティブのツールを使いたい場合や、開発環境がすでにWSL2にある場合などの選択肢として説明されています。

初心者がまずVSCodeとCodexの基本操作を試す段階なら、自分の用途に本当に必要か確認してから導入を検討するとよいでしょう。


主な出典

  • OpenAI公式「Codex IDE extension」2026年8月7日確認 Codex IDE extension公式ドキュメント
  • OpenAI公式「WSL」2026年8月7日確認 CodexのWSL公式ドキュメント
  • OpenAI公式「Build skills」2026年8月7日確認 Codex Skills公式ドキュメント
  • OpenAI Help Center「Using Codex with your ChatGPT plan」2026年8月7日確認 CodexとChatGPTプランの公式案内
  • OpenAI Help Center「Codex rate card」2026年8月7日確認 Codexレート表
  • @youtoy(Yosuke Toyota)「今さらながら OpenAI の『Codex IDE extension』を VS Code で少し試してみる(公式情報なども見つつ)」Qiita、2025年9月14日公開、9月15日最終更新
  • SHIFT AI TIMES「CodexはVSCodeで使える?できることやインストール手順、使い方を徹底解説!」2026年8月6日更新
  • AI-Rise「codexアプリとvscodeはどう違う?連携手順を初心者向けにゼロから徹底解説!」2026年5月27日公開

佐伯みのり

コメント

タイトルとURLをコピーしました