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

完成後は、Web画面で3択を選んで文章を送ると、サーバーが安全にモデルIDへ変換し、実際に使われたモデルの表示名が結果と一緒に見えます。

この記事では、準備からVS Codeでの操作、Codexへの依頼、動作確認、直し方、エラー対処まで、手入力のコードなしで進めます。

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

今回のゴールは、前回までの小さなWebアプリに「Auto／速さ重視／品質重視」の3択UIを足し、サーバー側で安全にClaudeモデルIDへ変換して使い分けることです。
イメージとしては、飲み物の自販機で「冷たい・普通・熱め」を押すと、裏側の配管が最適な温度のタンクにつながる感じです。表のボタンは3つだけ、複雑な管の切り替えは内側で安全に行います。

2. 完成イメージ

• Web画面に3つのラジオボタンが並ぶ：Auto／速さ重視／品質重視。
• 送信後、画面に「選んだモード」と「実際に使われたモデルの表示名」が結果と一緒に出る。
• 構成：フロント（フォームと結果表示）→ サーバー（選択肢→モデルIDのマッピング、Claude API呼び出し、.envからAPIキー読込）。

たとえると、切符売り場で「特急券・普通券・おまかせ」を選ぶと、改札の中で正しい線路に自動で案内されるような流れです。

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

3択のUIは「電車の切符」、サーバーのマッピングは「改札の配線」のような関係です。切符面はシンプルでも、配線を安全に作るほど迷子や事故が減ります。
ここで扱う用語は、モデルID（機械向けの名前）、表示名（人向けのラベル）、環境変数（秘密の設定）、サーバー（裏方の処理）です。
鍵になる理由は3つです。APIキーを漏らさない、誤ったモデル利用を防ぐ、運用上のモデル差し替えをUIに影響なく行えること。これにより、表の画面はずっと簡単なままで、安全で柔軟に運用できます。

4. 対象読者

• Claude APIを初めて触り、画面にモデル選択を足したい人。
• JavaScript/TypeScriptは学び始めたばかりの人。
• WindowsでもMacでもOK。必要な操作は画像のようにボタンを押すだけで進めます。

家づくりで言えば、土台ができた家に「スイッチ付きの照明」を増設する段階です。壁の中の配線は、エージェント（Codex）と一緒に安全に仕上げます。

5. 必要なものと入れ方

VS Code

1. これは何？：ノートに例えると、科目ごとにページを分けて勉強できる大きなノート。開発の作業机です。
2. 用意するもの：PC（Windows/macOS）、インターネット、メールを受け取れるアカウント。
3. 入れ方・開き方：公式サイトから入手し、案内に沿ってインストールして開きます。初回は日本語でも操作できます。
4. 最初の設定：「エクスプローラー」を開き、作業用フォルダを作成して開きます。
5. できたか確認：左側にファイル一覧、右側に空の編集画面が出ればOKです。

OpenAI Codex（VS Code拡張）

1. これは何？：家庭科の授業でレシピを提案してくれる先生のように、必要なコード一式を作ってくれる相棒です。完成アプリの頭脳ではありません。
2. 用意するもの：OpenAIアカウントまたはAPIキー。
3. 入れ方・開き方：VS Code左の「拡張機能」を開き、「Codex」で検索し、OpenAIのCodex拡張を選んで「インストール」。その後「有効化」します。
4. 最初の設定：拡張内の案内に沿ってサインイン。VS Code内にCodexのチャット欄を開きます。
5. できたか確認：右または下部にCodexのチャットが表示され、「ここに入力」欄と送信ボタンが見えたら準備完了です。詳しくはOpenAI Codex documentationも参考にしてください。

Anthropic（Claude）アカウントとAPIキー

1. これは何？：アプリが質問を送る相手。郵便局の窓口のような役目で、ここに依頼するとAIが返事をくれます。
2. 用意するもの：Anthropicアカウント、支払い設定（必要に応じて）。
3. 入れ方・開き方：公式の紹介ページを開き、コンソールでAPIキーを作成します。案内はIntro to Claudeを参照。
4. 最初の設定：キーを控え、.envに保存します（値はこの記事にも画面にも貼らないでください）。
5. できたか確認：後の手順でサーバーから読み取れることを確認します。料金やモデルはAnthropic API pricingで最新情報を見ます（料金・提供モデルは変わる場合があります）。

Node.jsとnpm

1. これは何？：工作を動かす電池のようなもの。サーバーを動かす力になります。
2. 用意するもの：公式サイトから入手できるインストーラー。
3. 入れ方・開き方：案内に沿ってインストール。VS Codeでプロジェクトを開くと使えます。
4. 最初の設定：プロジェクト初期化はCodexに任せます（次の手順で依頼）。
5. できたか確認：以降の動作確認で、ローカルサーバーが起動し画面が開けば成功です。

前回の準備がまだの方は、短くこちらを確認してから進めてください：中学生にも分かるAIモデル自動切り替え機能の作り方 #2。

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

