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

完成すると、1画面のWebツールで文章を入力し、Claude APIの返答が表示されます。選んだモードに合わせて内部で適切なモデルを使います。

この記事では、完成像を理解しつつ、VS Code・OpenAI Codex・Anthropic Console・Node.jsの準備と、安全なAPIキー運用をゼロから確認します。

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

このシリーズでは、Claude APIをアプリの頭脳として使い、VS Code内のOpenAI Codexに作業を頼みながら、小さなWebアプリを少しずつ育てます。
AIを家づくりに例えると、Claudeは中で考える「頭脳」、Codexは作り方を教えて手を貸してくれる「工作の先生」、VS Codeは工具がそろった「作業机」です。先生に頼みつつ、机の上で安全に作っていきます。

• Claude APIで「速さ/品質/自動」を切り替える最小アプリの準備ができる。
• APIキーを安全に扱う基本（.env、環境変数、.gitignore）が身につく。

2. 完成イメージ

完成像を先に見ておくと、道に迷いにくくなります。地図を先に眺めるのと同じです。

• 1画面のWebツール。上に入力欄と送信ボタン、下に返答表示。
• 「Auto（自動）」「速さ重視」「品質重視」の3つの切り替えボタン。
• 内部でClaudeのMessages APIを呼び、選択に応じてモデルを切替。
• 画面には、選んだモード、実際に使ったモデルの表示名、予備に切り替えた場合だけ短い理由を表示。
• モデル名や料金は変わり得るため、毎回Anthropicの公式情報を確認して使う。

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

たとえで整理します。AIは「頭脳」、Codexは「工作の先生」、VS Codeは「作業机」。
Claude API＝頭脳を借りる道具、OpenAI Codex＝作り方を助ける道具、と役割が違います。混ぜないことが安全の第一歩です。
料金やモデルの種類・制限は変わることがあります。必ずAnthropicの公式ドキュメントで現在のモデル候補と使い方を確認してください。リンクは本記事の出典にあります。

4. 対象読者

• Claude API初心者。中学生でもOK。
• Windows/macOS/Linuxのいずれかを使用。
• コマンド入力は最小限。コード作成・修正はVS Code内のOpenAI Codexに任せる進め方。

5. 必要なものと入れ方

ここは道具箱の準備コーナーです。自転車に乗る前にヘルメットをかぶるように、安全の元になる部分を一つずつ整えます。

VS Code

1. これは何？：プログラムを書く作業机。メモや引き出し（拡張機能）が豊富で、整理しやすい机です。
2. 用意するもの：インターネット、Webブラウザ、PCの管理者権限（インストール用）。
3. 入れ方・開き方：公式のセットアップ手順（Visual Studio Code setup）を開きます。Windowsは「User Installer」をダウンロード→実行→指示に従う。macOSは.dmgを開き、アプリをApplicationsへドラッグ。Linuxは配布向けの手順に従います。インストール後、アプリ一覧から「Visual Studio Code」を起動。
4. 最初の設定：起動後、左下の歯車→「設定」から日本語化したい場合は拡張機能でLanguage Packを追加します（任意）。
5. できたか確認：ウィンドウ上部に「Visual Studio Code」と表示される。左側に四つのアイコン（エクスプローラー、検索、ソース管理、実行）が見えればOK。

OpenAI Codex（VS Code拡張）

1. これは何？：作り方を教える工作の先生。何を作るか伝えると、必要なファイルや設定を提案し、コードも書いてくれます。
2. 用意するもの：OpenAIのサインイン手段（OpenAIアカウントまたは対応するサインイン）。インターネット。
3. 入れ方・開き方：VS Code左の四角いアイコン「拡張機能」を開く→検索欄に「Codex」と入力→OpenAIのCodex拡張を選ぶ→「インストール」を押す。
4. 最初の設定：拡張を開くとサインインの案内が出ます。案内に従ってサインイン。VS CodeのサイドバーにCodexのチャット欄が現れたら、そこを開きます。
5. できたか確認：サイドバーに「Codex」またはOpenAIの名前が付いたチャット欄が表示され、「ここにメッセージを入力」といった入力ボックスが見えれば準備完了。

Anthropic Console（Claude API）

1. これは何？：Claudeという頭脳を管理するコントロールパネル。モデル候補の確認、APIの利用設定、キーの発行を行います。
2. 用意するもの：メールアドレスとインターネット。必要に応じて支払い方法の設定。
3. 入れ方・開き方：WebブラウザでAnthropicのドキュメント「Intro to Claude」を開き、そこからConsoleやAPIドキュメントへの導線をたどってサインイン/サインアップします。
4. 最初の設定：Console内でAPI利用の有効化や請求設定を済ませます（必要な画面は地域やアカウントにより異なります）。モデル一覧やMessages APIの説明ページをブックマークしておくと便利です。
5. できたか確認：ConsoleでAPIキーを発行できる画面にたどり着ける。モデル一覧（例：Haiku / Sonnet などの名前や世代）が見える。

