環境構築
環境変数が読み込めない（.env）
.envファイルの変数がundefined
こんな症状
process.env.XXXがundefinedになる。プロジェクトを初めてセットアップするときや、フロントエンドで環境変数を使おうとしたときに起きやすいよ。
まず試す
Node.jsなら先頭で require('dotenv').config() を呼ぶ。ブラウザ側は process.env ではなくフレームワーク固有の方法を使う。
env
// .env に API_KEY=xxx を書く
require("dotenv").config();
console.log(process.env.API_KEY);これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓Node.jsで undefined
→ ファイル先頭で require('dotenv').config() を呼ぶ。 - ✓Vite のフロントで使いたい
→ import.meta.env.VITE_変数名 を使う（VITE_ プレフィックス必須）。 - ✓Next.js のブラウザで使いたい
→ NEXT_PUBLIC_ プレフィックスを付ける。
なぜ起きる？
dotenvの読み込みが実行されていない、またはフロントエンドでprocess.envは使えないよ。環境変数とは「アプリの設定値（APIキー等）をコードの外に保存する仕組み」のことだよ。Node.jsではdotenv.config()を呼ばないと.envファイルが読み込まれないんだ。また、ブラウザ環境ではprocess.envは存在しないから、フレームワーク固有の方法（プレフィックス付き変数名）を使う必要があるよ。
✕ エラーが起きるコード
console.log(process.env.API_KEY);
// undefined✓ 直したコード
// .env ファイルを作成: API_KEY=xxx
require("dotenv").config();✅ 直ったか確認
console.log で環境変数の値が表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- VS Codeの拡張機能が動かない・反映されない — 再起動・有効化・追加設定のどれかが足りていない
- Live Serverが起動しない — Live Server 拡張機能が正しく動作していない
- Permission denied (publickey) — SSH鍵が設定されていない
- npm installが失敗する — パッケージのインストールでエラーが出る
- node_modules削除後にエラーが出る — node_modulesを削除したが再インストールしていない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- VS Codeのインストール方法 — インストールと初期設定を図解で解説
- プログラミング初心者が最初にやるべきこと5選 — 目的を決めて環境構築から