中学生にも分かるAIモデル自動切り替え機能の作り方 #6

終わるころには、UIはそのままに内部へ安全ガードを追加し、Anthropic Consoleで利用量を確認できる状態になります。

準備から確認、トラブル対応まで、VS Code内のOpenAI Codexへのプロンプトだけで進めます。

この回のゴール

できること：料金上限・タイムアウト・ログ・環境変数を最小実装し、公開前チェックを完了する。
用意するもの：VS Code、OpenAI Codex拡張、Anthropicアカウント、Claude APIキー。
大切な約束：APIキーは.envなどサーバー側だけで保管し、コードや画面に出さない。料金やモデル仕様は変わるため、必ず公式ドキュメントとAnthropic Consoleで最新を確認する。

最初に知っておきたい用語

環境変数：アプリが起動時に読む「設定メモ」。金庫に鍵を入れるイメージで、コードに直接書かない。
タイムアウト：待ち時間の上限。砂時計の砂が落ちきったら処理を止めるルール。
ログ：あとで原因を探せるように残す動作の記録。日記のように時系列で並ぶ。
料金上限：使いすぎを防ぐための予算封筒。一定を超えたら送信を止める。
Anthropic Console：利用量やAPIキー管理を行う公式の管理画面。
モデル自動切り替え：応答しない・一時障害の時だけ予備モデルへ1回だけ切り替える仕組み。
OpenAI Codex：VS Code内でコード作成を手伝うAIコーディングエージェント。
Claude API：アプリの頭脳となる対話モデル群を提供するAPI。

1. この記事でできること

今回は、既に作ったモデル自動切り替えアプリに「料金上限・タイムアウト・ログ・モデル設定見直し」を加え、公開前チェックリストとして整えます。
家づくりでたとえると、土台と部屋はできていて、今日は「ブレーカー（上限）」「砂時計付きの自動ドア（タイムアウト）」「防犯カメラ（ログ）」「部屋案内の札（モデル設定表）」を取り付ける回です。

最小構成で料金上限・利用監視・タイムアウト・ログを追加
VS CodeでCodexに依頼し、手入力はプロンプトだけ
公開前チェックリストとして使える形で記録

2. 完成イメージ

モデル自動切り替えアプリに料金上限やタイムアウトとログを組み込んだ完成イメージ — Photo by Jakub Żerdzicki on Unsplash

画面UIは「Auto／速さ重視／品質重視」のまま。内部に料金上限・タイムアウト・ログを実装。
APIキーや閾値は環境変数で安全に管理。.envは公開・コミットしない。
Anthropic Consoleで利用量と料金の目視確認ができる。

イメージとしては、自動販売機の中に「売上メーター（料金）」「温度センサー（タイムアウト）」「点検記録（ログ）」を入れて、外からの見た目は同じでも、安全に動くようにする感じです。

3. 最初に知っておきたいこと

用語は身近に置き換えると覚えやすいです。
環境変数＝金庫、タイムアウト＝砂時計、ログ＝日記、上限＝おこづかいの封筒。どれも「暴走や誤請求を防ぎ、原因を調べやすくして、公開前の信頼性を上げる」ために必要です。
料金やモデルの仕様は変動するため、数値は必ず公式の最新情報を確認して決めます。

4. 対象読者

claude apiの初心者が公開前に確認する対象読者のイメージ — Photo by Christopher Gower on Unsplash

Claude APIの小規模アプリを人に見せる直前の初心者。
シリーズ第5回までを完了した人。途中からの場合は、前回の手順をこちらで確認してください：中学生にも分かるAIモデル自動切り替え機能の作り方 #5

5. 必要なものと入れ方

VS Code

これは何？：作品づくりの作業机。ファイルを並べたり、AIの助け（Codex）を呼べます。
用意するもの：インターネット接続、WindowsまたはmacOSのPC、メールで受け取れるアカウント。
入れ方・開き方：
1) 公式サイトを開く。
2) 自分のOSのダウンロードボタンを押す。
3) ダウンロードしたインストーラーを開き、案内に沿って進める。
4) インストール後、アプリ「Visual Studio Code」を開く。
最初の設定：日本語表示やテーマは任意。今回は既定のままでOK。
できたか確認：「Visual Studio Code」というタイトルと左側にアイコンの縦並び（アクティビティバー）が見えたら成功。

OpenAI Codex 拡張

