Codex を VS Code および GitHub Copilot と連携する方法 (2026年版)

CodexをVS CodeおよびGitHub Copilotと統合する方法 (2026年版)

OpenAIの Codex CLIと GitHub Copilotは、2026年において最も強力なAIコーディングツールの2つです。Copilotがエディタ内でのインライン補完を直接担当するのに対し、Codexはターミナルベースのコーディングエージェントとして動作し、ファイル全体の読み取り、書き込み、リファクタリングを自律的に実行できます。これらを組み合わせることで、エディタでのリアルタイムな提案と、ターミナルからの自律的なタスク実行という、両者の長所を活用できます。

このガイドでは、VS Codeで両方のツールをセットアップし、それらが連携するように構成し、生産性を最大化する実用的なワークフローについて説明します。

事前準備

開始する前に、以下が揃っていることを確認してください。

要件	最小バージョン	備考
VS Code	1.96+	最新の安定版を推奨
Node.js	18.0+	Codex CLIに必要
GitHub Copilot サブスクリプション	有効	個人プランまたはビジネスプラン
OpenAI API key	有効なキー	Codex CLIへのアクセス用
Git	2.40+	Codexにはgitリポジトリが必要

ステップ 1: VS CodeにGitHub Copilotをインストールする

まだ Copilotをインストールしていない場合：

1. VS Codeを開く
2. 拡張機能（Ctrl+Shift+X / Cmd+Shift+X）に移動
3. "GitHub Copilot" を検索
4. GitHub Copilot と GitHub Copilot Chat の両方をインストール
5. プロンプトが表示されたら GitHubアカウントでサインイン

コードファイルを開いてインストールを確認します。入力中にゴーストテキストの提案が表示されるはずです。

Copilotの設定を構成する

VS Codeの設定（Ctrl+, / Cmd+,）を開き、以下の主要な設定を調整します。

{
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "markdown": true,
    "plaintext": false
  },
  "github.copilot.advanced": {
    "length": 500,
    "temperature": 0.1
  }
}

temperature（温度）を低く（0.1）設定すると、より決定論的な提案が生成され、本番用コードに適しています。

ステップ 2: OpenAI Codex CLIをインストールする

Codex CLIは、コーディングタスクを自律的に実行できるターミナルベースのエージェントです。グローバルにインストールします。

npm install -g @openai/codex

OpenAI API keyを環境変数として設定します。これをシェルプロファイル（~/.bashrc, ~/.zshrcなど）に追加してください。

export OPENAI_API_KEY="sk-proj-your-api-key-here"

インストールを確認します。

codex --version

Codex CLIの構成

Codex CLIは、~/.codex/config.yamlにある構成ファイルを使用します。推奨設定で作成してください。

# ~/.codex/config.yaml
model: o4-mini
approval_mode: suggest

3つの承認モード（approval_mode）で、Codexの自律性を制御できます。

モード	動作	最適な用途
suggest	提案された変更を表示し、承認を求める	学習、レビュー
auto-edit	自動的にファイルを編集し、コマンド実行前に確認する	日常的な開発
full-auto	完全に自律的な実行	信頼できるサンドボックス化されたタスク

Codexの動作に慣れるまでは suggest モードから始めることをお勧めします。

ステップ 3: VS Code統合ターミナルからCodexを使用する

最もシンプルな統合方法は、VS Codeの統合ターミナルで直接 Codexを実行することです。

1. VS Codeターミナルを開く (Ctrl+ / Cmd+)
2. プロジェクトディレクトリに移動
3. タスクの説明を指定して Codexを実行：

codex "Add input validation to the signup form in src/components/SignupForm.tsx"

Codexはプロジェクト構造を分析し、関連ファイルを読み取り、変更を提案します。suggest モードでは、適用前に diff（差分）が表示されます。

実用的な例：エラー処理の追加

次のような基本的なAPIコールがあるとします。

// src/api/users.ts
export async function fetchUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

Codexを実行します：

codex "Add proper error handling, retry logic, and TypeScript types to src/api/users.ts"

Codexは次のような提案を提示します。

// src/api/users.ts
interface User {
  id: string;
  name: string;
  email: string;
}

interface FetchUsersResponse {
  users: User[];
  total: number;
}

export async function fetchUsers(retries = 3): Promise<FetchUsersResponse> {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const response = await fetch('/api/users');

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data: FetchUsersResponse = await response.json();
      return data;
    } catch (error) {
      if (attempt === retries) {
        throw new Error(
          `Failed to fetch users after ${retries} attempts: ${error instanceof Error ? error.message : 'Unknown error'}`
        );
      }
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    }
  }
  throw new Error('Unreachable');
}

ステップ 4: 統合ワークフローの構築

