AIを読む人から使う人へ：中学生にも分かるCodexでChatGPT APIアプリを修正する #4

この記事では、OpenAI Codexに指示を出しながら、既存の小さなアプリの不具合を直し、確認用のログと手順メモまで整えます。

準備からCodexへの依頼文、確認のコツ、よくあるエラーまで、一つずつ画面操作で進めます。

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

目的は、既にある小さなChatGPT APIアプリの不具合を、VS Code内のCodexに相談しながら直し、確実に動く状態に戻すことです。
例えるなら、家の水漏れを「どこから漏れているか→パッキン交換→水を流して確認」という順で直すのと同じです。焦って全部をばらすのではなく、症状から一歩ずつ進めます。

• Codexに既存アプリの修正を頼む具体的手順が分かる。
• エラー文の読み方と切り分けの型が身につく。
• APIキーを画面やコードに直書きせずに使う方法を学べる。

2. 完成イメージ

完成後の姿は、部屋に「修理セット」を置くイメージです。必要な工具（再現メモ、変更履歴、チェックリスト）がそろい、次に不具合が出ても同じ流れで直せます。

• VS Code上でCodexに指示し、ChatGPT APIアプリのエラーを修正して再実行できる。
• 小さなログ出力とテスト手順書が付く。

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

新しい言葉は家の修理にたとえると分かりやすくなります。症状=エラー文、原因特定=切り分け、修理道具=Codexです。
Codexはコードを読み、改善案を出す強い助っ人ですが、家の合い鍵（APIキーなどの秘密情報）は渡しません。鍵は常にあなたが持ち、金庫（環境変数）にしまいます。
直し方は「再現→修正→確認」です。大工さんが小さく部品を替えて都度水を流して漏れがないか確かめるのと同じく、一度に大改造はしません。

4. 対象読者

• ChatGPT APIの簡単なアプリを作った初心者。
• 業務で小さな修正・保守を任される人。
• 中学生でも理解できる説明が欲しい人。

たとえるなら、学校の理科実験で道具の扱いに慣れていない人でも、順番に安全に操作して結果を観察できるように道案内します。

5. 必要なものと入れ方

ここでは道具の意味と、安全にそろえる手順を示します。どれも無料で入手できますが、料金や仕様は変わる場合があります。最新情報は公式サイトで確認してください。

VS Code

1. これは何？：ノートにきれいに書く下敷きのような存在。コードやメモを整理して作業しやすくします。
2. 用意するもの：インターネットにつながるPC、ブラウザ、Microsoftアカウント（任意）。
3. 入れ方・開き方：
   ・ブラウザで公式サイトを開く。https://code.visualstudio.com/
   ・Windowsは「Download for Windows」を押してインストーラーを実行。案内に従って「Install」。
   ・macOSは「Download for macOS」を押し、Zipを展開してアプリをApplicationsへドラッグ。
   ・アプリを起動する。
4. 最初の設定：日本語表示にしたい場合は左の歯車→Language→Japaneseを選択。サインイン（任意）は右上の人型アイコンから。
5. できたか確認：「Welcome」画面が開き、左に「Explorer」「Search」などのアイコンが見えたらOK。

OpenAIアカウント

1. これは何？：遊園地の入場券。APIを使うための身分証明です。
2. 用意するもの：メールアドレス、支払い方法（必要に応じて）。
3. 入れ方・開き方：
   ・ブラウザでOpenAIのアカウントページを開く（公式ドキュメントから案内）。https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
   ・案内に従ってサインアップ/サインイン。
4. 最初の設定：APIキーの作成は次章で解説。ここではアカウントに入れることを確認。
5. できたか確認：自分のアカウント名が表示され、ダッシュボードに入れる。

OpenAI Codex（VS Code拡張）

1. これは何？：隣に座る頼れる先輩。あなたのメモ（コード）を読み、直し方を提案します。
2. 用意するもの：VS Code、OpenAIの利用資格（ChatGPTアカウントまたはOpenAI APIキーでサインイン）。
3. 入れ方・開き方：
   ・VS Code左の四角いアイコン「Extensions（拡張機能）」を押す。
   ・上部の検索ボックスに「Codex」と入力。
   ・OpenAIのCodex拡張を選び「Install」を押す。
   ・インストール後、拡張のページに現れる「Sign in」や「Connect」を押す。
   ・左サイドバーか下部パネルにCodexのチャット欄が現れるので開く。
4. 最初の設定：拡張の案内に従い、ChatGPTアカウントまたはOpenAI APIキーでサインイン。プロジェクト用のフォルダをVS Codeで開く。
5. できたか確認：「Codex」またはそれに相当する名前のチャット欄が開き、メッセージを送れる。

小さなChatGPT APIアプリ

1. これは何？：実験台になるミニアプリ。文章要約や質問応答など小さな機能でOK。
2. 用意するもの：前回の記事の成果物を持っている人はそれを使えます。前回の第3回で用意した要約アプリも利用可能です。
3. 入れ方・開き方：VS Codeでフォルダを開く（File→Open Folder）。
4. 最初の設定：プロジェクト直下に「docs」「logs」などの空フォルダを作るのは後でCodexに任せます。
5. できたか確認：エクスプローラーにアプリのファイルが表示される。

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

