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

完成後は、画面で選んだ「Auto」だけが短いタイムアウトや一時的なサーバー障害（5xx）のときに、1回だけ予備モデルへ振り替えます。どのモデルを最終的に使ったかと、その理由がUIとログに出ます。

この記事では、準備から、VS Code内のOpenAI Codexへの依頼、動作確認、直し方までを一気に扱います。

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

この回では、次の3点を完成させます。バスが遅れたときに、駅から目的地まで一駅だけバス振替を使うようなイメージです。全線運休（恒久エラー）のときは、無理に他路線へ乗り継がず、原因を伝えて戻ります。

• Auto選択時だけ、短いタイムアウトや一時的な5xxで1回だけ予備モデルへ切替え。
• 400/401/403/429/料金不足/安全上の拒否/存在しないモデルでは切替えない。
• 切替えたら、最終的に使ったモデル名と理由をUIとログに表示。

2. 完成イメージ

• 小さなCLIまたはミニWebアプリ（本シリーズのWeb画面）で、モデル=Auto時のみ安全フォールバック。
• ログに「primary → backup」へ切替えた理由を1行で記録。
• UIに「実際に使ったモデル名」と「切替理由（短文）」を表示。

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

たとえ話：電車が数分遅れるだけなら、目的地に早く着くために一駅だけバスに振替えることがあります。ですが、線路の工事で終日運休なら、別のバスに乗り換えても着きません。このときは事情を知って予定を立て直します。アプリの自動切替も同じで、「一時的な遅れ」だけを1回限りで振替えます。
本文の意味：短いタイムアウトや5xxなどの“一時トラブル”時だけ予備モデルへ1回だけ切替。料金不足やモデル名の間違いなど“恒久エラー”は利用者に知らせて止めます。

技術の基礎：

• stop_reason：Claudeの応答がcomplete、max_tokens、content_filteredなどで止まったかを示し、扱いを分けると安心です。公式の意味はAnthropicのドキュメントで確認してください。
• HTTPエラーの区分：400台は利用者や設定の問題、500台はサーバーの一時問題の可能性が高い、と覚えると整理できます。
• 料金とトークン：Claudeはトークン量で課金されます。最新の料金は必ず公式のPricingで確認してください。金額やモデルは変わり得ます。

4. 対象読者

• 初心者〜中級で、モデル切替を便利にしつつ、料金や設定ミスを隠さず見える化したい人。
• VS CodeとOpenAI Codexの手順に沿って、画面操作で進めたい人。

5. 必要なものと入れ方

家づくりで言うと、土台となる工具と材料をそろえる段階です。焦らず、一つずつ確認しましょう。

VS Code

1. これは何？：ノートに文字を書くのと同じで、コードを書くためのアプリ。拡張で機能を増やせます。
2. 用意するもの：メールアドレス、インターネット接続、Windows/macOSのPC。
3. 入れ方・開き方：公式サイト（https://code.visualstudio.com/）を開き、Downloadを押す。インストーラーの案内に従って入れる。完了後にアプリを開く。
4. 最初の設定：左下のアカウントアイコンからサインイン（Microsoft/GitHub）。テーマや日本語表示は好みで設定。
5. できたか確認：「Welcome」画面が開き、左側に拡張（四つの四角）アイコンが見えたらOK。

OpenAI Codex拡張

1. これは何？：頼れる家庭教師のように、指示した内容でコードを作ってくれる拡張。
2. 用意するもの：OpenAIアカウント（または対応するサインイン方法）。ブラウザ。
3. 入れ方・開き方：VS Code左の拡張アイコンを押す。検索欄に「Codex」と入力。OpenAIのCodex拡張を選び、「Install」を押す。インストール後、拡張のページで「Sign in」を押し、案内に従う。
4. 最初の設定：サインイン完了後、サイドバーにCodexのアイコン（またはチャットビュー）が現れます。新しい作業用フォルダを「File → Open Folder…」で選んで開きます。
5. できたか確認：右側またはサイドバーに「Codex」チャット欄が開き、「メッセージを入力」のボックスが見えたら準備完了。

Anthropic（Claude）API

1. これは何？：質問に答えるAIの本体。アプリの頭脳役です。
2. 用意するもの：Anthropicアカウント、支払い方法の設定（必要な場合）。
3. 入れ方・開き方：ブラウザでAnthropic Consoleを開き、ログイン。APIキーを発行します。
4. 最初の設定：発行したAPIキーは必ず安全な場所（.env）で使います。画面や依頼文に貼らない。
5. できたか確認：Consoleでキーが作成されていること、必要なモデルの利用権限があることを確認。

