「APIキーって、どこに書けばいいの？」「GitHubにあげたら危ないって聞いたけど、なぜ？」
私も恥ずかしい話、初めてアプリ開発した時はClaudeに言われるがままにAPIキーをチャットに貼り付けそのまま作成してしまいました。
その後、Xでチャット欄にAPIを貼り付けたらいけないという投稿を見にして、ゾッとしたのを今でも覚えています。
その後、子供を寝かしつけた後、APIキーの管理、ネットリテラシーについて調べました。
でも出てくるのはエンジニア向けのAPIキーの管理についての話ばかり。
この記事では、非エンジニアでも今日から実践できるAPIキー管理の基本3つを、具体的な方法とともに解説します。
📌 この記事はこんな方におすすめ
- ClaudeやChatGPTのAPIを使って個人アプリを作り始めた
- APIキーの扱い方がよくわからず、なんとなく不安
- GitHubに上げてもいいの？と迷ったことがある
- エンジニアではないが、セキュリティの基本だけ押さえたい
💡 この記事でわかること
- APIキーが流出するとどんな被害が起きるのか
- フロントエンド・GitHubへの書き方NG例と正しい置き場所
- Cloudflare WorkersのSecretsを使った本番環境での安全な管理方法
- AIツール（Claude Codeなど）への安全な指示の出し方
APIキーとは何か？なぜ流出が危険なのか
APIキーとは、ClaudeやChatGPTなどのAIサービスをプログラムから呼び出すための「個人専用の認証キー」です。
銀行のキャッシュカードに例えると、APIキーは暗証番号に相当します。
他人に知られれば、自分のアカウントで無制限にAIを使われてしまいます。
⚠️ 流出した場合に起きること
- AIサービスの使用料が自分のクレジットカードに課金される
- 短時間で数万〜数十万円の請求が発生した事例が実際にある
- GitHubなどの公開リポジトリに上げると、自動クローラーに即座に収集される
実際にGitHubにAPIキーを含むコードをうっかりプッシュし、数時間で大量の請求が来たという報告はネット上に多数あります。
作ることに夢中になっているときほど、セキュリティは後回しになりがちです。
でも、以下の3つを知っているだけで、リスクを大幅に下げられます。
APIキーを安全に管理する3つの方法
① APIキーはサーバー側だけで使う（フロントエンドに書かない）
最も重要なルールです。APIキーは「誰でも見える場所」には絶対に置いてはいけません。
以下の場所は、悪意のある人が簡単に覗けてしまいます。
| NG場所 | なぜダメなのか |
|---|---|
| HTMLファイルの中 | ブラウザのソースコードで誰でも確認できる |
| JavaScriptファイル（フロントエンド側） | ブラウザのデベロッパーツールで丸見え |
| iPhoneアプリの画面やコード | アプリ解析で取り出せる場合がある |
| GitHubにアップするファイル | 公開リポジトリなら世界中から閲覧可能 |
| READMEやチャット欄 | テキストとして残り続ける |
💡 正しい置き場所
サーバー側のコード（バックエンド）だけで読み込む設計にすれば、ブラウザやスマートフォンからはAPIキーの値が見えません。Cloudflare WorkersやVercelのような環境がこれにあたります。
② GitHubに上げないための .gitignore 設定
コードをGitHubで管理している場合、設定ファイルがうっかり一緒にアップされてしまうリスクがあります。これを防ぐのが .gitignore ファイルです。
プロジェクトのルートフォルダに .gitignore ファイルを作り、以下を書くだけでOKです。
.env
.env.*
.dev.varsこれだけで、これらのファイルはGitHubにアップされなくなります。複雑な設定は一切不要です。
💡 READMEに書くときの注意点
APIキーの使い方をREADMEで説明したい場合は、本物のキーは絶対に記載せず、必ずダミー表記にしてください。
# 悪い例（絶対にNG）
ANTHROPIC_API_KEY=sk-ant-api03-XXXXX
# 正しいダミー表記
ANTHROPIC_API_KEY=ここに自分のAPIキーを入れてください③ 本番環境はSecretsで管理する
CloudflareやVercelなどのホスティングサービスには、「Secrets（シークレット）」という安全な環境変数管理の仕組みが用意されています。
APIキーをここに登録することで、コードに直接書かずにサーバー側だけで安全に呼び出せます。
Cloudflare Workersでの設定手順：
- AnthropicなどのダッシュボードでAPIキーを発行する
- APIキーを手動でコピーする
- Cloudflare Workers の Secrets にキーを登録する
- コード内では
env.ANTHROPIC_API_KEYの形で呼び出す - ブラウザには一切値が出力されない
やってはいけない書き方（直書き）：
const apiKey = "sk-ant-xxxx"; // 本物のキーをコードに直書き正しい書き方（Cloudflare Workers）：
export async function onRequestPost({ request, env }) {
const apiKey = env.ANTHROPIC_API_KEY; // Secretsから安全に取得
// ここでAIにリクエストを送る（ブラウザからは見えない）
}💡 ローカル開発のときは？
.dev.vars ファイルにキーを書いて、自分のPC内だけで使います。このファイルも .gitignore に追加してGitHubには上げないようにしましょう。
AIツールへの指示にも注意が必要
Claude CodeやCursorなどのAIコーディングツールに作業を依頼する際、意外と見落とされがちなポイントがあります。
⚠️ 危険な指示の例
「.envファイルを確認して」
「APIキーが合っているか見て」
「.envを読んで設定して」このような指示をすると、APIキーの実際の値がAIツールの画面やログに表示される可能性があります。
代わりに、以下のテキストをコピーしてAIへの指示の冒頭に貼り付けるだけで、安全性が大幅に向上します。
セキュリティのため、.env / .dev.vars の中身は絶対に読まないでください。
確認してよいのは以下だけです：
・ファイルが存在するか
・.gitignore に .env が含まれているか
・コードが process.env.ANTHROPIC_API_KEY など環境変数経由で読んでいるか
APIキーの実際の値は表示・要約・ログ出力しないでください。📌 よくある誤解
コードに process.env.ANTHROPIC_API_KEY と書いてあっても、これはAIが .env ファイルを読む命令ではありません。
「アプリが実行時に、OSの環境変数からキーの値を取り出して使う」という意味です。AIに見えているのは変数名だけで、実際のキーの値（sk-ant-xxxx のようなもの）はAIには伝わりません。
まとめ：APIキー管理は「知っているか知らないか」の差
今回紹介した内容を整理します。
| やること | 具体的な方法 |
|---|---|
| ① サーバー側だけで使う | フロントエンドのコードやHTMLには書かない |
| ② GitHubに上げない | .gitignore に .env / .dev.vars を追加する |
| ③ 本番はSecretsで管理する | CloudflareやVercelのSecrets機能を使う |
AIツールへの指示でも、「.envの中身は読まないで」と一言添えるだけで安全性がぐっと上がります。
AIを使えば、非エンジニアでも個人でアプリを作れる時代になりました。「作れる」ことと「安全に使える」ことは、セットで身につけていく必要があります。
インターネットが普及したころ「パスワードは教えてはいけない」が常識になったように、「APIキーは外に出さない」もこれからの基本リテラシーになっていきます。
完璧じゃなくていいと思います。まず気にして調べるところからやってみてください。
はじめの一歩としては、「Claude CodeやCodexに私のAPI管理はセキュリティ的に大丈夫？と」聞いてみてください。
そこで危ないなと感じたら、この記事のURLをClaude Codeに貼り付けて、「この通りにAPI管理をしたいのでやってください」と伝えて見てください。
この記事がAPI管理について迷っている方の手助けになればいいなと思います。
最後まで読んでいただいてありがとうございました。
コメント