React で .env ファイルを使う際に "undefined" エラーが出る？原因と解決策を分かりやすく解説

2024-04-14

React 環境変数 .env ファイルで "undefined" が返される問題：詳細な解説と解決策

原因

.env ファイルが正しく読み込まれていない:
- .env ファイルがルートディレクトリに存在し、.gitignore ファイルに含まれていないことを確認してください。
- dotenv パッケージがインストールされていない場合は、npm install dotenv または yarn add dotenv コマンドを実行してインストールします。
- .env ファイルの構文が正しいことを確認してください。各変数は KEY=VALUE の形式で記述する必要があります。
変数名が間違っている:
- 大文字と小文字の区別にも注意してください。
変数が定義されていない:

解決策

.env ファイルの読み込みを確認する:
- console.log(process.env) を使用して、.env ファイルが正しく読み込まれていることを確認してください。
- エラーメッセージが表示される場合は、原因を特定して修正してください。

追加のヒント

.env ファイルは機密情報を含むため、バージョン管理システムに含めないようにしてください。
開発環境と本番環境で異なる .env ファイルを使用することで、環境固有の設定を管理できます。
dotenv-expand パッケージを使用すると、.env ファイル内で環境変数を展開できます。

注意事項

問題の特定と解決に役立つデバッガーや開発ツールの使用を検討してください。

サンプルコード：React 環境変数 .env ファイルで "undefined" が返される問題を解決する

.env ファイルの作成

ルートディレクトリに .env ファイルを作成し、以下の内容を追加します。

REACT_APP_NAME=My React App
REACT_APP_API_URL=https://my-api.example.com

React コンポーネントの作成

App.js という名前の React コンポーネントを作成し、以下のコードを追加します。

import React from 'react';
import dotenv from 'dotenv';

dotenv.config();

const App = () => {
  const appName = process.env.REACT_APP_NAME;
  const apiUrl = process.env.REACT_APP_API_URL;

  if (!appName || !apiUrl) {
    return <div>環境変数が読み込まれていません。</div>;
  }

  return (
    <div>
      <h1>{appName}</h1>
      <p>API URL: {apiUrl}</p>
    </div>
  );
};

export default App;

アプリケーションの実行

以下のコマンドを実行して、React アプリケーションを起動します。

npm start

結果

ブラウザでアプリケーションを開くと、以下の内容が表示されます。

My React App
API URL: https://my-api.example.com

問題の解決

変数名が間違っていないことを確認してください。

React 環境変数 .env ファイルで "undefined" が返される問題：その他の解決策と回避策

process.env.NODE_ENV 環境変数は、アプリケーションが開発モード (development) または本番モード (production) で実行されているかどうかを示します。.env ファイル内の変数は、NODE_ENV の値に基づいて読み込まれる場合があります。

開発モードでは、すべての変数が .env ファイルから読み込まれます。
本番モードでは、REACT_APP プレフィックスが付いた変数のみが読み込まれます。

問題が本番モードで発生している場合は、変数名に REACT_APP プレフィックスを付けていることを確認してください。

例

# 開発モード
API_KEY=my-api-key

# 本番モード
REACT_APP_API_KEY=my-api-key

カスタムフックを使用する

useEnvironmentVariables のようなカスタムフックを使用して、.env ファイルから環境変数を簡単に読み込むことができます。これらのフックは、潜在的なエラー処理とデフォルト値の提供を簡素化します。

import React, { useState, useEffect } from 'react';

const useEnvironmentVariables = () => {
  const [envVars, setEnvVars] = useState({});

  useEffect(() => {
    const dotenv = require('dotenv');
    dotenv.config();

    setEnvVars(process.env);
  }, []);

  return envVars;
};

const App = () => {
  const envVars = useEnvironmentVariables();
  const appName = envVars.REACT_APP_NAME;
  const apiUrl = envVars.REACT_APP_API_URL;

  if (!appName || !apiUrl) {
    return <div>環境変数が読み込まれていません。</div>;
  }

  return (
    <div>
      <h1>{appName}</h1>
      <p>API URL: {apiUrl}</p>
    </div>
  );
};

export default App;

Webpack 設定を使用して、.env ファイルをバンドルに含めることもできます。これにより、変数が常にアクセス可能になります。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_NAME': JSON.stringify('My React App'),
      'process.env.REACT_APP_API_URL': JSON.stringify('https://my-api.example.com'),
    }),
  ],
};

環境変数を手動で設定する

どうしても process.env を使用できない場合は、window.ENV などのグローバル変数に環境変数を手動で設定できます。ただし、この方法は、アプリケーション全体の可読性と保守性を低下させる可能性があるため、最後の手段としてのみ使用してください。

window.ENV = {
  REACT_APP_NAME: 'My React App',
  REACT_APP_API_URL: 'https://my-api.example.com',
};

const App = () => {
  const appName = window.ENV.REACT_APP_NAME;
  const apiUrl = window.ENV.REACT_APP_API_URL;

  // ...
};