MacでVSCode + Codexを導入する手順

2025年11月版として、macOSでVisual Studio CodeとOpenAI Codexを連携させる最小構成の手順をまとめました。Appleシリコン／IntelいずれのMacでも同じ流れで進められ、Homebrewを使わずnvmでNode.jsを導入し、Codexはブラウザ認証のみで利用します。

1. 前提条件

  • macOS Ventura以降（Montereyでも概ね同様に動作）
  • 管理者権限を持つユーザーでサインインし、標準のzshターミナルを利用できる
  • OpenAIアカウントを保持（APIキーは不要、ブラウザのシングルサインオンのみ利用）
  • SafariまたはChromeなど、外部ブラウザでのログインが許可されたネットワーク環境

2. VSCodeをインストール／更新

  1. 公式サイトからmacOS版をダウンロード
  2. Visual Studio Code.appを/Applicationsへ移動
  3. 既存環境がある場合は起動後にコマンドパレットで>Check for Updatesを実行
  4. Code > Install 'code' command in PATHでcodeコマンドを有効化してターミナル連携を簡単にする

3. nvmで最新のNode.js LTSを導入

Homebrewは使わず、Node Version Manager（nvm）を直接取得します。常に最新リリースを取得するため、以下の2行をそのまま実行してください。

LATEST_NVM_TAG=$(curl -s https://api.github.com/repos/nvm-sh/nvm/releases/latest | grep tag_name | cut -d '"' -f 4)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/${LATEST_NVM_TAG}/install.sh | bash

途中で「xcode-select: note: xcode-select —install」を求められた場合は、表示された指示に従ってコマンドライン・ツールをインストールしてから、もう一度上記コマンドを実行してください。

インストール後、ターミナルを再起動するかsource ~/.zshrcでnvmを読み込み、Node.jsを導入します。

nvm install --lts
nvm use --lts
node -v
npm -v

プロジェクトごとにバージョンを切り替えたい場合はnvm lsや.nvmrcを活用してください。

4. Codex CLIをインストールしてブラウザ認証

Codex CLIはnpmからグローバルインストールし、続けてcodexコマンドを実行してブラウザ認証を完了させます。初回起動時にブラウザが開き、OpenAIアカウントでサインインできればCLIセットアップは完了です。

npm install -g @openai/codex
codex

トークンは~/.config/openai/codex配下に保存されます。認証を解除したい場合はcodex logoutを実行してください。

5. VSCodeでCodex拡張を設定

  1. VSCodeの拡張ビューで「Codex」または「OpenAI」を検索
  2. 公式Codex拡張（Insider版を含む）をインストール
  3. CLIでログイン済みであれば追加のAPIキー設定は不要。拡張が既存トークンを再利用します
  4. Codex: Open ChatやCodex: Complete Selectionにショートカットを割り当てると操作がスムーズです

6. 動作確認フロー

  1. 任意の空フォルダ（例：~/codex-web-demo）を作成し、VSCodeでフォルダごと開きます。
  2. VSCodeのコマンドパレットからCodex: Open Chatを呼び出し、「素敵なWEBサイトのトップページを作成して」と入力してHTMLを生成します。
  3. 生成結果をindex.htmlとして保存し、VSCodeの内蔵プレビューまたはopen index.htmlでブラウザを起動して表示を確認します。
  4. レイアウトやスタイルが期待通りに描画されれば、Codexのインストールと認証は正常に完了しています。

これでMac上でもVSCodeとCodexをブラウザ認証だけで安全に連携し、生成したコードをすぐにブラウザで確認できます。日々の開発フローに合わせて設定を調整し、AI支援による生産性向上を体感してください。