Node.js LTSまたはPython

1. これは何？：アプリを走らせるエンジン。車でいうとエンジン本体です。
2. 用意するもの：どちらか一方の環境。今回はCodexにどちらかで実装してもらいます。
3. 入れ方・開き方：公式サイトからLTS版をダウンロードしてインストール（Node.js: https://nodejs.org/、Python: https://www.python.org/）。
4. 最初の設定：VS Codeで作業フォルダを開き、Codexのチャットを使える状態にします。
5. できたか確認：Codexに「このフォルダにNode.js（またはPython）の簡単なHelloアプリを作って」と頼み、実行できたらOK。

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

ここでの「エージェント」はCodexのことです。家づくりの大工さんに「設計図」を渡すイメージで、私たちは指示文（プロンプト）を書きます。Claude APIはできあがる家の電気配線のように、アプリの頭脳として動きます。

• 流れ：リクエスト → プライマリ（第一候補）モデル →（短いタイムアウト/5xxのときだけ）→ バックアップモデル。
• 制御フラグ：バックアップへの切替は“1回だけ”。繰り返しはしない。
• 表示：ログとUIに、最終モデル名と切替理由を短く表示。

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

目的と操作の流れ

目的：VS CodeとCodex、実行環境を使える状態にする。なぜ：後でCodexに作業を任せるため。
操作：上の「必要なものと入れ方」の順にVS Code→Codex→実行環境を確認。Codexのチャット欄が開ければOK。

成功の見分け方とチェック

• VS Codeの拡張からCodexが「Signed in」になっている。
• 作業フォルダが開き、Codexチャットにメッセージ入力欄がある。

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

目的と理由

目的：APIキーを.envで安全に管理する。なぜ：鍵をむき出しで書くと、他人に家の合鍵を配るのと同じくらい危険だからです。

操作（OS別の考え方）

• 共通：キーの実値は画面に貼らない。Codexに「.envを読み込む仕組みを作成して」と頼む。
• VS CodeのRun/Debug設定：Codexに「.envをアプリ起動時に読み込む設定を書いて」と依頼。
• Git対策：.gitignoreに.envを入れるのもCodexに依頼。

確認

• アプリ起動時に「APIキーが見つかりません」と出ない。
• ブラウザの画面ソースやネットワークタブにAPIキーが出ていない。

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

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

前提：これはシリーズ第4回です。前回までに、Claude APIへ文章を送り、返答を画面に表示する小さなWebアプリがあり、画面の選択肢は「Auto/速さ重視/品質重視」です。サーバー側で各選択肢とClaudeモデルの対応表を持ち、APIキーは.envで管理し、ブラウザへキーやモデルIDを出さない設計です。

今回の依頼：
1) Auto選択時だけ、短いクライアント側タイムアウト（短めのリクエスト上限）またはHTTP 5xx/接続一時障害が発生したときに、予備モデル（backup）へ“1回だけ”フォールバックしてください。2回目以降は繰り返さず、分かるエラーで止めます。
2) 次のケースはフォールバック“しない”で、ユーザーに直し先を表示して終了：400/401/403、料金やクレジット不足、安全上の拒否、存在しないモデル、429（レート制限）。429は回避目的の連投をしないで待つ案内を出してください。
3) UIとログ：最終的に使ったモデルの「表示名」と、切替が起きた場合は短い理由（例："timeout", "5xx"）を表示・記録してください。
4) stop_reasonの扱い：Claudeの応答に含まれるstop_reasonを確認し、completeは通常完了、max_tokensはUIに"途中まで"などの注意、content_filteredは"安全上の制限"として案内を出してください。
5) 実装：Node.jsまたはPythonのどちらか1つでOK。既存機能を壊さずに最小の追加で。設定に(1) primaryモデル、(2) backupモデル、(3) Auto用の短いタイムアウトms、(4) フォールバック実行済みフラグを追加。
6) APIキーは.envから読み、サーバー側だけで使う。キーの実値をコードやHTML、ログ、画面に出さない。Gitにコミットしない仕組み（.gitignore）も確認してください。
7) 動作確認：擬似的に"タイムアウト/5xx/429/401/存在しないモデル"をテストできるモードを用意し、実APIを無駄に呼びすぎないように。テスト時はログに原因を分かりやすく出してください。
8) 不明点は作業前に質問してから着手してください。

