入力欄・送信ボタン・返答表示だけのシンプルな1ページを、VS Code内のOpenAI Codexに頼んで自動生成し、サーバー経由でClaude APIの最初の返答を画面に表示します。
準備、Codexへの依頼文、動作確認、つまずいたときの直し方まで、最初から最後まで一緒に進めます。
この回のゴール
- できること：最小のWebアプリで、Claudeの最初の返答を画面に表示できる。
- 用意するもの：VS Code、OpenAI Codex拡張、Node.js、AnthropicアカウントとClaude APIキー。
- 大切な約束：APIキーは.envで保護しサーバーだけが読む。モデルIDや価格は変わり得るため、Anthropicの公式ドキュメントとConsoleで都度確認する。
最初に知っておきたい用語
- Claude API：Anthropicが提供するAIへの窓口。文章を送ると返答が返ってくるサービス。
- OpenAI Codex：VS Code内でコード作成を手伝うAI。あなたの相棒で、アプリの頭脳ではない。
- .env（環境変数ファイル）：秘密をしまう金庫のメモ。アプリから読み取り、公開しない。
- サーバー：裏方の係。ブラウザの代わりにAPIへ安全に問い合わせる。
- フロントエンド：目に見える画面部分。入力や表示を担当。
- モデルID：使うAIの型番のような名前。Consoleで確認して設定する。
- CORS：他の住所のサーバーとやり取りするときの通行証ルール。
- HTTPステータス：通信の結果を示す番号。200台は成功、400台と500台は問題あり。
1. この記事でできること
この回では、VS Code内のOpenAI Codexに依頼して、入力欄・送信ボタン・返答欄だけの最小Webアプリを作ります。サーバー（Node.js）がClaude APIに安全に問い合わせ、結果を画面に表示します。
家づくりのたとえで言えば、土台ができた土地に、まずは「玄関と一部屋」を立てるイメージです。複雑な廊下や2階は、次回以降に増やします。
- Claudeの返答を1ページで表示
- Codexに具体的な依頼文を渡し、自動でコード生成
- APIキーは.envに保管し、ブラウザへ出さない
2. 完成イメージ
- 1ページのフォーム（入力欄/送信/返答表示）
- サーバーはNode.jsの簡易APIルート
- 送信→ローディング→Claudeの返答が表示
たとえば、窓口（フォーム）で質問を紙に書いて係の人（サーバー）に渡すと、係の人が図書館（Claude API）へ行って答えを持ち帰り、掲示板（返答欄）に貼り出す、そんな流れです。
3. 最初に知っておきたいこと
鍵（APIキー）は金庫（.env）に入れ、店先（ブラウザ）に置かないのが基本です。
本文では、APIキーをサーバーの環境変数として読み、画面のJavaScriptには渡しません。
また、使うClaudeのモデルIDは固定しません。AnthropicのConsoleで、現在使えるモデルをその都度確認し、設定します。仕様や料金は変わり得るため、公式ドキュメントを参照してください。
道で例えると、近道が工事中なら別の道標を見て進む必要があるのと同じです。必ず公式の道標（ドキュメントとConsole）を見てから選びましょう。
4. 対象読者
- VS Codeの基本操作ができる初心者
- 前回（#1）の環境準備を終えた人。未了なら前回記事を確認してください：中学生にも分かるAIモデル自動切り替え機能の作り方 #1
- 中学生でも理解できる表現で進行
サッカーチームで言えば、Claude APIは試合でプレーする選手、Codexは練習メニューを作ってくれるコーチのような役割です。混同しないように進めます。
5. 必要なものと入れ方
VS Code
- これは何？：作業机のようなアプリ。ファイルを並べて編集できます。
- 用意するもの：インターネット接続、WindowsまたはmacOSのPC。
- 入れ方・開き方：公式サイトを開き、ダウンロードしてインストール。アプリを起動。
- 最初の設定：日本語UIやテーマを好みで変更。作業用の空のフォルダを1つ作成し、VS Codeで開く。
- できたか確認：「エクスプローラー」にフォルダ名が表示され、編集エリアが開ければOK。
OpenAI Codex（VS Code拡張）
- これは何？：あなたの依頼文からコードを提案・生成する頼れるコーチ。
- 用意するもの：ブラウザ、OpenAIのアカウント（ChatGPTアカウントまたはOpenAI APIキーでサインイン）。
- 入れ方・開き方：VS Code左の「拡張機能」を開き、検索欄に「Codex」と入力。OpenAIのCodex拡張を選び、「インストール」を押す。完了後、「有効化」を確認。
- 最初の設定：拡張の案内に従いサインイン。VS Code右側または下部に「Codex」のチャットパネルを開く。
- できたか確認：「Codex」と書かれたチャット欄にメッセージ入力ボックスが見え、「新しいチャット」などのボタンが表示されていればOK。
Anthropic Console（Claude）
- これは何？：Claudeを管理する会員ページ。APIキー発行やモデル確認ができます。
- 用意するもの：Anthropicのアカウント、支払い設定（必要に応じて）。
- 入れ方・開き方：ブラウザでConsoleにサインインし、APIキーの発行ページを開く。
- 最初の設定：新しいAPIキーを作成し、すぐに安全なメモに控える。画面を閉じると後から同じ値は見られないことがあります。
- できたか確認：ダッシュボードに「API Keys」などの項目が表示され、必要に応じてモデル一覧への導線が見える。
モデルや価格は変わり得ます。最新の情報は公式ドキュメントを確認してください：Intro to Claude ／ Pricing。
Node.js
- これは何？：パソコンでサーバーを動かすためのエンジン。キッチンのコンロのような存在です。
- 用意するもの：公式サイトからインストーラーを入手できる権限。
- 入れ方・開き方：公式サイトからLTS版をダウンロードし、案内に従ってインストール。
- 最初の設定：VS Codeで作業フォルダを開いておく。以降の操作はCodexに任せるため、手入力のコマンドは行いません。
- できたか確認：インストール後、Codexに「Node.jsのバージョン確認をして」と頼むと、手元環境の確認手順を提案してくれます。
6. エージェントと作るものの全体像
今回作る最小アプリは、次の3点セットです。
・フロント（HTML/JS）…入力と表示。
・サーバー（Node.js/Express）…Claude APIへ安全に問い合わせ。
・設定（.env）…APIキーやモデルIDなどの秘密を保管。
流れは「.env → サーバー → Claude API → 返答 → ブラウザ」。
宅配のたとえなら、.envは住所録の金庫、サーバーは配達員、Claude APIは倉庫、ブラウザは受け取り口です。
7. 手順1: ツールを準備する
目的と全体の流れ
VS CodeにCodex拡張を入れ、チャットを開ける状態にします。Node.jsが使える前提を確認します。
画面での操作
- VS Code左の「拡張機能」を開き、「Codex」を検索。OpenAIのCodex拡張を「インストール」。
- 拡張のガイドに従ってサインイン。右側にCodexチャットを表示。
- 作業フォルダをVS Codeで開いておく。
成功の見分け方
- 「Codex」パネルにテキスト入力欄が見える。
- 作業フォルダ名がエクスプローラーに表示されている。
つまずいたら
拡張が見つからない、サインインできない場合は、インターネット接続とアカウント状態を確認してください。Codexに「拡張が見えない」と相談すると、確認手順を提案してくれます。
8. 手順2: APIキーを安全に用意する
目的
APIキーを.envに保存し、サーバーだけが読み取る形にします。ブラウザへは絶対に出しません。
なぜ必要か
財布（APIキー）を机の上（ブラウザ）に放置すると盗難リスクがあります。鍵付き引き出し（.env）にしまい、必要なときだけサーバーが取り出します。
画面での操作
- Anthropic ConsoleでAPIキーを作成し、値を安全なメモに控える。
- この値は、のちほどCodexに渡す依頼の指示に従って、.envファイルへ保存されるように、Codexに実装してもらいます。あなたは実値をチャットに貼らないでください。
成功の見分け方
- プロジェクトに.envが作られ、.gitignoreで除外されている。
- サーバーのコードが環境変数からキーを読み、フロントには出していない。
つまずいたら
ブラウザの開発者ツール「ネットワーク」タブで、通信内容にAPIキーが見えないかを確認します。見えた場合は、直ちに送信を止め、Codexに「キーがレスポンスに含まれている。隠す方法を教えて」と相談してください。
9. 手順3: エージェントにアプリを作ってもらう
目的
Codexに、フロント・サーバー・API呼び出しを最小構成で作ってもらいます。
画面での操作
VS CodeのCodexチャットを開き、次のボックスを丸ごとコピーして送ります。
Codexに送るプロンプト
目的：最小のWebアプリで、入力欄・送信ボタン・返答表示だけを持ち、サーバー経由でClaude APIへ安全にリクエストし、最初の返答を画面に表示したい。今回は第2回で、前回の準備を壊さないこと。
要件：
- 技術スタックはHTML/JavaScript(フロント)＋Node.js/Express(サーバー)。依存は最小限。CORS許可、JSON入出力、基本のエラーハンドリングを入れる。
- サーバー側のみでAnthropicのAPIキーを扱う。ブラウザへキーやエラー詳細、環境変数の値を出さない。
- .envにAPIキーを保存し、dotenvで読み込む。必ず.gitignoreに.envを追加。
- モデルIDは固定しない。server側にモデルIDの設定変数を用意し、コメントで「Anthropic Consoleで現在使えるモデルを確認して設定してください」と明記。
- 1つのAPIルート POST /api/ask を用意し、{prompt:string}を受け取り、Claudeの返答テキストのみを返す。
- フロントは index.html と連携する script で、入力→送信→ローディング表示→返答表示を実装。ネットワークエラー時は簡潔なメッセージを表示。
- セキュリティ：サーバーのログにAPIキーを出さない。CORSはローカル開発用の最小設定にする。
- npm scriptsでサーバー起動コマンドを用意。READMEに起動と確認手順を書く。
ファイル：
- package.json（必要な依存とscripts）
- server.js（Express、/api/ask、dotenv、エラー処理、モデルIDの変数とコメント）
- public/index.html（入力フォーム、送信ボタン、返答エリア、最低限のスタイル）
- public/main.js（fetchでPOST、ローディング、結果/エラー表示）
- .env.example（CLAUDE_API_KEY= の空欄と説明）
- .gitignore（.env を含む）
- README.md（セットアップ、.envの作り方、Anthropic ConsoleでモデルIDを確認してserver.jsに設定の手順、動作確認方法、トラブル時に確認する場所）
動作確認：
- サーバーを起動し、http://localhost:PORT/ をブラウザで開く。
- テキストを入力し送信。返答が表示されること。
- ブラウザの開発者ツールのNetworkで、APIキーが通信に含まれていないことを確認できる説明をREADMEに入れる。
禁止と注意：
- APIキーの実値はハードコードしない。READMEやHTMLにも書かない。
- ブラウザから直接Anthropic APIへ送らない。必ずサーバー経由にする。
不明点があれば、作業前に質問してから進めてください。日本語のREADMEを作成してください。Codexが作るものと確認点
- サーバーとフロントの最小構成一式が生成される。
- .env.exampleと.gitignoreが含まれる。
- server.jsのモデルIDは変数化され、Consoleで確認する旨のコメントが入る。
10. 手順4: 動かして確認する
目的
ローカルでアプリを起動し、Claudeの返答が画面に表示されることを確かめます。
画面での操作
- Codexの指示に従い、READMEに書かれた手順でサーバーを起動。
- ブラウザで案内されたアドレス（例：ローカルホストのポート）を開く。
- 入力欄に質問を書き、送信ボタンを押す。ローディング表示の後、返答が出る。
成功の見分け方
- 返答欄にClaudeのテキストが表示される。
- 開発者ツールのNetworkタブで、/api/ask へのリクエストとレスポンスにAPIキーが含まれていない。
つまずいたら
画面に「エラー」表示が出たら、READMEのトラブルシュートを開き、Codexに「この症状が出ています。どう直す？」とスクリーンショットの状況を伝えて相談します。
11. 手順5: エージェントと直す
目的
タイムアウト、入力チェック、UI微修正をCodexに依頼して改善します。
依頼の例
- タイムアウトをサーバー側に追加し、失敗時は簡潔な理由を返す。
- 空の入力を送れないようにバリデーション。
- 返答の段落整形や読みやすいスタイル。
例えるなら、できあがったカレーの味見をして、塩をひとつまみ足す調整です。完成の骨格は同じで、使い心地を良くします。
12. よくあるエラー
401/403（認証・権限エラー）
- 画面で見えること：送信直後にエラー表示。Networkのレスポンスに401または403。
- よくある原因：APIキー不正、権限不足、キーが読み込まれていない。
- 最初に確認：.envのキー名とserver.jsの読み取り、.gitignoreで漏れていないか、Anthropic Consoleのキー状態。
- Codexへの質問：「/api/askで401/403。サーバーはdotenvでキーを読む実装。どこをログで確認し、何を修正すべき？」
429（レート制限）
- 画面で見えること：しばらくしてエラー。レスポンスに429。
- よくある原因：送信が多すぎる、アカウントの上限。
- 最初に確認：Consoleの利用状況、リトライ間隔、READMEの注意。
- Codexへの質問：「429が出た。待機と再試行の方針をサーバー側に実装して。無制限リトライはしないで」
CORSエラー
- 画面で見えること：ブラウザのコンソールにCORS関連の赤いエラー。
- よくある原因：サーバーのCORS設定不足。
- 最初に確認：server.jsのCORSミドルウェア設定。
- Codexへの質問：「ローカル開発用に最小のCORS設定を見直して。具体的にどこを変更？」
.envの読み込み失敗
- 画面で見えること：サーバーが起動するがAPIで失敗。
- よくある原因：dotenv未設定、ファイル名の打ち間違い、配置場所の誤り。
- 最初に確認：プロジェクト直下に.envがあるか、dotenv.config()が早い段階で呼ばれているか。
- Codexへの質問：「dotenvの読み込み順を点検して。env未設定時は起動時に警告を出して」
モデルID不一致
- 画面で見えること：APIから400系エラー。メッセージに未知のモデルなど。
- よくある原因：廃止・未提供のモデルID。
- 最初に確認：Anthropicの公式ドキュメントとConsoleで現在使えるモデルを確認し、server.jsの設定変数を更新。
- Codexへの質問：「モデルIDを外部設定にし、READMEに更新手順を追記して」
13. 次に試すこと
- 返答のストリーミング表示。
- システムプロンプトの導入で口調や役割を調整。
- 簡単なモデル切替UI（Auto/速さ重視/品質重視）。モデルIDはConsoleで都度確認。
郵便のたとえなら、今は普通郵便で1通をやり取りした段階。次回は配達方法を選べるようにしていきます。
14. まとめ
最小構成のWebアプリでも、サーバー経由ならClaude APIを安全に呼び出せます。Codexへ要件を具体的に伝えるほど、開発は速く確実になります。
シリーズは続きます。今回の基礎が、後の自動切り替え機能の土台になります。