最も生産的なワークフローは、インラインコーディングには Copilotを使い、大規模なリファクタリングやスキャフォールディング（骨組み作成）タスクには Codexを使う方法です。以下のワークフローを推奨します。

新機能開発の場合

1. Codexを使用して機能の構造をスキャフォールディングする：

   codex "Create a new API route at src/app/api/webhooks/stripe/route.ts that handles Stripe checkout.session.completed events"
   

2. Copilotを使用して、生成されたファイルを編集しながら実装の詳細を埋める。

3. Codexを使用してテストを追加する：

   codex "Write unit tests for the Stripe webhook handler in src/app/api/webhooks/stripe/route.ts"
   

バグ修正の場合

1. Copilot Chatを使用してバグを分析する：

   • 問題のあるコードを選択
   • Ctrl+I / Cmd+I を押してインラインチャットを開く
   • 質問する: 「入力配列が空のとき、この関数が undefined を返す可能性があるのはなぜか？」

2. Codexを使用して関連ファイル全体に修正を適用する：

   codex "Fix the null reference error in the user dashboard. The issue is that fetchUserProfile can return undefined but the Dashboard component doesn't handle that case."
   

ステップ 5: Codexのプロジェクト指示を構成する

プロジェクトのルートに AGENTS.md ファイルを作成し、Codexにプロジェクト固有のコンテキストを提供します。

# Project Instructions

## Tech Stack
- Next.js 15 with App Router
- TypeScript strict mode
- Tailwind CSS for styling
- Drizzle ORM with PostgreSQL
- tRPC for API routes

## Conventions
- Use named exports, not default exports
- Prefer server components; add "use client" only when necessary
- All API responses use the Result<T> type from src/lib/types.ts
- Error handling uses the AppError class from src/lib/errors.ts

## Testing
- Use Vitest for unit tests
- Place tests next to source files as *.test.ts
- Use MSW for API mocking

Codexはこのファイルを自動的に読み取り、指定された規約に従います。

Copilot vs Codex: 使い分けの基準

タスク	Copilot を使用	Codex を使用
単一関数の記述	はい	過剰
インラインコード補完	はい	いいえ
複数ファイルのリファクタリング	いいえ	はい
新機能のスキャフォールディング	部分的に	はい
既存コードのテスト作成	部分的に	はい
コンテキストを含めたデバッグ	チャットが有効	大規模コードベースに最適
コードレビューの提案	Copilot Chat	はい
ファイルをまたぐ反復的な変更	いいえ	はい (full-auto モード)

よくある問題のトラブルシューティング

Copilot の提案が表示されない

# VS Code で Copilot のステータスを確認
# 下部のステータスバーにある Copilot アイコンを探す
# 警告が表示されている場合は、クリックして詳細を確認

# 一般的な修正方法：ウィンドウの再読み込み
# Ctrl+Shift+P / Cmd+Shift+P > "Developer: Reload Window" を実行

Codex CLI がファイルを読み取れない

Codexを使用するには、プロジェクトが gitリポジトリである必要があります。

# 必要に応じて git を初期化
git init
git add -A
git commit -m "Initial commit"

# これで Codex がプロジェクトを読み取れるようになります
codex "Describe the project structure"

API レート制限

Codexで OpenAIのレート制限に達した場合は、モデル構成を変更できます。

# ~/.codex/config.yaml
model: o4-mini  # o3 よりもクォータ消費が少ない

コストに関する考慮事項

ツール	料金モデル	推定コスト
GitHub Copilot Individual	$10/月	固定
GitHub Copilot Business	$19/ユーザー/月	固定
Codex CLI (o4-mini)	トークン従量課金	約 $0.50-2.00/タスク
Codex CLI (o3)	トークン従量課金	約 $2.00-10.00/タスク

ほとんどの開発者にとって、Copilot（$10/月）と o4-miniでの Codex（一般的な利用で $15-30/月）の組み合わせは、非常に高い価値を提供します。

結論

Codex CLIを VS Codeおよび GitHub Copilotと統合することで、強力なAI支援型開発ワークフローが実現します。Copilotが瞬間的なコーディングの提案を処理し、Codexがより大きなアーキテクチャ上のタスク、リファクタリング、テスト生成に取り組みます。重要なのは、一つのツールにすべてを強制するのではなく、それぞれのツールが優れた分野で活用することです。

画像、ビデオ、音声クローニング、AIアバターなどのAIを活用したメディア生成を必要とするアプリケーションを構築している場合、Hypereal AI はコードベースに直接統合できるシンプルなAPIエンドポイントを提供しています。Codexや Copilotのようなツールと組み合わせることで、AIを活用した機能全体を数日ではなく数分で構築することが可能です。