この回のゴール
- できること：入力文からAIの返信案を1クリックで生成し、画面またはターミナルに表示できる。
- 用意するもの：PC、インターネット、VS Code、OpenAIアカウント、APIキー。
- 大切な約束：APIキーは.envに保存し、画面やコードへ直書きしない。料金と仕様は変わるため価格ページと公式ドキュメントで確認する。
最初に知っておきたい用語
- ChatGPT API：OpenAIのAIに文章で頼みごとをして、文章で答えをもらう仕組み。
- APIキー：その仕組みを使うための秘密の合言葉。持ち主だけが使える鍵。
- 環境変数：アプリが動くときに外から渡す設定。鍵をコードに書かずに渡せる袋のようなもの。
- .env：環境変数をファイルに書いておくメモ帳。中身は秘密扱いにする。
- VS Code：プログラミング用の編集アプリ。作業机のような場。
- 拡張機能：VS Codeに機能を足す部品。必要に応じて後から付ける。
- OpenAI APIダッシュボード：利用状況やキーを管理する画面。使いすぎや設定を確認できる。
1. この記事でできること
この記事では、VS CodeとAIコーディングエージェント（以降「Codex」と呼びます）を相棒に、入力文に対するAI返信案を返す最小アプリを作ります。
スマホの「定型文」ボタンの賢い版を、自分用に作るイメージです。
- 準備〜実行〜検証〜修正の一連を体験。
- APIキーを安全に扱う方法（.envと環境変数）を理解。
- モデルや口調を後から調整可能。
2. 完成イメージ
- 1画面：入力欄、送信ボタン、返信案表示。
- CLI/ターミナル実行でもOK（質問→返信案が数秒で表示）。
- 設定ファイルの数行変更でモデル差し替え可能。
たとえば、売店で「おすすめある？」と聞くと店員さんが合いそうな品を提案する感じ。あなたの入力に合わせてAIが丁寧に提案します。
3. 最初に知っておきたいこと
専門用語を短く整理します。
- APIは自販機の投入口のようなもの。お願い（お金やボタン）を入れると結果（飲み物）が出てきます。
- APIキーは鍵。持ち主だけが使える秘密の合言葉で、落とすと他人に使われる危険があります。
- .envに保存してコードや画面に直書きしないのは、鍵を財布に入れて上着ポケット（コード）にむき出しで入れないのと同じ理由です。
料金やモデルは変わることがあります。必ずOpenAI API Quickstartと価格ページで最新を確認してください。
4. 対象読者
- ChatGPT API初体験の人。
- PythonやVS Codeが未経験でもOK。
- 仕事や学習で返信作成を時短したい人。
なお、APIキーの安全な基本は前回の記事で説明しました。まだの方は短く目を通してください：AIを読む人から使う人へ：中学生にも分かるAPIキーを安全に扱う基本 #1
5. 必要なものと入れ方
ここでは、使う道具ごとに「これは何？」から「できたか確認」まで具体的に進めます。
VS Code
- これは何？：作業机のような編集アプリ。ファイルを並べて、AIに依頼して作ってもらう場です。
- 用意するもの：PC、インターネット、ブラウザ。
- 入れ方・開き方：
- 公式サイトを開く：ブラウザで「Visual Studio Code」で検索、またはhttps://code.visualstudio.com/。
- ダウンロード：トップの「Download for Windows/macOS」ボタン。
- インストール：案内に従って次へ（Next）を押す。
- 起動：アプリ一覧から「Visual Studio Code」を開く。
- 最初の設定：日本語表示にしたい場合は、左の四つの四角アイコン「Extensions（拡張機能）」→検索欄に「Japanese Language Pack」。
- できたか確認：「コードの青い画面」「Welcome」「Get Started」などの文字が見えたらOK。
Python（本体）
- これは何？：AIと会話するアプリを動かすための言語。スマホでいうOSに近い役割。
- 用意するもの：管理者権限（インストール時）、インターネット。
- 入れ方・開き方：
- 公式サイト：https://www.python.org/downloads/。
- Windows：ダウンロードしたインストーラーで「Add Python to PATH」にチェック→Install Now。
- macOS：pkgを開いて案内に従う。
- 最初の設定：VS Codeの上部メニュー「View（表示）」→「Terminal（ターミナル）」を開き、「python –version」と入力してバージョンが出るか確認（表示だけ、入力は後でCodexに頼みます）。
- できたか確認：「Python 3.x.x」の表示があればOK。
OpenAIアカウントとAPIキー
- これは何？：ChatGPT APIを使うための会員情報と鍵です。
- 用意するもの：メールアドレス、支払い設定（必要に応じて）。
- 入れ方・開き方：
- アカウント作成：https://platform.openai.com/でSign up。
- APIキー作成：API keysのヘルプの案内に沿って「+ Create new secret key」。
- 最初の設定：Usage（利用状況）画面で請求設定や使用量を確認。ダッシュボード左メニュー「Usage」→本日の使用量がグラフで見えればOK。
- できたか確認：「API keys」一覧に新しいキーが表示され、「Usage」に棒グラフ領域が見える。
VS CodeのAIコーディング環境（Codex）
- これは何？：コードをAIに作ってもらうための会話窓。家庭教師に「これ作って」と頼む感じです。
- 用意するもの：VS Code、OpenAIアカウント（サインイン用）。
- 入れ方・開き方：
- 拡張機能ビュー：左の「Extensions（拡張機能）」。
- 検索語：上部の検索欄に「OpenAI」。公式の案内に沿って、OpenAIと連携できる拡張のチャット欄を開きます（環境により名称や導線が変わります）。
- 代替導線：コマンドパレット（Cmd/Ctrl+Shift+P）→「OpenAI」や「Chat」などで検索→チャットを開くコマンドを実行。
- 最初の設定：サインイン要求が出たら画面の「Sign in」→ブラウザで承認→VS Codeに戻る。チャット欄に「こんにちは」と打てる状態に。
- できたか確認：VS Codeのサイドバーにチャット欄が現れ、送信ボタン（紙飛行機アイコンなど）が見える。
注：本記事では、VS Code内のAIコーディングエージェントを「Codex」と呼び、OpenAIのモデルを使ってコードを生成してもらいます。拡張機能の名称や導線は環境で異なるため、拡張の検索語とコマンドパレット経由の代替手順を併記しました。
6. エージェントと作るものの全体像
作るものは「返信文ジェネレーター」の最小版です。お菓子作りでいえば、まずは材料3つで作るクッキーのような構成です。
- 最小構成：app.py、requirements（依存関係）、.env、簡易UI（CLIまたは極小Web）。
- データの流れ：入力→API呼び出し→返信案→表示。
- 安全設計：環境変数でAPIキー読み込み。.gitignoreで.envを除外。
- ワンクリック実行：.vscode/launch.json、tasks.jsonを用意。
7. 手順1: ツールを準備する
7-1 目的と流れ
フォルダを作り、VS Codeで開き、Codexに依頼できる状態にします。引っ越し前に部屋を片付けるイメージです。
7-2 操作：新しい作業フォルダを用意
- デスクトップで新しいフォルダを作成（例：reply-app）。
- VS Codeを開き、メニュー「File（ファイル）」→「Open Folder（フォルダーを開く）」→作ったフォルダを選択。
- 左上のフォルダ名がreply-appならOK。
7-3 操作：ターミナルを開く
- 上部メニュー「View（表示）」→「Terminal（ターミナル）」。下部に黒いパネルが出ます。
- PowerShellやbashの表記が見えればOK。
7-4 つまずいたら
- フォルダが開けない：権限不足の場合はデスクトップ直下などに作成。
- ターミナルが出ない：Cmd/Ctrl+`（バッククォート）でも開けます。
8. 手順2: APIキーを安全に用意する
8-1 目的と理由
鍵（APIキー）を作り、.envに保存して外から読み込む形にします。金庫に鍵を入れて、必要なときだけ取り出すイメージです。
8-2 操作：キーを作る
- ブラウザでOpenAI Platform→右上の「View API keys」→「Create new secret key」。
- キーは一度しか全文を表示できません。コピーして安全に保管（後で.envへ）。
8-3 操作：Usageを確認
- 左メニュー「Usage」を開き、グラフと本日の使用量を確認。請求設定が必要なら「Billing」から設定。
8-4 つまずいたら
- キーが見つからない：API keysヘルプを参照。
- 価格が不安：Pricingで最新を確認。
9. 手順3: エージェントにアプリを作ってもらう
9-1 目的
Codexに、最小の返信アプリ一式を作ってもらいます。料理でレシピと買い物を丸ごと頼む感じです。
9-2 操作：Codexのチャットを開く
- VS Code左の拡張のチャット欄、またはコマンドパレット（Cmd/Ctrl+Shift+P）→「OpenAI」や「Chat」でチャットを開く。
このボックスをコピーして、VS Code内のCodexチャットに送ります。
Codexに送るプロンプト
目的：VS Codeで実行できる「返信文ジェネレーター」の最小アプリを、手書きコードなしで構築してください。
必須要件：
- 言語はPython。OpenAIの最新公式Python SDK（openai>=1系）を使用し、非推奨APIや旧エンドポイント（/v1/completionsなど）は使わないこと。Chat Completions APIで実装。
- ファイル構成：app.py、requirements.txt、.env.sample、.gitignore、README.md、（CLIの場合）簡易入出力、（Web最小UIの場合）超軽量のFlask or FastAPIのいずれか1つ。どちらでもよいが、初学者向けにCLIを既定とし、WebはオプションとしてREADMEに追記。
- APIキー管理：python-dotenv等で.envから環境変数OPENAI_API_KEYを読み込み。コードと画面にキーの実値を出さない。READMEに手順を明記。.gitignoreで.envを除外。
- 追加安全：初回起動でキー未設定を検出し、コンソールに安全な設定手順をガイド表示（キーの場所、.envへの書き方、ダッシュボードのURL）。
- エラーハンドリング：ネットワーク、認証、レート制限を捕捉し、ユーザーに短い再試行案内と待機秒の目安（例：5〜20秒）を表示。ログはprintでOK。
- 実行：ワンクリックで動かせるよう、.vscode/launch.json と tasks.json を用意し、Run and Debugから実行できる設定を追加。
- 機能：
1) ユーザーの入力（プロンプト）を受け取る。
2) 返信スタイル（丁寧/カジュアル/クレーム対応）を選べるオプション。
3) Chat Completionsのtemperature, max_tokens, modelを設定ファイルまたは定数で調整可能。
4) 出力を画面に表示し、簡易な区切り線で読みやすく。
- 動作確認：
- テスト入力例：「会議の日程変更をお願いする短い返信」「商品の到着遅延へのおわび文」などを使って、3パターンのスタイルで1件ずつ試す。
- 成功の判断：AIの返信文が数秒で表示され、エラーなく終了。
- README：セットアップ（Python、仮想環境任意、pip install -r requirements.txt、.envの作成）、使い方（CLI実行、スタイル切替）、トラブルシュート（よくあるエラーと対処）、価格と仕様は変動する旨とOpenAIのPricingとQuickstartのリンクを記載。
- 依存関係：openai、python-dotenv（Webを付けるならFlask or FastAPI）。
- ライセンス：未指定でOK。
質問歓迎：不明点があれば実装前に確認してください。ファイルはすべて現在のフォルダに生成してください。Codexが作るものと、確認する点
- app.pyで、OPENAI_API_KEYを環境変数から読み込んでいるか。
- .gitignoreに.envが含まれているか。
- .vscode/launch.jsonとtasks.jsonが作られ、Run and Debugから実行できるか。
10. 手順4: 動かして確認する
10-1 目的
依存関係のインストール、起動、テスト入力、パラメータ調整までを行います。自転車のサドル高さを合わせて試し乗りする感覚です。
10-2 操作：インストールと起動
- ターミナルで、Codexが指示するコマンド（pip install -r requirements.txt など）を、必要に応じてCodexに実行方法をたずねながら進めます。
- Run and Debug（再生ボタン）から「Reply App」を選んで実行。
10-3 成功出力の例
CLIに次のような流れが見えたら成功です（例）。
- Enter your message: 会議の日程を1日ずらしても良いか相談したいです
- Style: 丁寧
- — AIの返信案 —
- ご担当者さま 本件、予定の都合により…（以下省略）
10-4 パラメータの調整
- model、temperature、max_tokensの場所をREADMEで確認し、数値を少しずつ変更。
- 例：温度を0.2→0.7にすると、表現が少し自由になります。
10-5 つまずいたら
- モジュールが見つからない：requirements.txtが入っているか、pipの実行ログを確認。
- Run and Debugに設定がない：.vscode/launch.jsonが生成されたかチェック。無ければCodexに再生成を依頼。
11. 手順5: エージェントと直す
11-1 出力が長すぎる/硬すぎる
- Codexに「max_tokensを減らし、文末を短く。敬体で簡潔に。」と依頼。
- スタイル用のプロンプトに「2〜3文で」などの制約を追加してもらう。
11-2 業務テンプレを切り替えたい
- 「丁寧/カジュアル/クレーム対応/社内連絡」をプルダウンや引数で選べるよう改修を依頼。
- 署名や差出人名を追記するオプションも追加依頼。
11-3 UIを少し変えたい
- 入力欄の幅やボタン名の変更、クリアボタン追加などを具体的に伝える。
- CodexにREADMEの更新も忘れず依頼。
12. よくあるエラー
APIキー未設定/権限エラー
- 見えること：”AuthenticationError”、”401 Unauthorized”。
- 原因：OPENAI_API_KEY未設定、キーの権限や請求設定。
- 最初に確認：.envのキー名、.gitignoreにより.envがコミットされていないか、Dashboardの「API keys」「Usage」「Billing」。
- 質問テンプレ：”.envでOPENAI_API_KEYを設定しましたが401が出ます。dotenvの読み込み位置と環境変数参照箇所を確認し、必要ならサンプルコードを示して直してください。”
Rate limit/ネットワーク
- 見えること：”Rate limit exceeded”、応答が遅い。
- 原因：短時間にリクエストが集中、回線不安定。
- 最初に確認：OpenAI Status、Usageのスパイク、待機秒（5〜20秒）で再試行。
- 質問テンプレ：”レート制限時に指数バックオフを組み込み、最大3回まで自動再試行する処理を追加してください。”
依存関係の未インストール
- 見えること：”ModuleNotFoundError”。
- 原因：requirements.txt未インストール、仮想環境のずれ。
- 最初に確認：pipのログ、Pythonのバージョン、仮想環境の有無。
- 質問テンプレ：”requirements.txtの内容を再生成し、pipの実行手順とRun and Debug統合手順をREADMEに追記してください。”
環境変数が読めない
- 見えること：キーは設定したのに”None”や空文字。
- 原因：.envの場所違い、dotenvの読み込み忘れ、キー名のタイプミス。
- 最初に確認：プロジェクト直下に.envがあるか、OPENAI_API_KEYの綴り。
- 質問テンプレ：”dotenvの読み込みをapp.pyの先頭に移し、.envの存在チェックとガイド出力を追加してください。”
13. 次に試すこと
- 履歴を保持して会話化（過去のメッセージをmessagesに渡す）。
- 署名・差出人名の自動付与（設定ファイルで管理）。
- 簡易保存（txt/CSVに追記）。
14. まとめ
最小機能→安全運用→改善のループで、小さく始めて確実に前進できました。料金・仕様は変わるため、都度QuickstartとText generationガイドを頼りに拡張していきましょう。次回は、履歴や保存などの便利機能を足して、日常でより使いやすくしていきます。