Node.js

1. これは何？：Webサーバーのエンジン。車のエンジンのように、アプリを走らせます。
2. 用意するもの：インターネット、PCへのインストール権限。
3. 入れ方・開き方：公式サイトの案内に従いインストールします。インストール後はVS Codeのターミナルでバージョンが表示されればOKです。
4. 最初の設定：特になし。プロジェクト作成は後でCodexに依頼します。
5. できたか確認：VS Codeの新規ターミナルを開き、nodeとnpmのバージョンが表示されれば準備完了です。

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

家の設計図を先に眺めます。土台（サーバー）と部屋（画面）を最小に絞ります。

• 構成：フロント（最小のHTML/CSS/JS）＋サーバ（Node.js/Express）。
• 切り替えロジック：速さ重視＝軽いモデル、品質重視＝賢いモデル、Auto＝入力の長さや混雑、応答時間を見て自動で1回だけ予備に切替。
• 安全：APIキーはサーバーだけが読む.envで保持。ブラウザへキーや内部のモデルID、詳細なエラーは送らない。
• 確認：画面には選んだモード、実際に答えたモデルの表示名、切替が起きたときだけ短い理由を出す。

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

目的と全体

作業机（VS Code）と先生（Codex）を使えるようにし、走るエンジン（Node.js）を確認します。自転車のブレーキ点検のように、安全確認が中心です。

読者が行う操作

• VS Codeをインストールし起動。
• 拡張機能で「Codex」を検索してOpenAI Codex拡張をインストールし、サインイン。
• Anthropic Consoleにサインインしてモデル一覧の場所を確認。
• VS Codeで作業用の空フォルダを作成し、開く。必要ならソース管理を有効化。

Codexに頼む内容（まだ送らない）

この回ではコード作成はしません。次の回で使う依頼の形だけ頭に入れておきます。

成功の見分け方

• VS CodeにCodexチャット欄が表示され、入力できる。
• Anthropic ConsoleでAPIキー発行画面とモデル一覧にアクセスできる。
• 作業フォルダがVS Codeで開けている。

困ったとき

Codexの拡張が見つからない場合は検索語を「Codex」で再確認。ネットワーク制限がある学校や職場では管理者に相談してください。

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

目的

APIキーは身分証です。鍵を首からぶら下げないように、見えない場所（.envや環境変数）で管理します。住所を机にメモしないのと同じです。

読者が行う操作

• Anthropic Consoleにサインインし、APIキーを発行できる画面を開く（画面の場所はConsole内の「API」「Keys」など、地域で表記が異なることがあります）。
• キーを作ったら、その文字列はどこにも貼らず、安全に一時保管。画面はすぐ閉じる。
• .envと.gitignoreの役割を理解する（作成自体は次回、Codexに依頼）。

安全のポイント

• キーはブラウザのJavaScriptやHTMLに埋め込まない。必ずサーバー側だけで読みます。
• .envはリポジトリに入れない。.gitignoreに.envを必ず含める。
• 画面共有や配信でキーが見えないようにする。スクリーンショットにも写さない。
• 料金や制限、モデルの候補は変わるため、公式ドキュメントをその都度確認。

成功の見分け方

• Consoleでキーを再生成・無効化できる画面に戻れる。
• どこにもキーの実値を書かずにこの記事を読み進められている。

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

目的

次回以降に備えて、Codexへ「何を作るか」を正しく伝える型を作ります。料理のレシピカードを用意するイメージです。

読者が行う操作

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

目的：Claude APIを使う小さなWebアプリの土台を、Node.js/Expressで最小構成で作成してください。画面は1ページで、入力欄・送信ボタン・結果表示・モード切替（Auto/速さ重視/品質重視）を用意します。
条件：
- APIキーやモデルIDはハードコード禁止。.env（サーバー側のみ）と環境変数で管理し、.gitignoreに.envを追加してください。
- サーバーにClaudeのMessages APIを呼ぶエンドポイントを作成。フロントからはモード名（auto/fast/quality）とユーザー入力だけを送信します。
- モデル切替ロジック：
  - fast＝軽量モデル、quality＝高品質モデル。
  - auto＝入力の長さや応答時間、HTTP 5xxの一時エラーのみを条件に、予備モデルへ1回だけ切替。
  - 400/401/403/429/モデル未存在は自動切替しないで分かるエラーメッセージを返す。
