初心者向けCodex CLI入門：WindowsでTODOアプリを作り、動作確認まで進める

はじめに

Codexを初めて使うときは、「コードを書いて」と頼む前に、完成をどう確認するか決めておくと進めやすくなります。

この記事では、Windows上のCodex CLIを使い、タスクを追加・完了・削除できるTODOアプリを作ります。成果物はindex.htmlの1ファイルです。フレームワークや開発サーバーを用意せず、指示を出す→ファイルを開く→機能を確認する→修正を依頼する流れを学びます。

対象はCLIの操作が初めての方です。デスクトップアプリやエディター拡張の操作とは異なります。画像は説明用のイラストで、実際の操作画面ではありません。

環境と、確認する4つの段階

2026年10月8日に確認した環境は以下のとおりです。同じバージョンを固定してインストールする必要はありません。

項目	確認した環境
OS	Windows 10、ビルド19045
シェル	PowerShell 7.6.6
Node.js	v24.21.0
npm	11.19.0
Codex CLI	0.160.1
作成するもの	外部ライブラリを使わないindex.html

作業中は、次の4段階を分けて考えます。

段階	確認すること	まだ分からないこと
インストール	バージョンを表示できる	モデルへ接続できるか
接続	簡単な依頼に返答がある	ファイルを書き込めるか
生成	指定の場所にファイルがある	アプリの機能が正しいか
動作確認	追加・完了・削除・保存を確認できる	別のブラウザーでも同じように動くか

1. Codex CLIをインストールする

今回はnpmを使います。Node.jsのダウンロードページでLTS版のWindows用インストーラー（.msi）を選びます。x64かARM64かはWindowsの「設定→システム→バージョン情報」で確認してください。

インストール後は古いターミナルを閉じ、スタートメニューからPowerShellを開き直します。以下を1行ずつ実行します。

node --version
npm.cmd --version

両方のバージョンが表示されたら、続けてインストールします。

npm.cmd install -g @openai/codex@latest

処理が終わって入力できる状態に戻ったら、確認します。

codex.cmd --version

codex-cliとバージョン番号が表示されれば、この段階は完了です。ここでは.ps1の実行ポリシーによるエラーを避けるため、npm.cmdとcodex.cmdを使っています。コードをコピーするときにPS C:\...>のようなプロンプトは含めません。

2. モデルへの接続を準備する

公式アカウントを使う場合は、起動後の案内に従ってログインします。利用できる機能や上限はアカウントの契約によって異なります。すでに接続できている場合は、この節を飛ばしてください。

以下は、第三者のAPIサービスに接続するための設定例です。ここではCrazyrouterのCodex連携ガイドを参照します。providerはリクエストの送信先を指定する設定です。

APIキー、残高、利用できるモデルをサービス側で確認してから進めます。ChatGPTのサブスクリプションと第三者APIの利用料金は別です。

2-1. APIキーを環境変数に保存する

PowerShellで次の1行を実行します。

$codexSecureKey = Read-Host 'Crazyrouter API Keyを貼り付けてEnterを押してください' -AsSecureString

入力を求められたらキーを貼り付け、Enterを押します。キーの文字が表示されないのは正常です。PowerShellのプロンプトに戻ったら、次のブロックを実行します。

$codexKeyPtr = [Runtime.InteropServices.Marshal]::SecureStringToBSTR($codexSecureKey)
try {
    $codexPlainKey = [Runtime.InteropServices.Marshal]::PtrToStringBSTR($codexKeyPtr).Trim()
    if ([string]::IsNullOrWhiteSpace($codexPlainKey)) { throw 'API Keyが入力されていません' }
    [Environment]::SetEnvironmentVariable('CRAZYROUTER_API_KEY', $codexPlainKey, 'User')
    $env:CRAZYROUTER_API_KEY = $codexPlainKey
} finally {
    [Runtime.InteropServices.Marshal]::ZeroFreeBSTR($codexKeyPtr)
    $codexPlainKey = $null
    $codexSecureKey.Dispose()
}

現在のWindowsユーザーに保存し、今開いているPowerShellにも反映します。環境変数は暗号化された保管庫ではないため、共有アカウントには保存しないでください。キーを記事、スクリーンショット、Git管理対象のファイルに含めることも避けます。

