環境変数の仕組みを理解して.envを正しく書く

あなたがレストランを経営しているとしましょう。お客さんには「メニュー」だけを見せますが、厨房の「秘密のレシピ」や「仕入れ先の連絡先」は見せたくありませんよね。

プログラミングの世界でもまったく同じです。公開するWebサイトのコードと、絶対に見せてはいけないパスワードやAPIキー（＝外部サービスを使うための合言葉）は分けて管理します。この「金庫」の役割を果たすのが環境変数（＝プログラムが動くときに外から読み込む設定値）です。

このレッスンでは、環境変数をまとめて書く .env（ドット・イーブイエヌ）ファイルを自分で作り、AIツールを使って正しく動くことまで確認します。

環境変数は、プログラムの外に置いておく「設定メモ」です。なぜわざわざ分けるのでしょうか？

1. 安全のため — パスワードをコードに直接書くと、コードを誰かと共有したときに秘密が漏れます
2. 切り替えが楽 — 開発用と本番用で設定値を変えたいとき、ファイルを差し替えるだけで済みます
3. チームで共有しやすい — コードは共有して、秘密の設定だけ各自が手元に持つ運用ができます

良い例: .env ファイルに API_KEY=sk-abc123 と書いて、プログラムからは「API_KEYを読んで」と指示する

悪い例: プログラムのコードに直接 const apiKey = "sk-abc123" と書いてしまう → コードを共有した瞬間にパスワードが漏れます

まずは .env ファイルを作りましょう。

方法1: AIツールに頼んで作る（おすすめ）

Claude Code や Cursor を開いて、次のように指示してみましょう。

プロンプト例（Claude Code / Cursor）: 「このプロジェクトのルート（一番上のフォルダ）に .env ファイルを作ってください。中身はまだ空で大丈夫です」

AIがファイルを作ってくれたら、中身を一緒に確認しましょう。

方法2: 自分で手動で作る

1. プロジェクトの一番上のフォルダ（ルートフォルダ）を開きます
2. 新しいファイルを作り、ファイル名を .env にします（先頭のドットを忘れずに）
3. 保存します

良い例: ファイル名が .env（先頭にドットがついている）

悪い例: ファイル名が env.txt や env（ドットがないと認識されません）

注意: macOS では先頭がドットのファイルは「隠しファイル」になり、通常のファイル一覧に表示されません。Finder では Cmd + Shift + .（ドット）を押すと表示を切り替えられます。

.env ファイルの中に、設定したい情報を書き込みます。書き方は キー=値 の形で、1行に1つずつです。

DATABASE_URL=postgres://localhost:5432/mydb
SECRET_KEY=my_super_secret_password
NEXT_PUBLIC_APP_NAME=MyApp

書き方のルール

AIに書き方を確認してもらう

書いた .env が正しいか不安なときは、AIに聞いてみましょう。

プロンプト例（ChatGPT / Claude）: 「以下の .env ファイルの書き方に間違いがないかチェックしてください」 （この後に .env の中身を貼り付ける）

プロンプト例（Claude Code / Cursor）: 「.env ファイルを読んで、書式の問題があれば教えてください」

ファイルを作っただけでは安心できません。実際にプログラムから読み込めるか確認しましょう。

ターミナル（＝コマンドを打ち込む黒い画面）で以下を実行します。

node -e "require('dotenv').config(); console.log(process.env.SECRET_KEY)"

このコマンドは「.env ファイルを読み込んで、SECRET_KEY の値を画面に表示する」という意味です。

my_super_secret_password と表示されれば成功です。undefined と出た場合は、ファイルの場所か書き方が間違っています。

dotenv が入っていない場合: pnpm add dotenv を先に実行してください。これは「.envファイルを読み込むための道具をインストールする」コマンドです。

うまくいかないときはAIに聞く

プロンプト例（Claude Code / Cursor）: 「.env ファイルを作ったのに undefined と表示されます。原因を調べてください」

AIがファイルの場所、ファイル名、中身のスペルミスなどを自動でチェックしてくれます。

.env ファイルには秘密の情報が入っています。次の2つのルールを必ず守りましょう。

ルール1: .gitignore に追加する

Git（＝ファイルの変更履歴を管理するツール）を使っている場合、.env ファイルをうっかりインターネットに公開してしまう事故が起きやすいです。.gitignore（＝Gitに「このファイルは無視して」と伝えるリスト）に追加して防ぎましょう。

プロンプト例（Claude Code / Cursor）: 「.gitignore に .env を追加してください。まだ .gitignore がなければ作ってください」

ルール2: .env.example を用意する

チームメンバーや将来の自分のために、「どんな環境変数が必要か」のテンプレートを残しておきます。値は空にするか、ダミーの値を入れます。

# .env.example（このファイルは共有してOK）
DATABASE_URL=ここにデータベースのURLを入れる
SECRET_KEY=ここに秘密鍵を入れる

良い例: .env.example に変数名だけ書いて共有する

悪い例: .env ファイルそのものをチャットやメールで送る

以下の3つすべてにチェックがつけば、このレッスンは完了です。

• .env ファイルがプロジェクトのルートフォルダにある
• ターミナルで node -e "require('dotenv').config(); console.log(process.env.SECRET_KEY)" を実行して、自分が設定した値が表示される
• .gitignore に .env が含まれている（Git を使っている場合）