Vercelを使っていると必ず目にするけれど、実はよくわかっていない画面No.1。それが Environment Variables（環境変数） の設定画面です。
公式ドキュメントには「設定方法」は書いてあっても、「そもそもこれは何なのか？」「なぜ必要なのか？」という腹落ちする説明が少なく、結果として「設定したのに動かない！」というトラブルが後を絶ちません。
この記事では、いわゆる「雰囲気でデプロイしている」人に向けて、この画面が何をしているのかを徹底的に噛み砕いて解説します。
結論：これは何の画面？
一言で言えば、「アプリに渡す“裏設定”を登録する場所」 です。
コードには直接書きたくない値を、Vercelがアプリ起動時にこっそり渡してくれる仕組みです。
具体的に何をしているのか
この画面でやっていることは、たったこれだけです。
- Key：変数名（あとでコードから呼ぶ名前）
- Value：中身（APIキー・トークン・設定値など）
- Deploy：その値を使ってアプリを作り直す
つまり、Vercelに対して「この名前で、この値を、次のデプロイから使ってね」と教えている。それだけです。
なぜこんな仕組みが必要？
理由①：秘密を GitHub に置かないため
コードに直接秘密を書くのはNGです。
// ❌ ダメな例
const API_KEY = "sk-xxxxxxxx";これをGitHubに上げると、世界中にAPIキーが流出します。
代わりにこう書きます。
// ✅ 正解
const API_KEY = process.env.API_KEY;- 実体の値 → Vercelに置く
- コード → GitHubに置く
このように、安全な分業をするための仕組みです。
理由②：環境ごとに値を変えるため
実務では普通、環境によって使うキーが異なります。
- 本番（Production） → 本番用 APIキー
- Preview → 検証用 APIキー
- ローカル → ダミーキー
この画面は、「どの環境で、どの値を使うか」を切り替える司令塔の役割を果たしています。
初心者が一番ハマるポイント（バイブコーダー向け）
「設定したのに動かない」ときは、だいたい以下のどれかです。
❌ 設定したのに反映されない
👉 Deploy を押していない
環境変数は「次のデプロイ」からしか使われません。値を変更したら、必ず再デプロイ（Redeploy）が必要です。
❌ console.log したら undefined
👉 フロント側から直接読もうとしている
- サーバー側：OK
- ブラウザ側：NG（NEXT_PUBLIC_ が必要）
セキュリティのため、ブラウザからは見えないようになっています。フロントエンドで使いたい場合は、変数名の先頭に NEXT_PUBLIC_ を付ける必要があります。
❌ .env と何が違うかわからない
- .env → ローカル開発用
- Vercel Environment Variables → 本番・Preview用
役割（使う場所）が違うだけで、やっていることは同じです。
超短い理解用まとめ（30秒版）
- この画面は、アプリに渡す秘密の設定置き場。
- コードに直接書かないための仕組み。
- 変更したら、必ず Deploy する。
- フロントで使うなら NEXT_PUBLIC_ をつける。
この「司令塔」の役割さえ理解できれば、Vercelのデプロイエラーの半分は怖くなくなります。
