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

完成後は、プロジェクト直下に.env（Git管理外）、.gitignore、package.json、index.js、README.md、.github/workflows/ci.ymlがそろい、CIが成功する状態になります。

準備、キー発行、保存、生成、確認、失敗時の対応までをまとめて扱います。

この記事でできること

この記事では、APIキーを安全に扱う最低限の土台を、VS Code内のOpenAI Codexに依頼して作ります。技術的には、.envとdotenvでローカルの鍵を読み、.gitignoreで公開を防ぎ、GitHub SecretsをActionsで参照する形を整えます。
補足の比喩として、家の合鍵を金庫（.envとSecrets）に入れ、玄関（GitHub公開）に置かないイメージです。

• .envと環境変数、GitHub SecretsでAPIキーを安全に保管できる。
• VS Code＋OpenAI Codexに具体プロンプトを投げて最小構成を作れる。
• 万一の公開時に、失効と再発行を即時に行う流れを理解できる。

完成イメージ

完成すると、次の動きになります。まず技術的な挙動を示し、必要に応じて身近なたとえを補います（鍵は財布に入れて持ち歩かず、家の金庫と会社の金庫で分けるイメージ）。

• ローカル開発：.envに保存→dotenvで読み込み→キーはコードに直書きしない。
• リポジトリ：.gitignoreで.envを除外する。
• CI/CD：GitHub ActionsのSecretsにOPENAI_API_KEYを登録し、ワークフローで参照する。

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

APIキーはサービス利用の身分証です。漏れると不正利用や課金被害につながります。公式情報では「OpenAIのAPIキーは作成時のみ全体表示。失くしたら新規発行」（出典は本文末）と明記されています。料金や仕様は変わることがあるため、最新は公式ページを必ず確認してください。
補足の比喩として、家の鍵と同じで「見せない・置き忘れない・複製しない」を徹底します。

対象読者

次のような人を想定しています。技術説明を先に示し、比喩は補足にとどめます（小さな実験＝理科の自由研究のように、まず安全確認から）。

• APIを初めて使う人。
• 社内で小さなPoCを始めたい人。
• 中学生〜社会人の超入門者。

必要なものと入れ方

ここでは、使う道具の役割と導入を、入手→インストール→サインイン→確認の順で説明します。UIの表記は英語の場合があります（日本語UIでは名前が少し異なることがあります）。

VS Code

1. これは何？：プログラムを書くノート。フォルダ内のファイルを一覧し、編集できます。
2. 用意するもの：PC、ブラウザ、Microsoftアカウントは任意。
3. 入れ方・開き方：公式サイト https://code.visualstudio.com/ を開く→Downloadを押す→インストーラーに従って入れる→アプリを起動する。
4. 最初の設定：日本語表示にしたい場合は、左下の歯車→Command Palette→”Configure Display Language”→Japanese。
5. できたか確認：上部タイトルに「Visual Studio Code」、左のサイドバーに「Explorer」「Extensions」などのアイコンが見える。

OpenAI Codex拡張

1. これは何？：VS Codeの中で指示を書くと、必要なファイルや設定を提案・作成してくれるAIの相棒。
2. 用意するもの：OpenAIのアカウント（ChatGPTアカウントまたはOpenAI APIキーでサインイン）。
3. 入れ方・開き方：VS Code左の四つの四角アイコン「Extensions」をクリック→検索欄に「Codex」と入力→発行元がOpenAIの「OpenAI Codex」拡張を選ぶ→Installを押す→サイドバーのCodexアイコンをクリック。
4. 最初の設定：Codexパネル右上の「Sign in」→ブラウザで許可画面が開く→OpenAIのアカウントで承認→VS Codeに戻る→Codexの「New Chat」を押し、入力欄をクリック。
5. できたか確認：サイドバーに「Codex」アイコンが表示→拡張パネルに「New Chat」ボタン→チャット欄にカーソルが置ける。Marketplaceの拡張名・発行元名が表示されている。

注：Codexの提供や名称は変わる可能性があります。最新情報は拡張の詳細ページで確認してください。代替の列挙は本記事では行いません。

OpenAIアカウント

1. これは何？：OpenAIのサービスを使うための会員登録。APIキーを発行できます。
2. 用意するもの：メールアドレス、ブラウザ、支払い設定（必要に応じて）。
3. 入れ方・開き方：公式ヘルプのAPIキー案内 https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key を開く→記載の手順からAPI Keysページに進む。
4. 最初の設定：アカウントでサインイン→新しいSecret keyを作成。
5. できたか確認：「Create new secret key」で作成→キーが一度だけ全文表示される。

Node.jsとnpm

1. これは何？：JavaScriptをPC上で動かすエンジンと道具箱。
2. 用意するもの：PC、ブラウザ。
3. 入れ方・開き方：公式 https://nodejs.org/ にアクセス→LTS版をダウンロード→インストーラーに従って入れる。
4. 最初の設定：特になし。VS Codeからプロジェクトを開く準備をする。
5. できたか確認：VS CodeのCodexに「ターミナルを開いてNode.jsのバージョンを確認する手順を案内して」と頼み、その指示どおりの画面遷移で確認できる。