2-2. 接続設定を記入する

以下は設定ファイルをメモ帳で開くコードです。既存のファイルがある場合は先にバックアップします。

$codexConfigDir = if ($env:CODEX_HOME) { $env:CODEX_HOME } else { Join-Path $env:USERPROFILE '.codex' }
New-Item -ItemType Directory -Path $codexConfigDir -Force | Out-Null
$codexConfigFile = Join-Path $codexConfigDir 'config.toml'
if (Test-Path -LiteralPath $codexConfigFile) {
    Copy-Item -LiteralPath $codexConfigFile -Destination ($codexConfigFile + '.bak.' + (Get-Date -Format 'yyyyMMdd-HHmmss'))
}
notepad.exe $codexConfigFile

新規作成を求められたら作成します。空のファイルに限り、次の内容をメモ帳へ貼り付けます。PowerShellには貼り付けません。

model = "gpt-5.6-sol"
model_provider = "crazyrouter"

[model_providers.crazyrouter]
name = "Crazyrouter"
base_url = "https://api.crazyrouter.com/v1"
env_key = "CRAZYROUTER_API_KEY"
wire_api = "responses"

モデルIDは確認日の連携ガイドにある例です。実際にはアカウントの利用権限と、Codexで必要なResponses APIへの対応を確認してください。

設定	入れるもの
model	サービスで利用できる正確なモデルID
base_url	APIのベースURL。自分で/responsesを追加しない
env_key	キー自体ではなく、環境変数名CRAZYROUTER_API_KEY
wire_api	この例ではresponses

既存の設定がある場合は全文を上書きせず、同名の項目を修正します。modelとmodel_providerは最初の[...]より前に置き、キーやセクションを重複させません。

Ctrl + Sで保存し、エクスプローラーで拡張子を表示してconfig.toml.txtになっていないことも確認します。

3. 作業フォルダーを決めてから起動する

今回は専用のフォルダーを使います。以下をPowerShellで実行してください。

$codexProject = Join-Path $env:USERPROFILE 'CodexProjects\qiita-todo'
New-Item -ItemType Directory -Path $codexProject -Force | Out-Null
Set-Location -LiteralPath $codexProject
Get-Location

末尾がCodexProjects\qiita-todoになっていることを確認します。すでに重要なファイルがある場合は別名に変更し、起動します。

codex.cmd --sandbox workspace-write --ask-for-approval on-request

初回はフォルダーの信頼やWindowsサンドボックスの設定を求められる場合があります。表示されたパスを確認して進めます。実行許可を求められたら、対象のファイルやコマンドが今回の作業に必要か確認してください。

Codexの入力欄に次の文章を送ります。

「接続できました」とだけ返信してください。
ファイルの読み書きやコマンドの実行はしないでください。

返信があれば接続の確認は完了です。認証エラーなどが出たら、後述の表で原因を切り分けてから進めます。

4. 完成条件を含めて生成を依頼する

同じCodexの入力欄に、次の依頼を送ります。

現在のフォルダーに index.html を実際に作成してください。
日本語のシンプルなTODOアプリを作ります。

完成条件：
1. 入力欄と「追加」ボタンがあり、Enterでも追加できる。
2. 空白だけのタスクは追加しない。
3. タスクごとに完了状態を切り替え、個別に削除できる。
4. 未完了の件数を表示する。
5. localStorageに保存し、再読み込み後に内容と完了状態を復元する。
6. 保存できない場合は、現在の画面だけで有効であることを表示する。

制約：
- HTML、CSS、JavaScriptを1ファイルにまとめる。
- 外部ライブラリ、画像、フォント、CDNを使わず、パッケージをインストールしない。
- 今回変更してよいのは index.html だけ。
- タスク名はHTMLとして解釈せず、通常の文字列として表示する。
- スマートフォンの幅でも操作できるレイアウトにする。

完了したらファイルの場所、開き方、確認手順を説明してください。
書き込めない場合は、その理由を伝えてください。

