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