GitHubアカウント

1. これは何？：ソースコードを置いて共同作業できる場所。
2. 用意するもの：メールアドレス、ブラウザ。
3. 入れ方・開き方：https://github.com/ にアクセス→Sign upで登録→プロフィール設定→新しいリポジトリを作成。
4. 最初の設定：リポジトリ画面→Settings→Secrets and variables→Actions→New repository secretで鍵を登録する準備。
5. できたか確認：画面のパンくずが「Settings → Secrets and variables → Actions」と表示され、「New repository secret」ボタンが見える。

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

作るものは次の最小セットです。技術の要点を先に示し、補足の比喩は控えめに添えます（机の引き出し＝.env、会社の金庫＝Secrets）。

• Node.jsのサンプル（dotenvでOPENAI_API_KEYを読むindex.js）。
• .gitignore（.envを除外）。
• .github/workflows/ci.yml（GitHub ActionsでSecretsを参照し動作確認）。
• README.md（安全な扱いと動かし方）。

構成図イメージ：ローカル(.env)↔コード(dotenv)／GitHub(Secrets)↔Actions。

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

目的を確認する

VS CodeとOpenAI Codexを使える状態にし、Codexチャットを開けるようにします。ここが土台です。

画面で行う操作

• VS Codeを起動→左サイドバーの四角「Extensions」→検索に「Codex」→発行元OpenAIの「OpenAI Codex」をInstall。
• サイドバーのCodexアイコン→パネル右上「Sign in」→ブラウザで承認→VS Codeに戻る。
• Codexパネル→New Chat→入力欄をクリックして準備完了。

Codexに頼む内容

この段階では、環境確認の手順をガイドさせます（コマンドの直入力は依頼しません）。

例：「ターミナルの開き方と、Node.jsが入っているかを確認する画面手順を案内して。私が自分でコマンドは打たない前提で、次に進むチェックリストも出して。」

成功の見分け方

• Codexのチャット欄が使える。
• VS Codeの拡張パネルに「OpenAI Codex」の名称と発行元が表示。
• 案内どおりに画面が開け、Node.jsの確認手順が理解できた。

次に進む前の確認

Codexのチャットが開けること。Extensions→OpenAI Codex→Installedの表示があること。

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

目的を確認する

OpenAIのAPIキーを発行し、安全に保存します。キーは作成時のみ全文が見えます（公式情報）。

画面で行う操作

• OpenAIのAPIキー案内ページ https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key を開く。
• 指示に従い、アカウントへサインイン→「Create new secret key」で発行。
• この画面でのみ全文が見えるため、安全な場所に控える。画面を閉じたら再表示できない。

.envと.gitignoreの方針

.envは鍵を入れる私用メモ、.gitignoreは「.envをGitに入れない」約束です。財布に鍵を入れないのと同じ考え方です。

代替の環境変数

OSの環境変数に置く方法もあります。今回は.envを使い、CIではGitHub Secretsを使います。

GitHub Secretsへの登録

• GitHubリポジトリ→Settings→Secrets and variables→Actions→New repository secret。
• Nameに「OPENAI_API_KEY」、Valueにキーを貼り、Add secret。
• 画面のリストに「OPENAI_API_KEY」が表示される（値は伏せられる）。

次に進む前の確認

• APIキーの保存場所が「.env（ローカル）」「GitHub Secrets（CI）」で分かれている。
• 公開場所（README、コード、スクリーン共有）には貼っていない。

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

目的を確認する

Codexに、必要ファイル一式の作成を依頼します。読者はコードを打ちません。

画面で行う操作

VS CodeのCodexチャットに、次の依頼をそのまま送ります。

目的：APIキーを安全に扱う最小のNode.jsプロジェクトを、VS Code内で私の代わりに作ってください。
前提：私はコードやコマンドを直接入力しません。必要な操作は、VS Code上で私が押すべきボタンと画面遷移で案内してください。
作るもの：
- package.json（dotenvを依存に追加）。
- index.js（process.env.OPENAI_API_KEYをdotenv経由で読み、キーの存在だけを確認して"OK"を表示。キー自体は絶対に出力しない）。
- .env.example（OPENAI_API_KEY= の行だけを含める）。
- .gitignore（.env を含め、node_modules など一般的な除外も）。
- README.md（.envの使い方、OpenAI APIキーの安全な保存、GitHub Secretsの登録手順、漏えい時の初動）。
- .github/workflows/ci.yml（GitHub ActionsでOPENAI_API_KEYをsecretsから参照して、index.jsを実行する。ログにキーを出さない）。
安全なAPIキー管理：
- .envに実値は書かせず、ユーザーが自分で入れる前提。
- すべてのスクリプトとログでキーを表示しない。
- READMEに「キーは作成時のみ全体表示。失くしたら新規発行」の注意。
動作確認：
- ローカル：.envにOPENAI_API_KEYを入れたら、スクリプトが"OK"を表示すること。
- CI：GitHub Actionsでsecrets.OPENAI_API_KEYを使い、同じ確認を通すこと。
自己点検チェックリスト：
- [.envが.gitignoreに入っているか]
- [index.jsやログにキーを出していないか]
- [ci.ymlでsecrets参照になっているか]
分からないとき：
- 私に質問してから進めてください。ターミナルの開き方やGitHubへのプッシュ手順は、私がボタンで操作できるように画面パスで案内してください。

