とほほのCodex入門

目次

Codexとは

Codex CLI

対象バージョン

本書では下記のバージョンを対象としています。

Windows : Windows 11 Home 24H2
WSL : 2.6.1
Linux : Ubuntu 24.04
Node.js : 24.11.0
npm : 11.6.1
Codex CLI : 0.46.0

Codexをインストールする

詳細は下記を参照してください。

Windows にインストールする場合は WSL2 上にインストールすることが推奨されています。まずは WSL2 と WSL2 上で動作する Ubuntu 24.04 LTS をインストールします。

wsl --list
wsl --install Ubuntu-24.04
wsl --distribution Ubuntu-24.04

Node.js と Codex CLI をインストールします。

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ sudo apt install nodejs -y
$ sudo npm install -g @openai/codex

Codexを実行する

プロジェクトフォルダを作成して Codex CLI を起動します。月額固定の ChatGPT のチャットライセンスで実行するか、従量課金の API 課金で実行するかを選択します。

$ mkdir ~/myapp
$ cd ~/myapp
$ codex

  Welcome to Codex, OpenAI's command-line coding agent

  Sign in with ChatGPT to use Codex as part of your paid plan
  or connect an API key for usage-based billing

› 1. Sign in with ChatGPT
     Usage included with Plus, Pro, and Team plans

  2. Provide your own API key
     Pay for what you use

  Press Enter to continue

サインインしたり APIキーを設定すると下記のメッセージが表示されます。Codex にどのくらいの自由度の権利を与えるか決めましょう。Codex はミスをすることがあります。ChatGPT のアカウントで実行します。といった旨のメッセージです。

  Welcome to Codex, OpenAI's command-line coding agent

✓Signed in with your ChatGPT account

  Before you start:

  Decide how much autonomy you want to grant Codex
  For more details see the Codex docs

  Codex can make mistakes
  Review the code it writes and commands it runs

  Powered by your ChatGPT account
  Uses your plan's rate limits and training data preferences

  Press Enter to continue

Enter キーを押すと下記の画面になります。Codex が確認無しでフォルダ内のファイルを作成・更新してよいか、都度許可を求めるかを聞いてきます。実プロジェクトで本格使用するまでは 1. の確認無しでよいと思います。

  Welcome to Codex, OpenAI's command-line coding agent

✓ Signed in with your ChatGPT account

> You are running Codex in /mnt/c/HomePage/myapp

  Since this folder is not version controlled, we recommend requiring approval of all edits and commands.

› 1. Allow Codex to work in this folder without asking for approval
  2. Require approval of edits and commands

  Press enter to continue

下記の画面になります。モデルは GTP-5-Codex が選択されています。ここからは Codex のコマンド実行モードとなります。

╭───────────────────────────────────────────╮
│ >_ OpenAI Codex (v0.53.0)                 │
│                                           │
│ model:     gpt-5-codex   /model to change │
│ directory: ~/myapp                        │
╰───────────────────────────────────────────╯

  To get started, describe a task or try one of these commands:

  /init - create an AGENTS.md file with instructions for Codex
  /status - show current session configuration
  /approvals - choose what Codex can do without approval
  /model - choose what model and reasoning effort to use
  /review - review any changes and find issues

› Implement {feature}

  100% context left · ? for shortcuts

Codexを終了・再起動する

/quit コマンドで終了します。

› /quit

codex コマンドで再度起動します。

$ codex

コード生成を依頼する

プロンプトに下記の様な指示を入力していきます。

› HTMLとJavaScriptとCSSで三目並べのアプリを作成してください。

下記の様な三目並べアプリを作成してくれました。二人のプレイヤーで対戦する仕様のようです。

日本語化する

Codex からは下記のメッセージが表示されています。