- 画面には「選んだモード」「実際に使用したモデルの表示名」「予備に切り替えた場合の短い理由」だけを表示。モデルIDやAPIキーは絶対にフロントへ送らない。
- ログに「実際のモデル名」「レスポンス時間（ms）」「切替が起きたか」を記録（開発用）。
- 依存関係の追加、スクリプト、起動・停止、動作確認の手順は、ユーザーに手入力を求めず、VS Codeのタスクや説明を通じて案内してください。
- 不明点があれば作業前に日本語で質問してください。ファイル一覧と処理の流れ図も提示してください。
成果物：
- server/ 配下にExpressサーバー、envの読み込み、Claude APIクライアント。
- public/ に最小のHTML/CSS/JS。
- README（セットアップと確認方法、キー保護の注意）。
- 疑似エラーの入切スイッチ（開発時だけ）。
確認：
- ブラウザで1ページが開く。
- 同じ質問を3モードで試すと、速度や出力が変わる。
- サーバーログにモデル名と時間が出る。

Codexが作るものと確認点

• プロジェクトのフォルダ構成（server/public/README）。
• .envを使う設定と.gitignoreの反映。
• モード切替の最小実装と、開発用の疑似エラー切替。

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

目的

アプリが走るか、安全に確認します。試運転のように、短い距離でチェックします。

読者が行う操作

• Codexの案内に従ってアプリを起動。
• ブラウザでページを開く。
• 同じ質問を「Auto/速さ重視/品質重視」で順に試す。

成功の見分け方

• 画面に返答が表示される。
• サーバーログに実際に使ったモデル名とレスポンス時間が出る。
• Autoの時、条件を満たすと予備モデルへ1回だけ切り替わり、短い理由が表示される（疑似エラーで確認）。

困ったとき

うまく開かない場合は、Codexに「起動でつまずいた場所」をそのまま伝え、タスク設定や依存関係の再確認を依頼します。

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

目的

小さく改善します。家の表札を付け替えるように、安全を保ったまま調整します。

読者が行う操作

• UIの文言を分かりやすく変更する。
• タイムアウトや再試行回数を調整する。
• レート制限時（429）の案内文を改善する。フォールバックは連打せず、待つ提案にする。

Codexへの依頼例

Codexに「UIテキストの変更」「タイムアウトの秒数調整」「429時のメッセージ改善」を順番に相談します。安全なキー管理は変えないよう念押しします。

12. よくあるエラー

• 症状：認証エラー（Unauthorized/Forbidden）が画面やログに出る。
  原因：APIキー未設定、権限不足、タイプミス。
  最初に開く場所：Anthropic Consoleのキー一覧（有効/失効の状態）と、サーバーの環境変数の設定。.envのファイル名拡張子も確認。
  Codexへの質問：「認証エラーが出ています。キーは.envに保存し、環境変数読み込みを設定したつもりです。読み込み箇所と.envの配置、.gitignoreの設定を点検してください。」
• 症状：ブラウザがCORSエラーや接続失敗を示す。
  原因：サーバーのポート競合、CORS設定漏れ、サーバー未起動。
  最初に開く場所：Codexが作ったサーバー設定（ポート番号）、起動タスク、ブラウザのコンソール。
  Codexへの質問：「CORSエラー/接続失敗が出ます。現在のサーバーポート、CORSミドルウェアの設定、起動手順を確認して直してください。」
• 症状：依存関係のモジュールが見つからない。
  原因：インストール未実行、ロックファイルの不整合。
  最初に開く場所：Codexのセットアップ指示、package.json、依存追加タスク。
  Codexへの質問：「依存関係エラーです。package.jsonとインストール手順を見直し、必要なライブラリの追加と再インストールを自動で行ってください。」
• 症状：モデル未指定/存在しないモデルでのエラー。
  原因：モデル名の変更、利用可能範囲の違い。
  最初に開く場所：Anthropicのモデル一覧（公式ドキュメント）。
  Codexへの質問：「モデル未存在エラーが出ます。公式のモデル一覧を参照し、現在利用可能な候補に置き換え、設定を外部化してください。」

13. 次に試すこと

• プロンプトのテンプレート化（入力の前後に共通の文）。
• チャット履歴の保持（同じ会話を続けられる）。
• 簡単なログ保存（日時・モード・モデル表示名・レスポンス時間）。
• 予算ガード（1リクエストの上限トークンを設定）。

14. まとめ

第1回は、道具の準備と安全な鍵の扱い、そして完成像の確認まで進みました。次回から部屋（機能）を増やし、UIや自動切替の中身を育てます。安全運用と一次情報の確認を習慣にしながら進めましょう。

関連記事

AIを読む人から使う人へ：中学生にも分かるAPIキーを安全に扱う基本 #1

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

中国Moonshot「Kimi」新モデルの実力は？企業活用とリスク管理を日本視点で解剖

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