秘密情報の漏洩を防ぐ

あなたの家には、玄関の鍵がありますよね。この鍵をコピーして誰かに渡したり、玄関の前に置きっぱなしにしたら大変です。Webアプリにも同じように「絶対に他人に見せてはいけない鍵」があります。

このレッスンでは、AIツール（＝AIを使って作業を助けてくれるソフト）を活用しながら、秘密の鍵を安全に管理する方法を15分で身につけます。レッスンが終わるころには、「自分のアプリの鍵は安全だ」と自信をもって言えるようになります。

秘密情報（＝シークレット）とは、あなたのアプリが外部サービスとやり取りするときに使う「合言葉」のようなものです。具体的には次の3種類があります。

• APIキー（＝外部のサービスと通信するための合言葉）…例：SupabaseやOpenAIのキー
• データベースのパスワード …データの保管庫にアクセスするための鍵
• 認証トークン（＝「この人は本人です」と証明するための鍵）

これらが漏れると、他人があなたのサービスを好き放題に使えてしまいます。最悪の場合、高額な請求が届いたり、ユーザーの個人情報が流出する恐れがあります。

良い例と悪い例

• ✅ 良い例：NEXT_PUBLIC_SUPABASE_URL のように NEXT_PUBLIC_ で始まる値は「もともと公開してよい設定」なので、そのまま使ってOKです
• ❌ 悪い例：SUPABASE_SERVICE_ROLE_KEY のような管理者権限の鍵をコードの中に直接書いてしまうと、プロジェクトを共有した全員に見えてしまいます

秘密情報が漏れる典型的なパターンは次の3つです。料理にたとえると、「レシピノートにクレジットカード番号を書いてしまう」ようなミスです。

1. コードに直接書いてしまう — プログラムの本文にパスワードを書くと、そのファイルを共有しただけで漏洩します
2. Gitにコミット（＝変更履歴として保存）してしまう — 公開プロジェクトでは履歴を世界中の誰でも見られます。一度記録されると、削除しても痕跡が残ることがあります
3. ブラウザに表示してしまう — サーバー側だけで使うべき鍵を画面に出すと、ユーザーのブラウザから見えてしまいます

秘密情報は .env（＝ドット・エンブイ、環境設定ファイル）という名前のファイルにまとめて保存します。これは家の中の「金庫」のようなものです。鍵をポケットに入れっぱなしにせず、金庫に入れて管理するイメージです。

プロジェクトのルート（＝一番上のフォルダ）に .env ファイルを作りましょう。

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOi...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOi...（←これは絶対に公開しない！）

各値は Supabase のダッシュボード（＝管理画面）の「Settings → API」からコピーできます。

AIに手伝ってもらう：.env ファイルの作成

Claude Code や Cursor を使っている場合は、次のように頼むと .env ファイルのひな形を作ってくれます。

プロンプト例：「このプロジェクトで必要な環境変数の一覧を .env.example として作成してください。値はダミーにして、各行にコメントで説明をつけてください」

AIが作った .env.example（＝見本ファイル）を元に、本物の値を入れた .env を自分で作ります。.env.example は見本なので公開しても安全です。

良い例と悪い例

• ✅ 良い例：.env に秘密情報を書き、コードからは process.env.SUPABASE_SERVICE_ROLE_KEY のように名前で呼び出す
• ❌ 悪い例：コードの中に "eyJhbGciOi..." と直接書いてしまう

.env ファイルを作っただけでは不十分です。Git（＝ファイルの変更履歴を管理するツール）がそのファイルを記録してしまう可能性があります。

.gitignore（＝ジット・イグノア、「このファイルは記録しないで」とGitに伝えるリスト）に次の1行を追加しましょう。

.env

これで .env ファイルはGitの管理対象から外れます。金庫に「開封禁止」のシールを貼るイメージです。

AIに手伝ってもらう：.gitignore の確認

プロンプト例：「このプロジェクトの .gitignore を確認して、.env や秘密情報が含まれるファイルが無視リストに入っているかチェックしてください。足りない項目があれば追加してください」

もし .env をすでにGitに登録してしまった場合は、記録から外す必要があります。次のコマンドを実行してください。

git rm --cached .env

このコマンドは「Gitの記録から .env を外す（パソコン上のファイル自体は消えない）」という意味です。

そのあと、.gitignore の変更をまとめて保存します。

git add .gitignore && git commit -m "Add .env to gitignore"

このコマンドは「.gitignore の変更を保存し、『.envをgitignoreに追加』というメモをつけて履歴に記録する」という意味です。

AIに手伝ってもらう：過去の漏洩チェック

プロンプト例：「このプロジェクトのGit履歴に、APIキーやパスワードが含まれるコミットがないか確認してください。eyJ や sk- などのパターンで検索してください」

AIが見つけてくれた場合は、その履歴を修正する必要があります。対処が複雑な場合は「見つかったコミットを安全に修正する方法を教えて」と続けて聞きましょう。

安全に設定できたかどうか、3つのチェックで確認しましょう。

チェック1：.gitignore を目視確認する

.gitignore をテキストエディタ（＝ファイルを開くアプリ）で開き、.env という行が含まれているか確認します。

チェック2：git status で確認する

次のコマンドを実行してください。

git status

結果のリストに .env が表示されなければ成功です。もし .env が赤や緑の文字で表示された場合は、.gitignore の設定がまだ反映されていません。

チェック3：コード内の秘密情報を検索する

エディタの検索機能（多くの場合 Ctrl+Shift+F または Cmd+Shift+F）で、次のキーワードを順番に検索してください。

• eyJ（APIキーの先頭によくある文字列）
• sk-（OpenAIのキーの先頭）
• password（パスワードの直書き）

これらがコードの中にヒットしなければOKです。

AIに手伝ってもらう：自動チェック

プロンプト例：「このプロジェクト全体を検索して、ハードコードされた（＝直接書き込まれた）APIキーやパスワードがないか確認してください。見つかった場合は環境変数に置き換える修正案を出してください」

Claude Code、Codex CLI、Cursor、ChatGPT などのAIツールを使うときにも、秘密情報の取り扱いに注意が必要です。

やるべきこと

• ✅ 「.env ファイルから環境変数を読み込むようにして」とAIに指示する
• ✅ .env.example（値がダミーの見本ファイル）を見せて「この形式で設定ファイルを使うように書いて」と頼む
• ✅ 秘密情報を扱うコードのレビューを「セキュリティの観点で確認して」と依頼する

やってはいけないこと

• ❌ チャット画面にAPIキーを直接貼り付けて「これを使って」と頼む
• ❌ .env ファイルの中身をそのまま貼り付ける
• ❌ スクリーンショットにAPIキーが映ったまま共有する

AIはとても便利ですが、チャットの履歴に秘密情報が残ると、それ自体がリスクになります。「AIには合言葉そのものではなく、合言葉の使い方を聞く」と覚えておきましょう。

以下の4つすべてに「はい」と言えれば、このレッスンは完了です。

• .env ファイルに秘密情報をまとめた
• .gitignore に .env を追加した
• git status で .env が表示されないことを確認した
• コード内に直接書かれた秘密情報がないことを検索で確認した