この依頼で大切なのは、「アプリを作る」という目的に加えて、何を変更してよいか、何ができれば完了かを指定している点です。見た目の細かい調整は、基本機能を確認してから追加します。

5. ファイルとブラウザーで結果を確認する

処理が終わったら画面の案内に従ってCodexを終了します。Ctrl + Cで終了確認が表示された場合は、その案内に従ってください。

PowerShellのプロンプトに戻ったら実行します。

Set-Location -LiteralPath (Join-Path $env:USERPROFILE 'CodexProjects\qiita-todo')
Test-Path .\index.html

Trueならファイルが存在します。続けて開きます。

Start-Process .\index.html

エディターが開いた場合は、エクスプローラーで右クリックし、「プログラムから開く」でEdgeやChromeを選びます。

テスト	確認したい結果
「本を読む」を追加	1件だけ増える
別の内容を入力してEnter	追加後に入力欄が空になる
スペースだけで追加	空のタスクが作られない
完了にしてから未完了へ戻す	件数と表示が一致する
1件削除	他のタスクが残る
追加・完了の操作後に再読み込み	保存可能な環境で内容と状態が復元される
<b>テスト</b>を入力	太字にはならず、記号を含む文字列が表示される

localStorageの保存先はそのブラウザーです。クラウド同期やバックアップではありません。ブラウザーのデータ削除、別ブラウザーの使用、ファイルの移動で状態が変わることがあります。また、file://で直接開く場合の保存動作はブラウザーによって異なるため、再読み込みまで確認してください。

6. 修正依頼は「操作・実際の結果・期待する結果」で書く

たとえば、再読み込み後にタスクが消えた場合は、同じフォルダーでCodexを再起動して次のように伝えます。

Edgeで index.html を直接開き、「本を読む」を追加しました。
追加直後は表示されますが、再読み込みすると消えます。
期待する結果は、内容と完了状態が復元されることです。

index.htmlを読み、保存・復元の処理と保存失敗時の表示を確認してください。
原因を説明してから修正し、追加・完了・削除の機能は維持してください。

「動きません」だけよりも、調べる対象が明確になります。エラーメッセージがあれば文字で添えます。修正後は失敗していた項目に加えて、追加や削除も再確認してください。

次回は同じフォルダーでcodex.cmd resumeを実行すると、以前の会話を選んで続けられます。大きく変更する前には、PowerShellでコピーを残しておくと比較できます。

Copy-Item .\index.html ('.\index.backup-' + (Get-Date -Format 'yyyyMMdd-HHmmss') + '.html')

エラーが出たときの切り分け

現象	最初に確認すること
nodeやnpmが見つからない	Node.jsのインストール、PATH、ターミナルを開き直したか
npm.ps1を読み込めない	.cmdの入口を使う。先に実行ポリシー全体を緩めない
codex.cmdが見つからない	npmのインストール結果とnpm.cmd prefix -gで表示される場所
環境変数がない	[bool]$env:CRAZYROUTER_API_KEYとenv_keyの名前を照合
401／403	キーの有効性、送信先、アカウントやモデルの権限。詳細はレスポンスを読む
404／モデルが見つからない	モデルID、ベースURL、Responses APIへの対応
429	利用上限やレート制限。連続再試行せず管理画面とエラー本文を確認
TOMLの解析エラー	引用符、重複キー、セクションの位置、ファイルの拡張子
回答はあるのにファイルがない	作業フォルダー、書き込み権限、実際に作成したか

環境変数の確認がTrueでも、キーが正しいとは限りません。新しいウィンドウに変数が反映されない場合はWindows Terminalを完全に閉じてから開き直します。

まとめ

最初の課題を1ファイルに絞ると、Codexへの指示と成果物の関係を確認しやすくなります。バージョン表示、モデルの返信、ファイルの存在、ブラウザーでの動作を順に確認し、どの段階で止まったかを特定してください。

次は「未完了だけを表示する」など、1つの機能を追加してみるとよいでしょう。追加のたびに元の機能も確認する習慣は、別のアプリを作るときにも役立ちます。

参考リンク

• Codex CLI公式ドキュメント
• Codex設定リファレンス

料金やモデルの利用条件は各サービスの最新情報を参照してください。a