• Implemented a standalone三目並べ UI with accessible markup and controls in index.html:1-33, wiring nine grid
  buttons, status text, and reset action. Styled the board for responsive square cells, hover/focus feedback, and
  dark-mode support via CSS variables in styles.css:1-146. Added JavaScript state handling in script.js:1-102 to
  manage turns, detect wins/draws, highlight winning lines, lock completed games, and reset interactively.

  Manual check: open index.html in a browser, play through wins/draws, and confirm reset restores an empty board.

  Next steps:

  1. Host the page locally or deploy to share.
  2. Consider adding AI opponent or score tracking if needed.

日本語で応答してもらうようにします。

› 応答は日本語でお願いします。

日本語化してくれました。こうした指示は Codex を再起動した後も覚えているようです。

• index.html:1-33 にアクセシブルな三目並べの土台（9 マスのボタン、手番表示、リセットボタン）を実装し、styles.css:1-
  146 でレスポンシブな正方形グリッドやホバー演出、ダークモード対応を整えました。script.js:1-102 ではターン管理・勝
  敗判定・勝利ラインのハイライト・ゲーム終了後の入力制御・リセット処理を追加しています。

  動作確認の際はブラウザで index.html を開き、勝ち／引き分けパターンとリセット動作を手動で試してください。

  次の候補:

  1. ローカルでホスティングするかデプロイして共有する。
  2. 必要に応じて AI 対戦やスコア表示などの機能拡張を検討する。

コード修正を依頼する

下記の様にコードの修正を依頼します。2行のプロンプトを打ち込んでいますが、Windows+WSL2 の場合 Ctrl+Enter で改行できます。

› - AI対戦機能の実装をお願いします。Ctrl+Enter
  - コピーライトが2024年になっているので、2025年に修正してください。

下記のメッセージが表示され、アプリが更新されました。

• 変更内容

  - script.js:5-171 に AI（O）が最適手を選ぶミニマックス実装を追加し、プレイヤーの操作後に自動でAI手番へ移行するよ
    うゲームループを再構成しました。
  - script.js:20-185 で勝敗判定・メッセージ更新・手番制御を共通化し、AI思考中の入力抑止や勝利ラインのハイライト処理
    を統合しました。
  - index.html:28-30 のコピーライト表記を 2025 年に更新しました。

  動作確認

  - ブラウザで index.html を開き、X（プレイヤー）が数手打つ→AIが必ず応答することを確認。
  - プレイヤー勝利・AI勝利・引き分け各パターンでメッセージと勝利ライン表示、以降の操作が無効化されるか確認。
  - リセット後に盤面が初期化され、X 手番から再開することを確認。

  次の候補

  1. AIの思考時間を調整したり、難易度切り替えを実装する。
  2. スコアボードや連勝カウンターを追加して対戦履歴を表示する。

コメント記入を依頼する

script.js にコメントが無いのでコメントの記入を依頼します。

› script.jsにコメントを記入してください。

コメントを追記してくれました。

