70
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

OpenAI Codex CLI の使い方!ChatGPTサブスクで使えるAIコーディング入門

Last updated at Posted at 2025-09-09

こんにちは、とまだです。

ChatGPTのサブスクリプション(Plus/Pro)を契約しているけど、チャット機能しか使ってないという方も多いのではないでしょうか?

そのサブスクで 追加料金なしで使えるAIコーディングツール「Codex」 はご存知でしょうか。

最近は AI でのコーディングといえば カーソルやClaude Codeが主流になりつつありますが、Googleトレンドを見るとCodexも特に日本で人気を集めています。

今回は、Codexの基本的な使い方から実際にWebサイトを作るまでを解説します。

忙しい人のために要約

  • ChatGPT Plus/Proユーザーなら 追加費用なし でCodexが使える
  • IDE版とCLI版の2種類があり、用途で使い分け可能
  • 環境構築は5分、Webサイト作成は30分で完成
  • トークン制限は5時間ごとにリセットされる仕組み

動画版ではもっと詳しく、よく使う設定やコマンドまで解説してます!

Codexとは?

image.png

OpenAIが提供するAIコーディングエージェント「Codex」は、ChatGPTの技術を活用した開発支援ツールです。

CursorやClaude Codeと同じように、自然言語で指示を出すだけでコードを生成してくれます。

2つの使い方を理解しよう

Codexには大きく分けて2つの使い方があります。

IDE版(VS Code拡張機能)

普段使っているVS Codeから直接使える方法です。
サイドパネルにCodexが常駐し、エディタから離れることなくAIと対話できます。

対応エディタ:

  • VS Code
  • VS Code Insiders
  • Cursor
  • Windsurf

CLI版(ターミナル)

ターミナルからcodexコマンドで起動する方法です。
より柔軟な操作が可能で、プロジェクト全体を把握しながら開発を進められます。

Claude Codeを使ったことがある方なら、すぐに馴染めるはずです。

どちらから始めるか迷ったら、まずはIDE版から試してみることをおすすめします。
慣れてきたら、より高度な操作ができるCLI版にチャレンジしてみましょう。

5分で完了!環境構築ガイド

ChatGPTサブスクリプションの準備

まず、ChatGPTでPlusまたはProプランに登録します。
月額$20〜で、Codexだけでなく最新のGPT-5も使い放題になります。

image.png

ちなみに私は20ドルの Plus プランを使ってCodexを普段は使っていますが、これだけでも十分コーディングはできます。

IDE版のセットアップ

VS Codeを開いて、拡張機能マーケットプレイスで「Codex」を検索します。

image.png

OpenAI公式の青いバッジが付いているものをインストールしてください。

image.png

インストール後の流れ:

  1. サイドバーのCodexアイコンをクリック
  2. 「Sign in with ChatGPT」でログイン
  3. 認証完了で準備OK

CLI版のセットアップ

Node.jsがインストールされていることを確認してから、以下のコマンドを実行します。

# Node.jsの確認
node -v
npm -v

# Codexをインストール
npm install -g @openai/codex

# 起動
codex

初回起動時にChatGPTアカウントでの認証が必要になります。

実践!3分でウェブサイトを作ってみよう

実際にCodexを使って、モダンなWebサイトを作成してみましょう。

IDE版で作る場合

新しいフォルダを作成してVS Codeで開きます。
Codexパネルを開いて、以下のような指示を入力してみてください。

モダンなUIのウェブサイトを作成してください
HTML、CSS、JavaScriptも使って動きのあるサイトにしてください

image.png

数分で、グラデーション背景やスムーズなアニメーション付きのウェブサイトが完成します。

image.png

CLI版で作る場合

プロジェクトフォルダで以下のコマンドを実行しましょう。

# プロジェクトフォルダで起動
codex

image.png

# プロジェクトを理解させる(AGENTS.mdを作成)
/init

# ランディングページを作成(プロンプト送信)
Codexのランディングページを作成してください。モダンなUIで動きのあるページにしてください

CLI版では、ファイルの生成過程が詳細に表示されるので、何が起きているかを理解しやすいです。

知っておきたい!重要な機能・コマンド

IDE版とCLI版でそれぞれできることは異なりますが、基本的にどちらでも便利な機能がありますので一部ご紹介しておきます。

IDE版の必須機能

機能 説明
モード切り替え Agent/Chat/Full Accessから選択
新規チャット 鉛筆アイコンで新しい会話を開始
コンテキスト追加 +ボタンでファイルを会話に含める

CLI版の必須コマンド

コマンド 機能
/init プロジェクトを理解させる(AGENTS.md生成)
/model AIの賢さレベルを調整
/compact 会話を要約してトークン節約
/new 新しい会話を開始
/status 使用状況を確認

他にもありますが、よく使うものでいうとこの辺りですね。

具体的な使い方は動画版で詳しく解説しています。

テクニック:AGENTS.mdでプロジェクトを理解させる

AGENTS.mdは、Codexにプロジェクトの情報を伝える指示書です。

Claude Codeにおける、CLAUDE.mdファイルに相当するものです。

image.png

このファイルを作成しておくと、Codexがプロジェクトの文脈を理解して、より適切なコードを生成してくれます。

よくあるトラブルと解決法

トークンの上限に達してしまった

/compactコマンドで会話を要約するか、5時間待ってリセットされるのを待ちます。
効率的に使うコツは、定期的に会話を整理することです。

例:

image.png

Windows環境でインストールできない

Node.jsの最新版をインストールし、管理者権限でコマンドプロンプトを実行してください。
それでも解決しない場合は、npmのキャッシュをクリアしてみましょう。

使用制限を理解して効率的に活用

Codexには以下の制限があります。

  • 5時間ごとにリセットされる仕組み
  • 一度に処理できるトークン数に上限あり
  • 同時実行できるタスク数に制限

以下のコマンドを使ってトークン節約をしておきましょう。

  • 定期的に/compactを実行
  • 新しいタスクは/newで開始
  • モデルレベルを適切に調整(/model

これらを意識することで、制限内で最大限の成果を出せます。

📺 Codex の使い方をもっと学びたい方へ

本記事では基本的な使い方を解説しましたが、Codex にはまだまだ多くの機能があります。

特にコマンドの使い方など、知っておくべき知識が多いので動画版もおすすめです!

動画で学べる内容:

  • 実際の操作画面を見ながらの環境構築
  • エラーが出たときの具体的な対処法
  • IDE版とCLI版の使い分けのコツ
  • AGENTS.mdの高度な活用方法
  • トークンを節約するテクニック
  • 実際にウェブサイトとランディングページを作る様子

チャンネル登録もお忘れなく!最新のAI開発ツールの情報を定期的にお届けしています。

また、参考になりましたら高評価で応援をよろしくお願い致します!

70
47
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?