今回は「簡易修理キット」を作ります。家で言うと、懐中電灯（ログ）、工具箱（修正手順）、交換した部品のメモ（変更履歴）、点検チェック表（動作チェックリスト）です。

• 再現メモ：どう操作するとエラーが出るか。
• 修正手順：何をどの順番で直したか。
• 変更履歴：いつ、どのファイルを、なぜ変えたか。
• 動作チェックリスト：成功・失敗・混雑（レート制限）時の期待する表示。

フォルダ構成の例：
・docs/issue-repro.md（再現メモ）
・docs/fix-plan.md（修正手順）
・docs/changelog.md（変更履歴）
・docs/checklist.md（動作チェック）
・logs/app.log（ログ保存先）

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

目的を確認する

目的は、VS CodeにCodexのチャットを出し、アプリのフォルダを開ける状態にすることです。道具が机に並び、すぐ作業できる状態がゴールです。

画面で行う操作

• VS Codeを起動し、拡張機能から「Codex」を検索→OpenAIのCodex拡張を「Install」。
• 拡張ページの「Sign in」からサインイン。
• 左の「Explorer」でアプリのフォルダを「Open Folder」。
• サイドバーまたは下部の「Codex」チャットを開く。

成功の見分け方と次への橋渡し

• Codexのチャット欄にメッセージが打てる。
• エクスプローラーにアプリのファイルが見える。

うまくいかない場合は、拡張のインストール状態とサインイン状態を確認しましょう。

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

なぜ必要か

APIキーは合い鍵です。鍵をドアに貼り付ける（画面直書き）と、誰でも家に入れてしまいます。環境変数という金庫にしまい、アプリからだけ取り出します。仕様や手順は変わる可能性があるため、必ず公式ヘルプを確認してください。

画面で行う操作

• ブラウザで公式ヘルプを開き、APIキーの作成手順を確認。API Keys: official help
• キーを発行したら、値をそのまま画面やドキュメントに貼らない。
• VS Codeのワークスペースで、環境変数ファイル（.env）の運用をCodexに実装してもらいます（次章の依頼に含めます）。
• .envはバージョン管理に含めないよう、無視設定（.gitignore相当）もCodexに依頼します。

成功の見分け方

• アプリのコードや設定画面に、APIキーの実値が出ていない。
• ランタイムでは環境変数から安全に読み込める設計になっている（次章でCodexに実装依頼）。

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

ここからが本番です。Codexに、既存コードの読み込み、エラーの再現、最小修正、テストとログ整備までを依頼します。依頼は長くてもOK。必要な条件をすべて含め、小さく確実に直す方針を伝えます。

送る前の準備

• 今のアプリの目的と、どの画面・操作でエラーが起きるかを一言で書く。
• 直近のエラーメッセージをVS Codeの出力パネルからコピー（APIキーなどの秘密は含めない）。
• 「安全に扱う条件」を明記する（APIキーは.envに保存、ログに秘匿情報を出さない等）。

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

あなたはVS Code内で動くOpenAI Codexです。以下の小さなChatGPT APIアプリの「エラー再現→原因の切り分け→最小修正→確認」を段階的に手伝ってください。

目的：文章を入力するとChatGPT APIで要約を返すミニアプリです（前回の成果物）。
現象：操作A（起動→入力→送信）で、エラーが表示され動きません。直近のエラー文：<ここにエラー文を貼る（APIキーなどの秘密は伏せる）>

やってほしいこと：
1) プロジェクト構成を読み、再現手順をdocs/issue-repro.mdに作成。
2) 切り分けのための簡易ログ出力を追加（logs/app.log）。秘匿情報（APIキーや入力の生文）はログしない。
3) 最小の修正で直す案を提案し、私に確認を取りながら差分パッチ形式で変更。
4) .envでOPENAI_API_KEYを読み込む設計を導入。サンプルとして.env.exampleを用意。実値は私に貼らせない説明を書いて。
5) 実行と確認の手順をdocs/checklist.mdに作成（成功/失敗/429レート制限を区別できる期待結果付き）。
6) 変更点の理由をdocs/fix-plan.mdに、履歴をdocs/changelog.mdに追記。
7) 失敗時に私が貼るべき追加情報（ログ断片・画面の文言）を指示して、質問してから次の提案をして。

前提：
- VS Code上で実行します。OS依存の操作は避けてください。
- APIキーは.envから読み、コードや画面に直書き禁止。
- コマンドやコードの入力は、あなたが提案・生成し、私が貼り付ける形にしてください。

最後に、動作確認のための最小テスト（ユニットまたはスクリプト）も用意してください。

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

• docs/以下の4ファイルが作られたか、内容が目的に合っているか。
• ログ出力が増えたが、秘匿情報は含まれていないか。
• .env.exampleができ、APIキーの実値を貼らずに動かせる説明が付いているか。
• 差分パッチの提案が具体的か（どのファイルのどの行をどう直すか）。

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