これは何？：作業机で一緒に組み立ててくれる頼れる相棒。指示文（プロンプト）を渡すとコードを作ってくれます。
用意するもの：OpenAIのアカウント、またはAPIキー。どちらかでVS Codeの拡張にサインインします。
入れ方・開き方：
1) VS Code左の四つの四角のアイコン「拡張機能」を押す。
2) 検索欄に「Codex」と入れる。
3) OpenAIのCodex拡張を選び「インストール」。
4) インストール後、拡張のページにある「サインイン」または「接続」を押す。
5) 右や下に現れるCodexのチャット欄を開く（「Codex」や吹き出しアイコン）。
最初の設定：指示文の言語を日本語で使えるか確認。必要なら既定モデルや権限を選ぶ（詳しくは公式の案内へ）。
できたか確認：「こんにちは」と送って返事が来れば準備完了。

Codexはアプリを作る道具、Claude APIは完成アプリの頭脳。役割を混ぜないのがコツです。

Anthropic Console と Claude API

これは何？：利用量やAPIキーを管理する公式の管理画面と、AIの本体です。
用意するもの：Anthropicアカウント、支払い方法の登録、Claude APIキー。
入れ方・開き方：
1) 公式案内「Intro to Claude」を開き、アカウント作成やAPIアクセスの流れを確認。
2) Consoleを開き、APIキーを発行する画面を見つける。
3) 料金表のドキュメント「Pricing」を開いて最新の価格体系を確認。
最初の設定：プロジェクトを選び、APIキーを作成して安全に保管（この時点では値をどこにも貼らない）。
できたか確認：Consoleでキーの一覧や利用量ダッシュボードが見える。

Node.js（今回の実行環境）

これは何？：サーバー役を家に例えると「台所のコンロ」。アプリの裏側を動かします。
用意するもの：PC、インターネット。
入れ方・開き方：
1) 公式サイトからLTS版をダウンロード。
2) インストーラーの案内に沿って入れる。
3) VS Codeでプロジェクトフォルダを開く。
最初の設定：今回はCodexに依頼して必要な設定ファイルを用意してもらいます。
できたか確認：VS Codeのエクスプローラーにプロジェクト一式が見えればOK。

6. エージェントと作るものの全体像

UIやサーバーと料金ガードやログの構成図のイメージ — Photo by Hanna Morris on Unsplash

今回の完成像は次の通りです。

UI：これまで通り「Auto／速さ重視／品質重視」。
サーバー：Claude APIへ送る役。環境変数からキーや閾値を読む。
料金ガード：月次・セッションなどの簡易上限をチェックして送信前に止める。
ログ：時刻・選択肢・使用モデル・処理時間・疑似エラー種別を記録（キーは記録しない）。
モデル設定表：選択肢→候補モデル・最大トークン・温度の対応。変更はサーバー側だけで完結。

比喩で言えば、遊園地の入場ゲートに「人数カウンター（料金）」「監視カメラ（ログ）」「混雑時の片側通行（タイムアウトと1回だけの切替）」を置くイメージです。

7. 手順1: ツールを準備する

目的と操作

VS CodeとCodexを使える状態にし、前回までのテスト用プロジェクトを開きます。

画面操作

VS Codeを起動し、左上の「ファイル」→「フォルダーを開く」で前回のプロジェクトを選ぶ。
左の拡張機能アイコンから「Codex」を検索し、OpenAI Codex拡張にサインイン。
右または下部のCodexチャット欄を開く。

成功の見分け方

エクスプローラーに前回のファイルが見える。
Codexにメッセージを送れて返信が来る。

8. 手順2: APIキーを安全に用意する

目的

APIキーや上限値を環境変数で管理し、.envは公開しない状態を作ります。環境変数は金庫。鍵（キー）はここに入れます。

操作と確認

Anthropic ConsoleでAPIキーの画面を開き、値はコピーしないまま場所だけ確認。
VS CodeでCodexに「.envの雛形を作る」「.gitignoreに.envを追加」「読み取り方法」を依頼します。
サーバーが環境変数を読めるように設定ファイルを用意してもらいます。

終えたら、プロジェクトに「.env.example」があり、.gitignoreに「.env」が入っていることを確認します。

9. 手順3: エージェントにアプリを作ってもらう

このボックスをコピーして、VS Code内のCodexチャットに送ります。

Codexに送るプロンプト

目的：既存の「Claude APIモデル自動切り替え」小アプリに、公開前チェックリストの最小実装を追加してください。UI（Auto/速さ重視/品質重視）は変更せず、サーバー側だけ編集します。

