この記事でできること
VS Code の 開発コンテナ（Dev Container） の中で、2つのAIを動かします。
- Claude Code（Anthropic）
- Codex CLI（OpenAI）
さらに、Claude から Codex を呼び出せるようにします。
たとえば「Codexにもレビューしてもらって」と頼むだけで、Claude が裏で Codex に質問します。そして、2人の意見をまとめて報告してくれます。
連携には、Claude Code 用のスキル cc-skill-codex を使います。
この記事の順番どおりに進めれば、一度で動く状態になるように書いています。
前提記事
Docker Desktop の準備と仕組み
参考記事
Python と VS Code の準備
Codex 単体の使い方（Codex アプリ・VS Code 拡張・CLI）は、こちらで詳しく紹介しています。この記事では、その Codex を Claude Code から呼び出す ところまで進めます。
今回の環境構成
例として、筆者が開発している とある業務システム（Web アプリ） のプロジェクトを使います。記事の中では、名前を my-project にしています。
- frontend：Next.js（React / TypeScript）の画面
- backend：Python / Flask の API
- db：PostgreSQL
- app：開発用のコンテナ。VS Code はここに接続し、Claude Code と Codex もここで動かします
my-project開発環境の構成
図の見方は、次のとおりです。
| ポイント | 説明 |
|---|---|
| VS Code は app コンテナ に接続する | ターミナルも Claude も Codex も、すべてコンテナの中で動く |
| プロジェクトフォルダは 共有 される | Windows の C:\work\my-project と、コンテナ内の /workspaces/my-project は同じ中身 |
| スキルはプロジェクトの中に置く | 共有フォルダの中にあるので、コンテナ内の Claude からそのまま見える |
| ログイン情報は ボリューム に保存 | コンテナを作り直しても、ログインし直さなくてよい |
| Claude・Codex はインターネット経由 | AI の処理は、Anthropic と OpenAI のサーバーで行われる |
プロジェクトのフォルダ構成
この記事で 追加・編集するファイル に ★ を付けています。
☆ を付けたものは、例に使っている 業務システム固有のフォルダ です。
my-project/
├── .claude/
│ └── skills/
│ └── codex/ ★ スキル（cc-skill-codex）
│ ├── SKILL.md
│ └── scripts/
│ └── codex-ask.sh
├── .codex/ Codex のプロジェクト設定
├── .devcontainer/
│ ├── devcontainer.json ★ 開発コンテナの設定
│ └── Dockerfile app コンテナの作り方
├── .secrets/ 秘密情報（git 管理外）
├── backend/ ☆ システムの API（Flask）
├── docs/ ☆ システムの要件・設計書
├── frontend/ ☆ システムの画面（Next.js）
├── reference/ ☆ システムの参考資料
├── scripts/ ☆ システムの検証・運用スクリプト
├── .env 環境変数（git 管理外）
├── .env.example 環境変数のひな形
├── .gitattributes ★ 改行コードの設定
├── .gitignore ★ git に入れないファイルの設定
├── AGENTS.md Codex が読むルール
├── CLAUDE.md ★ Claude が読むルール
├── compose.yml ★ 4つのサービスの定義
└── README.md
☆ のフォルダについて
backend/・frontend/・docs/ などは、筆者が開発している とある業務システム（Web アプリ） で使っているものです。この記事の手順とは関係ないので、同じものを用意する必要はありません。
自分のプロジェクトでは、ここが自分のアプリのフォルダに置き換わります。たとえば、src/ だけのシンプルな構成でも大丈夫です。
この記事で大事なのは ★ の付いたファイルだけです。
.claude や .env のように、名前が .（ドット）で始まるファイルやフォルダは、Windows のエクスプローラーでは表示されないことがあります。VS Code のファイル一覧では表示されます。
全体の流れ
| 手順 | 内容 | 作業する場所 |
|---|---|---|
| 1 | 必要なものを準備する | Windows |
| 2 | VS Code に拡張機能を入れる | VS Code |
| 3 | スキルをプロジェクトに置く | Windows（PowerShell） |
| 4 | 設定ファイルを作る | VS Code |
| 5 | コンテナで開く | VS Code |
| 6 | Claude と Codex にログインする | コンテナ内ターミナル |
| 7 | 動作を確認する | Claude の画面 |
3種類の「入力する場所」を区別しよう
この手順では、文字を入力する場所が3つ出てきます。どこに入力するか を間違えないことが、いちばん大事です。
| 表示 | 場所 | ここで入力するもの |
|---|---|---|
PS C:\...> |
Windows の PowerShell |
docker、ファイルのコピーなど |
vscode ➜ /workspaces/... $ |
コンテナ内のターミナル（bash） |
claude、codex、git などのコマンド |
枠で囲まれた入力欄と ❯
|
Claude の画面 | 日本語の依頼、/skills など |
1. 必要なものを準備する
1-1. インストールするもの
| ソフト | 入手先 |
|---|---|
| Docker Desktop | https://www.docker.com/products/docker-desktop/ |
| VS Code | https://code.visualstudio.com/ |
Docker Desktop は、インストール後に 起動した状態 にしておきます。
インストールの詳しい手順は、次の記事を参照してください。
- VS Code：Python環境セットアップ完全ガイド
- Docker Desktop：Docker Desktop for Windows 入門
1-2. 必要なアカウント
- Claude の有料プラン（Pro / Max）
- ChatGPT のアカウント（Codex で使います）
1-3. ChatGPT の設定を1つ変えておく
Codex は、コンテナの中から「URLとコードを入力する方式（デバイスコード認証）」でログインします。この方式は、最初はオフになっています。先にオンにしておきます。
- ブラウザで ChatGPT を開く
- 左下の自分の名前 →「設定」→「セキュリティとログイン」
- いちばん下の「Codex、Excel、PowerPoint、Wordでのデバイスコードによるサインインを有効にする」を オン にする
デバイスコードは、自分で実行したログインで表示されたもの だけを入力してください。他人から「このコードを入力して」と言われても、絶対に入力しないでください。
1-4. ほかのコンテナを止めておく
ほかのプロジェクトのコンテナが動いていると、使うポート（3000番など）がぶつかって起動できないことがあります。
Docker Desktop の「Containers」画面を開き、今回使わないコンテナは ■（Stop）で止めておきます。
2. VS Code に拡張機能を入れる
2-1. Dev Containers 拡張機能（必須）
VS Code からコンテナに接続するための拡張機能です。
- VS Code の左端にある「拡張機能」アイコン（四角が4つのマーク）をクリック
- 上の検索欄に
Dev Containersと入力 - 発行元が Microsoft の「Dev Containers」を選び、「インストール」を押す
検索結果の下に出る「おすすめ」は、入れなくて大丈夫です。
2-2. Claude Code と Codex の拡張機能
この2つは、手順4の設定ファイルに書いておきます。そうすると、コンテナに接続したときに自動で入ります。ここで手動で入れる必要はありません。
参考までに、手動で入れる場合は、拡張機能の検索欄で次を探します。
| 拡張機能 | 検索ワード | 発行元 |
|---|---|---|
| Claude Code | Claude Code |
Anthropic |
| Codex | Codex |
OpenAI |
似た名前の非公式の拡張機能もあります。発行元の名前 と、その横の 青いチェックマーク（公式の印） を必ず確認してください。
Codex の拡張機能の画面や操作方法は、VS Code中心で学ぶCodex入門 で画像付きで紹介しています。
3. スキルをプロジェクトに置く
3-1. スキルをダウンロードする
- https://github.com/wywwzjj/cc-skill-codex を開く
- 緑の「Code」ボタン →「Download ZIP」
- 「ダウンロード」フォルダに
cc-skill-codex-main.zipが保存される
3-2. プロジェクトの中にコピーする
ZIPの中にはプラグインが2つ入っていますが、使うのは cc-skill-codex（Claude → Codex の方向）だけ です。
スキルは プロジェクトの中の .claude\skills\ に置きます。プロジェクトのフォルダはコンテナと共有されるので、コンテナの中の Claude からもそのまま見えます。
Windows の PowerShell を開き、次を実行します。C:\work\my-project の部分は、自分のプロジェクトのフォルダに置き換えてください。
$PROJECT = "C:\work\my-project"
Expand-Archive "$HOME\Downloads\cc-skill-codex-main.zip" -DestinationPath "$HOME\Downloads" -Force
New-Item -ItemType Directory -Force "$PROJECT\.claude\skills" | Out-Null
Copy-Item -Recurse -Force "$HOME\Downloads\cc-skill-codex-main\plugins\cc-skill-codex\skills\codex" "$PROJECT\.claude\skills\codex"
dir "$PROJECT\.claude\skills\codex"
最後の dir で、SKILL.md と scripts が表示されればOKです。
my-project/
└ .claude/
└ skills/
└ codex/
├ SKILL.md
└ scripts/
└ codex-ask.sh
4. 設定ファイルを作る
VS Code で、プロジェクトのフォルダを開きます（「ファイル」→「フォルダーを開く」）。
ここでは、「今回の環境構成」の my-project を例にします。前提は次のとおりです。
- 開発用のサービス名：
app（ほかにdb・backend・frontendがある） - コンテナ内のユーザー：
vscode - app コンテナは、Python の Dev Container イメージから作る（python3 が入っている）
自分の構成に合わせて読み替えてください。
参考までに、app コンテナの Dockerfile は次のようになっています。Claude Code と Codex のための変更は、ここには 必要ありません。
FROM mcr.microsoft.com/devcontainers/python:1-3.12-bookworm
USER root
# 不要なYarn APT Repositoryを削除する
RUN rm -f /etc/apt/sources.list.d/yarn.list
# Playwrightで使用するChromiumをインストールする
RUN apt-get update && apt-get install -y --no-install-recommends chromium && rm -rf /var/lib/apt/lists/*
ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium
USER vscode
4-1. .devcontainer/devcontainer.json
{
"name": "My Project Development",
"dockerComposeFile": "../compose.yml",
"service": "app",
"runServices": ["app", "db", "backend", "frontend"],
"workspaceFolder": "/workspaces/my-project",
"features": {
"ghcr.io/devcontainers/features/node:1": {
"version": "lts"
}
},
"customizations": {
"vscode": {
"extensions": [
"anthropic.claude-code",
"openai.chatgpt"
]
}
},
"postCreateCommand": "sudo mkdir -p /home/vscode/.claude /home/vscode/.codex && sudo chown -R vscode:vscode /home/vscode/.claude /home/vscode/.codex && npm install -g --allow-scripts=@anthropic-ai/claude-code @openai/codex @anthropic-ai/claude-code && git config --global --add safe.directory /workspaces/my-project",
"remoteUser": "vscode"
}
それぞれの設定の意味は、次のとおりです。
| 設定 | 意味 |
|---|---|
service / runServices
|
VS Code が接続するのは app。起動するのは4つのサービスすべて |
features の node |
Claude Code と Codex を動かすのに必要な Node.js を入れる |
extensions |
Claude Code と Codex の拡張機能を、コンテナ側に自動で入れる |
postCreateCommand |
コンテナを作るときに、次の処理を自動で行う ・ログイン情報を保存するフォルダの準備 ・Claude Code と Codex 本体のインストール ・git がこのフォルダを使えるようにする設定 |
すでに extensions や postCreateCommand がある場合は、上書きせずに中身を追加してください。
4-2. compose.yml（ログイン状態を残す設定）
コンテナを作り直しても、ログインし直さなくて済むようにします。app サービスに volumes を追加し、ファイルの一番下にも volumes を追加します。
services:
app:
# …既存の設定はそのまま…
volumes:
# …既存の行はそのまま残す…
- claude-config:/home/vscode/.claude
- codex-config:/home/vscode/.codex
# ファイルの一番下（services と同じ深さ）
volumes:
# …既存の行があれば残す…
claude-config:
codex-config:
volumes: がすでにある場合は、新しく書かずに 既存の volumes: の中に行を追加 してください。同じ名前のものが2つあると、片方が無視されます。
4-3. CLAUDE.md（Claude へのルール）
プロジェクトの 一番上（直下） に CLAUDE.md を作ります。
@AGENTS.md
## Codexの呼び出し
- この開発コンテナではCodexのサンドボックスが使えないため、codex exec は `-s danger-full-access` を付けて実行する。
- レビュー・質問が目的のときは、Codexへの指示に「ファイルを変更しないこと」を必ず入れる。
それぞれの意味は、次のとおりです。
-
@AGENTS.md：Codex が自動で読むルールファイル（AGENTS.md）を、Claude にも読ませます。2人が同じルールで動くようになります。AGENTS.md がないプロジェクトなら、この行は消してかまいません。 - Codexの呼び出し：Codex には、安全のための「サンドボックス」という仕組みがあります。ただ、Docker コンテナの中ではこれが動きません。コンテナ自体がすでに隔離された環境なので、Codex のサンドボックスは外して実行するようにします。
4-4. .gitattributes
スクリプトの改行コードが Windows 形式になって動かなくなるのを防ぎます。プロジェクト直下の .gitattributes（なければ新しく作る）に、次の1行を追加します。
*.sh text eol=lf
4-5. .gitignore の確認
.env などの秘密情報が git に記録されないように、.gitignore に入っているか確認します。
.env
.secrets/
5. コンテナで開く
- VS Code で Ctrl + Shift + P を押す
- 入力欄に
再ビルドと入力 - 「開発コンテナー: コンテナーで再ビルドして再度開く」（Dev Containers: Rebuild and Reopen in Container）を選ぶ
初回は数分かかります。右下の「ログの表示」を押すと、進み具合が見られます。
Docker Desktop の「Images」画面にある ▶（Run）ボタンは押さないでください。compose の設定が入っていない、別のコンテナが作られてしまいます。コンテナには、必ず VS Code から接続します。
接続できたか確認
- VS Code の左下に「開発コンテナー: My Project Development」と表示される
- メニューの「ターミナル」→「新しいターミナル」で開いたターミナルが、
vscode ➜ /workspaces/my-project $になっている
最初に開いたターミナルで、両方入っているか確認します。
claude --version && codex --version
2つともバージョンが表示されればOKです。
6. Claude と Codex にログインする
6-1. Codex にログイン
codex login --device-auth
表示に従って、ログインします。
- 表示された URL（
https://auth.openai.com/codex/device）をブラウザで開く - ChatGPT のアカウントを選ぶ
- ターミナルに表示された コード（
XXXX-XXXXXの形）を入力して「続行」
ログインできたか確認します。
codex login status
Logged in using ChatGPT と出ればOKです。
6-2. Claude Code にログイン
claude
初回は、いくつか設定の画面が出ます。上から順に進めます。
| 画面 | 操作 |
|---|---|
| 画面の色（テーマ） | そのまま Enter |
| ログイン方法 | 「Claude account with subscription」を選んで Enter |
| ブラウザでログイン | 開いたページでログインして「承認」。コードが出たら、ターミナルに貼り付けて Enter |
| Security notes（注意書き） | Enter |
| ターミナルの設定 | おすすめ（recommended）を選んで Enter |
| Do you trust the files in this folder? | ↓キーで「Yes, I trust this folder」を選んでから Enter |
最後の画面は、最初は「No, exit」が選ばれています。そのまま Enter を押すと終了してしまうので、必ず ↓キー で Yes を選んでください。
❯ の入力欄が表示されたら、ログイン完了です。
VS Code 右上のオレンジ色の ✳ アイコンからも、Claude の画面を開けます。ターミナルと同じように使えます。
7. 動作を確認する
7-1. 作業前の状態を git に記録する
Claude や Codex がファイルを書き換えても、いつでも元に戻せるようにします。別のターミナル（ターミナル右上の「＋」で追加）で、次を実行します。
git config --global user.name "your-name"
git config --global user.email "you@example.com"
git init
git add . && git commit -m "初期状態"
名前とメールは、「誰が記録したか」の印として残るだけです。GitHub などに公開しないなら、なんでもかまいません。公開する予定があるなら、本名や個人のメールは避けておくと安心です。
すでに git で管理しているプロジェクトなら、git init は不要です。
7-2. スキルが読み込まれているか確認
Claude の画面 で、次を入力します。
/skills
一覧に codex project があればOKです。Esc で閉じます。
7-3. Codex を呼んでみる
Codexに「このリポジトリの構成を3行で説明して」と聞いて、その答えを教えて
途中で「このコマンドを実行してよいですか？」と聞かれたら、内容を確認して許可します。
Codex が実際のファイルを読んだ答え（フォルダ名や使っている技術など）が返ってくれば、完成 です 🎉
使い方の例
例1：Codex にレビューしてもらう
backend の認証まわりのコードを、Codexに批判的にレビューしてもらって。
指摘をまとめて、直すべきものの優先度を付けて。
例2：2人で議論させる
docs の設計書で、矛盾や未決定のところを洗い出して。
自分で調べたあと、気になる点をCodexに質問して意見をもらい、
意見が違うところは議論して、結論と根拠をまとめて。
例3：修正まで任せて、決められないものは人間に回す
見つかった問題を、優先度の高い順に直してください。
- 修正するたびにCodexにレビューしてもらい、指摘があれば直す
- 1つの問題が片付くたびに git にコミットする
- APIキーなどの実際の値、業務ルール、資料から判断できないものは、
自分で決めずに docs/review/human-decisions.md に、選択肢とおすすめ付きでまとめる
Shift + Tab を押して「accept edits on」にすると、ファイル編集のたびに出る許可の確認を省略できます。コマンドの実行は、引き続き確認されます。
付録：作業が終わったらメールで知らせてもらう
Claude Code には、単体でメールを送る機能はありません。Gmail から自分宛てに送る小さなスクリプトを用意しておき、作業の最後に Claude に実行してもらいます。
① Gmail のアプリパスワードを作る
https://myaccount.google.com/apppasswords で作成します（2段階認証をオンにしておく必要があります）。表示された16文字のパスワードを控えます。
② パスワードを保存する（.secrets/ は git の管理外）
mkdir -p .secrets
cat > .secrets/mail.env <<'END'
GMAIL_USER=you@gmail.com
GMAIL_APP_PASSWORD=xxxxxxxxxxxxxxxx
END
③ 送信スクリプトを作る
import os, smtplib, sys
from email.message import EmailMessage
user = os.environ["GMAIL_USER"]
msg = EmailMessage()
msg["Subject"] = sys.argv[1] if len(sys.argv) > 1 else "Claude通知"
msg["From"] = user
msg["To"] = user
msg.set_content(sys.stdin.read())
with smtplib.SMTP_SSL("smtp.gmail.com", 465) as s:
s.login(user, os.environ["GMAIL_APP_PASSWORD"])
s.send_message(msg)
print("sent")
④ テスト送信
set -a; . .secrets/mail.env; set +a
echo "テスト送信です" | python3 scripts/notify_mail.py "テスト"
sent と表示され、メールが届けば成功です。
⑤ Claude への依頼の最後に付け加える
終わったら、次のコマンドで結果をメールで知らせてください。秘密情報は本文に入れないこと。
set -a; . .secrets/mail.env; set +a
python3 scripts/notify_mail.py "【my-project】作業完了" <<'END'
（本文）
END
まとめ
- スキルは プロジェクトの中の
.claude/skills/に置くと、コンテナからそのまま使える - Claude Code・Codex の本体と拡張機能は、devcontainer.json に書いておけば自動で入る
- Codex のログインは、ChatGPT の設定でデバイスコード認証をオンにしてから
codex login --device-auth -
CLAUDE.mdに Codex の呼び出し方を書いておくと、毎回指示しなくてよい - 作業前に git でコミット しておけば、AI が書き換えても安心
Claude が作業し、Codex が別の目でチェックします。1人で開発していても、レビュー役がいる状態を作れます。
参考
関連記事
- Python環境セットアップ完全ガイド【Windows / Mac / Linux対応・venv・VSCode実行まで】
- Docker Desktop for Windows 入門：仕組みと構築方法
- VS Code中心で学ぶCodex入門 Codexアプリ・VS Code拡張・CLIでPythonコードを作る手順
公式・ツール