// 盤面の状態を解析して勝敗や引き分けを判定
const getGameResult = (board) => {
  for (const pattern of winningPatterns) {
    const [a, b, c] = pattern;
      :

コンテキストの残量

指示を行っていくとプロンプトの下部にコンテキストの残量が表示されます。

› Implement {feature}
  73% context left · ? for shortcuts

これは、このコンテキスト(≒セッション)におけるトークンの残量で、会話履歴が増えると残量が減っていきます。Codex を再起動したり、/new コマンドで 100% に戻すことができます(会話記録は削除されます)。また、/compact で会話履歴を削除するのではなく要約して残量を増やすこともできます。

/compact
/new

手動で変更した箇所のレビューを依頼する

手動で変更した箇所や、Git コミットした箇所のレビューを依頼することができます。

› /review

テトリス作成を依頼する

同様にテトリスゲームの作成も依頼してみました。

› HTML,JavaScript,CSSを用いてテトリスアプリを作成してください。

最初、物体(テトリミノ)を回転させると形状が変わってしまうバグがあったので修正してもらいました。

› 物体を回転させると、物体の形状が変わってしまいます。
  回転させても形状が変わらないようにしてください。

DBやフレームワークを用いた業務アプリの作成を依頼する

下記の様な業務アプリを作成してもらいました。

Next.jsとMariaDBを用いて、ヘッダ、左メニュー、メインパネルから構成されるアプリを作成してください。
- 左メニューはハンバーガーアイコンで開閉できるようにしてください。
- 左メニューには [ユーザー] と [プロジェクト] メニューを実装してください。
- [ユーザー] メニューは下記で実装してください。
  - ユーザー情報はMariaDBに保存してください。
  - 左メニューで [ユーザー] をクリックすると、メインパネルでユーザー一覧を表示してください。
  - メインパネルの上部に [新規作成] ボタンを置き、クリックすると新規ユーザ作成ダイアログを表示してください。
  - ユーザー一覧の各行には [更新] ボタンと [削除] ボタンを表示してください。
  - [更新] ボタンを押すとユーザー更新ダイアログを表示してください。
  - [削除] ボタンを押すと削除確認ダイアログを表示し、許可を得てから削除するようにしてください。
- [プロジェクト] メニューは左メニューのみ実装し、中身はまだ実装しないでください。

必要なパッケージやモジュールのインストール実行時には確認許可を取りながら進めてくれます。MariaDB は手作業で別に起動しました。README.md ファイルには、データベースに作成するテーブルの指示や、DB のアドレス、ユーザID、パスワードを設定する .env ファイルの設定方法などの説明が記入されるので、指示に従って設定しました。

$ cp .env.example
$ vi .env

DATABASE_URL="mysql://username:password@localhost:3306/bizapp"

$ mysql -u DB_USER -p DB_NAME < scripts/create_users_table.sql

下記で実行すると、そこそこ期待通りのものが出来上がっていました。

$ npm run dev

[編集] や [削除] を実行すると「不正なユーザーIDです。」エラーとなったので修正を依頼しました。

更新時や削除時に「不正なユーザーIDです。」エラーとなります。修正してください。

できたソースコードは下記です。

下記で実行してください。

$ unzip bizapp.zip
$ cd bizapp
$ npm install
$ npm run build
$ npm run dev

CLI コマンド

プロンプトモードでは下記のコマンドが使用できます。

終了：
  /quit       Codexを終了します。
  /exit       Codexを終了します。
  /logout     Codexからログアウトします。
状態：
  /status     現セッションの設定やトークン使用量などを表示します。
会話管理：
  /new        新しい会話を始めます(コンテキストはクリアされます)。
  /compact    これまでの会話を要約します(コンテキストは圧縮されます)
設定：
  /model      使用するモデルを変更します。
  /mcp        構成済 MCP ツールの一覧を表示します。
  /init       AI用READMEファイル(AGENTS.md)を作成します。
  /approvals  Codexの確認モード/確認不要モードを切り替えます
指示：
  /mention    Codexにこのファイルを読んでくれと指示します。
  /diff       git diff を表示します(未追跡ファイルも含めて)。
  /review     変更点をレビューして問題点を検出します。
  /undo       Gitを用いて直前の操作の取り消しを依頼します。
その他：
  /feedback   Codexのメンテナーにフィードバックを送信します。

Codex IDE版

Codex は CLI のみでなく、GitHub Copilot や Cursor のように VSCode の拡張機能としても利用できます。ただし、入力中のファイルに対してインラインでリアルタイムにコード補完したり、編集中ファイルに直接追記してくれるのではなく、あくまで、IDE のプロンプトから入力した指示を裏で CLI モードの Codex が動作しているように感じました。

VSCodeにCodex拡張機能を追加する

Codex拡張機能を開閉する

Codex拡張機能を右側に表示する

Codexとチャットする

Codexにコード生成などを依頼する

Codexにコード補完を依頼する

Copyright (C) 2025 杜甫々
https://www.tohoho-web.com/ai/codex.html