成果物：
- 変更したサーバーコード/ルーター/設定ファイル
- UI表示の最小修正
- ログ出力の追加
- テスト用の簡易スイッチ（疑似エラー）
- READMEに使い方/テスト方法/確認ポイントを短く追記

Codexが作るものと見どころ：

• 設定にprimary/backupとAuto用タイムアウトが追加される。
• 一時障害のみ1回だけbackupに切替わる制御が入る。
• UIとログに最終モデルと理由が表示される。

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

正常系

• 画面で「Auto」を選び、短い文章を送る。一次モデルで返答。UIに最終モデル名、理由は空または”primary”。

タイムアウトのテスト

• 擬似エラーモードでタイムアウトを発生。Auto選択時のみbackupに1回だけ切替。UIに理由”timeout”、ログに切替履歴。

5xxのテスト

• 擬似5xxを発生。backupへ1回だけ切替。再度失敗しても繰り返さない。UI/ログに理由”5xx”。

恒久エラーのテスト

• 401/403/400/存在しないモデル/料金不足/429を擬似発生。フォールバックせず停止。画面に「直し先」を表示（例：APIキー設定、モデルID、Anthropic Consoleの利用状況や料金確認への案内）。

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

• ログの粒度調整：Codexに「INFO/ERRORの区分と、切替理由を短く整えて」と依頼。
• UI文言の調整：”途中まで”などの表現を簡潔に。フォールバック時の色やアイコンも最小限で。
• タイムアウト値：Codexに「Auto時のタイムアウトをX msに変更して」と依頼。
• 料金やモデルID：最新はAnthropicのPricingと利用可能モデルをConsoleで確認してから、設定ファイルの表示名だけを更新するよう依頼。

12. よくあるエラー

APIキー未設定/権限不足（401/403）

• 画面で見えること：”認証エラー”の表示。フォールバックは行われない。
• よくある原因：.env未設定、キーの無効化、権限不足。
• 最初に確認：.envの存在、サーバーが.envを読み込む設定、Anthropic Consoleのキー有効性。
• Codexへの質問：”.envを安全に読み込めているか点検し、401/403時はユーザーにどこを直すか表示してください”。

429/料金上限

• 画面で見えること：”利用が多すぎます。しばらく待ってから再試行”と案内。切替はしない。
• よくある原因：短時間の連続送信、アカウントのレート制限やクレジット不足。
• 最初に確認：Anthropic Consoleの利用状況/請求状況。リトライ間隔。
• Codexへの質問：”429時はフォールバックせず、待つ/確認する案内だけを出す実装になっているか点検して”。

存在しないモデルID（404相当）

• 画面で見えること：”モデルが見つかりません”。切替はしない。
• よくある原因：設定のタイプミス、提供終了。
• 最初に確認：Anthropic Consoleで現在使えるモデル一覧。
• Codexへの質問：”存在しないモデル時にフォールバックしないことと、設定の確認先をUIに表示して”。

タイムアウト値が不適切

• 画面で見えること：頻繁にbackupへ切替/逆に待ちすぎて体験が悪い。
• よくある原因：値が短すぎる/長すぎる。
• 最初に確認：設定ファイルのタイムアウトms。
• Codexへの質問：”Auto時のタイムアウトを適切な値に再調整し、READMEに根拠を書くよう修正して”。

13. 次に試すこと

• フォールバック理由をカテゴリ別に集計するダッシュボード。
• ユーザーが切替可否を選べるトグル（開発者向け設定）。

14. まとめ

ポイントは2つ。
一時エラーだけに限定し、Auto時に1回だけ振替える。
そして、最終的に使ったモデル名と理由をUIとログに必ず表示する。
料金や仕様は変わる可能性があるため、最新情報はAnthropicの公式ドキュメントで確認してください。

前回の内容をまだ済ませていない場合は、こちらから先に進めてください：中学生にも分かるAIモデル自動切り替え機能の作り方 #3

関連記事

AIを読む人から使う人へ：中学生にも分かるChatGPT APIでAI返信文生成アプリ作り #2

Meta「AI Mode」がFacebookのビジネス活用を変える──エンゲージメント向上と新規事業開発の実装ガイド

AIを読む人から使う人へ：中学生にも分かるAI画像を使った商品プレビュー生成の考え方 #5

生成AIの成果指標は“工数削減”だけではない—MITの新研究で示すKPI設計と業務変革の実務