Codexが作るもの・確認点

• ファイルが自動生成される提案と、配置場所の案内が出る。
• .gitignoreに.envが含まれている。
• ci.ymlで${{ secrets.OPENAI_API_KEY }}を参照している。
• READMEに漏えい時の初動（失効・再発行・履歴の扱いをCodexに相談）が書かれている。

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

目的を確認する

ローカルとGitHub Actionsの双方で、キーが安全に参照され、値を出さずに動くかを確かめます。

画面で行う操作（ローカル）

• Codexに「.envの作り方と、index.jsを実行してOKが出るまでの画面手順を案内して」と頼む。
• 案内どおりに、.envにOPENAI_API_KEY=（自分のキー）を入れる操作を行う（キーは本文やチャットに貼らない）。
• 実行後、ターミナルの出力が”OK”であることを確認（キー文字列は出ない）。

画面で行う操作（GitHub Actions）

• Codexに「GitHubへプッシュする画面手順と、Actionsの実行結果を見る場所を案内して」と頼む。
• GitHubのリポジトリ→Actions→最新のWorkflow Runを開く。
• ログにキーが表示されていないこと、ジョブがSuccessであることを確認。

次に進む前の確認

• ローカル実行は”OK”だけが出力。
• ActionsはSuccess、かつSecrets参照になっている。

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

目的を確認する

漏れやすい点をCodexに点検してもらい、必要なら修正します。

Codexに送る依頼例（.envとログの点検）

Codexチャットに次を送ります。

プロジェクト全体を点検してください。チェックリスト：
- .envが.gitignoreに入っているか。
- スクリプトやREADME、CIのログにAPIキーが出ないようになっているか。
- GitHub Actionsのワークフローでsecrets参照が正しいか。
問題があれば、修正案と画面操作の手順で私を案内してください。

成功の見分け方

• 修正点がゼロ、または具体的な改善案が提示される。
• Codexの自己点検チェックがすべて緑（OK）の状態になる。

よくあるエラー

.envをコミットしてしまった

• 画面で見えること：GitHubで.envがファイル一覧に見える。
• よくある原因：.gitignoreに.envが無い、後から追加した。
• 最初に確認する場所：リポジトリのコミット履歴と.gitignore。
• 対処：OpenAIのキーは即時に失効・再発行（公式: https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key ）。履歴の消し方はCodexに依頼して、適切な手順（履歴から機密を取り除く方法）を案内してもらう。
• Codexへの質問：「履歴から.envを安全に取り除く手順を、私がクリックで進められる形で教えて。危険な操作は事前に確認して。」

process.envがundefinedになる

• 画面で見えること：実行時に環境変数が読めずエラー、”undefined”が表示。
• よくある原因：dotenvの読み込み漏れ、.envの場所や綴りの誤り。
• 最初に確認する場所：index.jsの先頭にdotenv設定があるか、.envのファイル名。
• Codexへの質問：「dotenvの設定確認と修正手順を案内して。ローカルとCIの両方で動くことをチェックして。」

ActionsでSecret未設定

• 画面で見えること：Actionsログに”secrets.OPENAI_API_KEY not found”などのメッセージ。
• よくある原因：リポジトリのSecrets未登録、環境（Environment）を分けた設定ミス。
• 最初に確認する場所：GitHub → Settings → Secrets and variables → Actions → リストにOPENAI_API_KEYがあるか。
• Codexへの質問：「Secretsの設定ミスを一緒に点検して。環境（Production/Staging）を使う場合の参照方法も教えて。」

次に試すこと

• ブランチ保護と環境別Secrets（Environmentごとに鍵を分ける）。
• 監査ログとローテーション（定期的に鍵を入れ替える運用）。
• 次は、AIを読む人から使う人へ：中学生にも分かるChatGPT APIでAI返信文生成アプリ作り #2で、最小のAPI呼び出しアプリを作ります。

まとめ

• 鍵は見せない・置かない・書かない。
• ローカルは.env、クラウドはSecretsで分離。
• 失敗したらすぐ失効・再発行（公式ページで最新の手順を確認）。

関連記事

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

AIを読む人から使う人へ：中学生にも分かるAIニュース自動収集・要約パイプラインを作る #1

AIを読む人から使う人へ：CodexでChatGPT APIアプリを作る #2

企業のAI活用に“安全設計”を――ピーター・G・ノイマンの教えでROIとリスクを同時に高める実務ガイド