必ず実装すること：
1) 環境変数の安全管理：.env.example を作成し、.env を .gitignore に追加。サーバーは process.env からのみ API キーや上限・タイムアウト値を読む。キーの実値は画面・ログ・リポジトリに一切出さない。
2) 料金上限ガード：セッション単位と簡易的な日次/月次の送信回数または見積トークンで上限をチェック。超過時は送信前に 429 ではなくアプリ内の独自エラー(例: BUDGET_EXCEEDED)で停止し、フロントへ「上限に達したため送信を止めました。管理者はAnthropic Consoleで利用量を確認してください。」という短い文を返す。
3) タイムアウト：各リクエストの総待ち時間上限(ms)を環境変数で設定。超過時は1回だけ予備モデルへフォールバック。2回目以降は行わない。
4) 自動切り替えの条件：最初のモデルがタイムアウトまたはHTTP 5xxのときのみ、予備モデルへ1回だけ。400/401/403/404/422/429/安全上の拒否やモデルID不正は切り替えず、原因を示すエラーを返す（ユーザーに直す場所を案内）。
5) ログ：時刻、選択肢、実際に使ったモデル名、処理時間ms、フォールバックの有無と理由、疑似エラーID、合計見積コスト（概算）をJSONでinfoレベルに出力。APIキーや生テキスト全文は出力しない。開発時のみコンソール、本番はファイルローテーション想定の抽象化にしてコメントで指示。
6) モデル設定見直し：サーバー側に「選択肢→モデル候補(優先/予備)、最大トークン、温度」の対応表を持ち、画面にはIDを出さない。新モデル追加時はここだけ直せば動くように。
7) 疑似エラーの注入：開発モードだけ、特定の入力語（例: #timeout, #5xx, #budget）で上記の挙動を再現できるフラグを挟む。本番ビルドでは無効化。

前提：これまでの機能（第5回まで）を壊さない。Node.js/Expressベースを想定し、必要なパッケージ導入とスクリプト変更はすべて自動化する。読者にコードやコマンドを手入力させない。

成果物：
- サーバーファイル一式の変更（ルーター、サービス、設定）
- .env.example と READMEの追記（.envの設定項目、タイムアウト、上限、ログの説明）
- 疑似エラーのテスト手順（開発モード限定）

動作確認：
- #budget を含む入力で、送信前に BUDGET_EXCEEDED がフロントに表示される。
- #timeout で最初のモデルがタイムアウト→予備モデルへ1回だけ切り替わる。2回目は行わない。
- #5xx で一時障害を模擬→予備モデルへ1回だけ切り替わる。
- 正常時はログにJSON1行が出力され、APIキーは含まれない。

安全：APIキーを平文で表示・保存・ログ出力しない。ブラウザに送らない。質問があれば作業前に確認してから進めてください。

Codexが作るものと、あなたが確認する点：

.env.exampleの作成と.gitignoreの更新。
料金ガードとタイムアウトのサーバー実装。
フォールバックは1回だけ、条件は5xxとタイムアウトのみ。
ログ出力がJSONで、キーが含まれない。

10. 手順4: 動かして確認する

疑似エラーで上限やタイムアウトとログを安全に確認する様子 — Photo by David Pupăză on Unsplash

目的

上限・タイムアウト・ログ・切替条件が仕様通りか、疑似エラーで安全に確かめます。郵便にたとえると、宛先不明の手紙は別の配達員に渡しても届かないので、そこで止める挙動を確認します。

操作

Codexの指示に従って開発モードを起動。
入力欄に「#budget」を含めて送信。フロントに上限到達の案内が出ること。
次に「#timeout」を含めて送信。最初はタイムアウト→予備モデル1回だけ。
「#5xx」でも同様に1回だけ切替。
正常入力を送り、コンソールのJSONログに「時刻・選択肢・モデル名・処理時間・フォールバック有無・概算コスト」が出ること。

Anthropic Consoleでの確認

Consoleを開き、利用量ダッシュボードで直近のリクエスト推移を目視。送信回数を増やし過ぎないように短文でテスト。
価格体系はAnthropic API pricingで最新を確認。モデルごとに入力/出力トークンの扱いが異なることがあります。

11. 手順5: エージェントと直す

目的

ログ量や候補モデルを絞り、フォールバック回数が常に1回だけになるよう仕上げます。水道の蛇口を少し締めてムダを減らす感覚です。

Codexへの修正依頼例