作るものは最小構成です。フロントは、文章入力と3択ラジオボタン、送信ボタン、結果表示。サーバーは、選択肢→モデルIDのマッピングと、Claude API呼び出し、結果に「選んだモード」「実使用モデルの表示名」「（Autoで予備に切り替えた場合だけ）短い理由」を含めます。
料理で言えば、テーブルは3つの味のソース、キッチンは材料（モデル）を安全に扱う場です。ソースの瓶には分かりやすいラベル（表示名）を貼り、中のレシピ（モデルID）は裏側にしまっておきます。

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

目的と操作

VS CodeとCodexを使える状態にし、作業フォルダを開きます。Codexは開発の相棒で、Claude APIはアプリの頭脳という役割の違いを意識しましょう。

読者が行う画面操作

• VS Codeを起動し、作業用の空フォルダを開く。
• 左の「拡張機能」から「Codex」を検索→OpenAIのCodex拡張をインストール→有効化。
• Codexのチャット欄を開き、メモできるようにドッキングする。

Codexに送る内容

プロジェクトの初期化をCodexに依頼します。以下の指示をそのままコピーして送ってください。

目的：Claude APIを使う小さなWebアプリの第3回。前回の「文章を送って返事を表示する」機能を壊さず、今回はUIに「Auto／速さ重視／品質重視」の3択を追加し、サーバー側で安全にモデルIDへマッピングする最小構成を作ってください。

要件：
- コードやコマンドは、必要なファイルをあなた（Codex）が生成・編集し、私には手入力させない。
- APIキーは.envに置き、サーバー側だけが読む。実値は私に貼らせない。
- Node.jsの最小プロジェクトを初期化し、パッケージ管理も自動で設定。
- 前回の機能（文章送信→Claude応答表示）を維持。

準備：
- まず必要なファイル一覧と生成計画を箇条書きで提案し、私に確認や質問があれば先に聞いてください。
- その後、同意した計画に沿って一括で作業してください。

確認：
- 作業後、起動方法、動作確認の手順、問題が出た場合の見方を説明してください。

成功の見分け方

Codexがファイル構成と計画を箇条書きで返し、あなたの同意を求めたらOKです。同意後、ファイル一式が自動で作られ、VS Codeのエクスプローラーに表示されます。

次に進む前の確認

プロジェクトの土台ができ、前回機能の画面が開ける説明が出ているか確認します。

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

目的と操作

APIキーは「金庫の鍵」です。画面やコードに直書きせず、.envに保存し、サーバーだけが読むようにします。

読者が行う画面操作

• AnthropicのコンソールでAPIキーを発行（操作は公式案内に従う）。
• Codexからの指示に従い、.envファイルだけを開き、APIキー名（例：ANTHROPIC_API_KEY）の空欄に貼らずに「あとで自分だけで記入する」とメモだけ入れる。
• .gitignoreに.envが含まれていることをCodexに確認してもらう。

Codexに送る内容

.envの読み込みとチェック用の小さなテストを作るよう依頼します。

.envにAPIキーを保存して、サーバーだけが読む構成を整えてください。要件：
- .env.example を作り、変数名だけを載せる（実値は禁止）。
- .gitignore で .env を除外し、誤って共有しないようにする。
- サーバー起動時に、必要な環境変数が未設定なら分かりやすいエラーメッセージを出す。
- キーの実値もエラーメッセージも、ブラウザへは送らない。
- 動作確認のため、サーバー内で環境変数の有無だけをチェックする関数を用意し、ログには「設定あり/未設定」だけを出す。
- 私がキーの実値を貼る必要がある場面では、貼らないように注意喚起する。
作業後、確認の手順を説明してください。

成功の見分け方

VS Code上で.env.exampleと.gitignoreが作られ、サーバー起動時に未設定なら「未設定」とだけ出る仕組みができていればOKです。

次に進む前の確認

ブラウザに秘密が出ない説明が添えられているかを確かめます。

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

目的と操作

3択UIと、サーバー側の安全なマッピング、Claude呼び出しを仕上げます。表示名は人向け、モデルIDは機械向けで、サーバーにだけ置きます。

読者が行う画面操作

• Codexのチャットに、以下の依頼を丸ごと送る。
• Codexからの質問に「はい／いいえ」で答える。必要なら表示文言だけ指示する。

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

目的：UIに「Auto／速さ重視／品質重視」の3択を追加し、サーバー側で安全にClaudeモデルIDへマッピングして呼び出す最小アプリを完成させてください。前回の文章送信→応答表示は維持します。

作るもの：
- フロント：テキスト入力、送信ボタン、3つのラジオボタン（Auto を既定）。送信後、選んだモードと、サーバーから返る「実際に使ったモデルの表示名」を画面に表示。
- サーバー：選択肢（auto/fast/quality）→ モデルIDのマッピングを安全に保持。マッピングは1カ所の設定オブジェクトに集約し、ブラウザへはIDを送らない。Claude API呼び出しの際にのみIDを使用。
- ログ：受信した選択モード、実際に使用したモデルの表示名、Autoで予備に切り替えた場合のみ「短い理由」をサーバー側ログに残す。