目的

修正後のアプリが、成功・失敗・レート制限の3パターンで想定どおりに振る舞うかを確認します。交通信号を一つずつ確かめるイメージです。

画面で行う操作

• Codexが提示した実行手順に従って起動。
• 短いテキストを入力して送信。成功時の返答が来るかを確認。
• テストスクリプトがある場合は実行し、全て緑（パス）になるかを見る。

期待する結果

• 成功：要約結果が表示され、logs/app.logに時刻と簡潔な処理結果が記録される（秘匿情報なし）。
• 失敗：docs/checklist.mdに書いた想定どおりのエラーメッセージになり、次のアクションが分かる。
• 429：一定時間待つ、再試行回数を抑えるなどの案内が表示される。

ログの見方と保存

logs/app.logを開き、時刻順に処理の流れを確認します。家の電気の系統図を見るように、どこで止まったかが分かります。必要な断片はdocs/issue-repro.mdに貼って、次回の参考にしましょう。

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

失敗時の追加情報の渡し方

失敗したら、焦らずに「何をしたら」「どの画面で」「どんな文言が出たか」を短くまとめ、ログの断片を添えてCodexに渡します。医者に症状を伝えるカルテのように、要点だけ正確に。

差分パッチの依頼

「このファイルのこの行をこう変える」と指定した差分パッチを出してもらうと、直し過ぎを防げます。大工さんが必要なネジだけ交換するイメージです。

ロールバックとブランチ最小ルール

• うまくいかなければ、直前の状態に戻す（ロールバック）。
• 大きめの修正は別の枝（ブランチ）で試し、動いたら合体（マージ）。
• .envなど秘密を含むものは、どの枝でもコミットしない。

12. よくあるエラー

エラーの仕様や対処は変わることがあります。必ず公式ガイドで最新情報を確認してください。参照：OpenAI API Error codes

401/403 認証・権限エラー

• 画面で見えること：UnauthorizedやForbidden、Invalid API keyなど。
• よくある原因：APIキー未設定、打ち間違い、失効、権限不足。
• 最初に確認する場所：.envのキー名、読み込み箇所、環境の切り替え、請求設定。
• Codexに送る質問：

  この実行ログの401/403の原因を切り分けたいです。コード側のキー読み込み（環境変数）とAPI呼び出し部分を点検し、ダミー値での動作確認手順を提案してください。秘匿情報は貼りません。

429 レート制限

• 画面で見えること：Rate limit exceeded など。
• よくある原因：短時間にリクエストが集中。
• 最初に確認する場所：再試行の待機（バックオフ）、同時実行数、リクエストサイズ。
• Codexに送る質問：

  429が継続して出ます。指数バックオフと最大リトライ回数、ユーザー向けの案内表示を最小修正で追加する差分パッチをください。ログには回数のみを残し、入力内容は記録しないでください。

5xx 一時エラーとタイムアウト/ネットワーク

• 画面で見えること：500, 502, 503, Timeout など。
• よくある原因：一時的なサーバ側問題や回線不調。
• 最初に確認する場所：リトライ戦略、タイムアウト設定、ネットワーク状態。
• Codexに送る質問：

  5xxやタイムアウトが起きます。ユーザーに待機メッセージを出し、短いタイムアウト後に限度付きで再試行する実装を追加するパッチを提案してください。UIメッセージ文も含めてください。

モデル名不一致や入力サイズ超過

• 画面で見えること：model not found、context length exceeded など。
• よくある原因：存在しない/利用不可のモデル名、入力が長すぎる。
• 最初に確認する場所：モデル名の綴りと提供状況、入力の分割や要約。
• Codexに送る質問：

  モデル名エラー/入力サイズ超過を解消したいです。利用可能なモデルへ安全に切り替える方法と、長文を分割して順次要約する簡単なヘルパーの追加パッチをください。仕様確認の出典リンクも添えてください。

13. 次に試すこと

• プロンプトのテンプレート化：再現→修正→確認の依頼文を雛形にして再利用。
• 小さな監視ログの自動化：成功/失敗/429の回数を日付ごとに集計。
• 簡易UIでのエラー表示：ユーザーに分かりやすい案内文を出す。

14. まとめ

小さく直して確かめる流れを覚えれば、エラーは怖くありません。
Codexには、具体的な「症状」「再現手順」「期待する直り方」を渡しましょう。家の修理と同じで、道具を正しく使えば短時間で安全に直せます。
このシリーズは続きます。必要に応じて、前回の第3回の記事の成果物を使って進めても構いません。

関連記事

2026年はROI勝負の年へ──企業が今すぐ着手すべきAIエージェント導入設計とKPI設計の実務

スマート農業が食糧危機を救う──AIとエンジニアリングで50年後の飢饉に備える

AIを読む人から使う人へ：中学生にも分かるAIアプリをリリース前に確認するチェックリスト #5

Lean×AIで現場が変わる：BPM再設計とROI最大化の実践フレームワーク