安全要件：
- APIキーは.envから読み、クライアントに露出しない。
- エラー詳細・モデルID・キーの一部でもブラウザへ表示しない（代わりに短い一般的メッセージ）。
- 料金やモデル仕様は固定値で断定しない。モデル候補はコメントで「公式ドキュメントを確認」と示す。

確認：
- 起動方法、ブラウザでの操作手順、テストメッセージ送信後に「選んだモード」「実使用モデルの表示名」が見えることを説明。
- 疑似エラーでの確認方法（開発時のみ）を用意し、本物のAPIを無駄に叩かないよう注意喚起。

質問：
- 作業前に、ファイル名やUI文言の好みがあるか1回だけ質問してから進めてください。

Codexが作るものと確認点

• フロントの3択UIが表示され、既定がAutoになっている。
• サーバーにマッピング設定が1カ所あり、IDは外に出さない構造になっている。
• 送信後に「選択モード」と「実使用モデルの表示名」が画面に表示される。

次に進む前の確認

ログに選択モードと表示名が残り、必要ならAuto時のみの切り替え理由が出ることを確認します。

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

目的と操作

ローカルでアプリを起動し、3択が働いているかを確かめます。

読者が行う画面操作

• Codexの案内に従ってアプリを起動。
• ブラウザでページを開く。テキストを入れ、モードを切り替えて送信。

Codexに送る内容

ローカルでアプリを起動し、次を確認できるよう案内してください：
1) 3つのラジオボタンが見える（Autoが既定）。
2) メッセージ送信後、画面に「選択モード」と「実使用モデルの表示名」が出る。
3) 疑似エラーによる確認方法（Auto時の予備切り替えの説明）を実行後に元に戻す手順。

成功の見分け方

それぞれのモードで送信した結果が返り、画面に実使用モデルの表示名が見えれば成功です。サーバーのログにも同じ情報が残っているはずです。

次に進む前の確認

Auto・速さ重視・品質重視で挙動が変わる（使われるモデルが違う）ことを確かめます。

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

目的と操作

文言や体験を小さく改善します。例えば、既定をAutoに固定、説明テキストを優しく、送信時に読み上げ風の小さな通知（トースト）を付けます。

読者が行う画面操作

• Codexに改善依頼を送る。

Codexに送る内容

次の改善をお願いします：
- ラジオボタンの説明文を、より分かりやすい日本語に変更（例：「速さ重視（短時間で返信）」「品質重視（精度優先）」）。
- 既定は常にAuto。ユーザーが何も触らない場合でもAutoで送られる。
- 送信時と応答取得時に、画面右上で読み上げ風の短いトーストを表示（APIキーやIDは表示しない）。
- 変更後の動作確認手順も教えてください。

成功の見分け方

文言が更新され、トーストが表示され、既定がAutoであることを確認します。

12. よくあるエラー

• 症状：画面は開くがサーバーが「APIキー未設定」と出る。
  原因：.envが未作成、変数名のタイプミス。
  最初に開く場所：.envと.env.example、サーバー起動時のログ。
  Codexへの質問：「envの読み込みチェックが未設定と出ます。変数名と読み込み箇所の確認・修正をお願いします（キーの実値は伝えません）。」
• 症状：ブラウザの送信が失敗し、開発者ツールでCORSやネットワークエラー。
  原因：フロントとサーバーのポート不一致、CORS設定不足。
  最初に開く場所：フロントの送信先URL、サーバーのポート設定、CORSの許可設定。
  Codexへの質問：「CORS/ポート競合で送信できません。現在のポート設定とCORSミドルウェアを確認・最小修正してください。」
• 症状：サーバーログで「モデルID不一致」「権限エラー」。
  原因：指定モデルがアカウントで未提供、モデル名のスペル違い。
  最初に開く場所：サーバーのマッピング設定、Anthropicのコンソール、公式のモデル一覧。
  Codexへの質問：「モデルIDの候補を固定せず、現在利用可能な候補をコメントで示し、未提供時のフォールバックメッセージを整えてください。」
• 症状：429（利用制限）や支払い関連のエラー。
  原因：アカウントの上限、クレジット不足。
  最初に開く場所：Anthropicコンソールの利用状況。
  Codexへの質問：「429や課金関連で失敗します。待ち時間や再試行の案内をユーザー向けに追加し、別モデルへの自動切り替えは行わない設計にしてください。」

13. 次に試すこと

• 選択肢ラベルのA/Bテストで、利用者が迷わない表現を探す。
• サーバー側で利用ログを保存し、どのモードが多いかを可視化する。
• 組織ごとに既定のモードを変える運用（例：社内は速さ重視、社外は品質重視）。

14. まとめ

UIは「Auto・速さ重視・品質重視」の3択だけにして、複雑さはサーバーへ隠しました。CodexとVS Codeを使えば、最小構成を短時間で組み上げられます。モデルや料金は変わる可能性があるため、Intro to ClaudeとAnthropic API pricingで最新を確認してください。

関連記事

AIを読む人から使う人へ：ChatGPT APIアプリを見える化して公開する #4

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

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

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