【React開発】環境変数 process.env の参照優先順位と使い方

Reactアプリケーションの開発中に使用される process.env は、プロジェクトのルートディレクトリにある .env ファイルを参照しています。具体的には、Reactでは開発環境と本番環境で参照する環境変数ファイルが異なる場合があります。

参照順序とファイル

Reactアプリの開発中に process.env が参照する .env ファイルには、以下の種類があります。Reactはこれらのファイルを特定の優先順位で参照します。

1. .env.development.local: 開発環境のローカル設定用。コミットされるべきではないファイル。
2. .env.development: 開発環境用。開発サーバーで起動するときに参照される。
3. .env.local: すべての環境（開発・本番問わず）で使用されるローカル設定用。こちらもコミットされるべきではないファイル。
4. .env: 環境を問わず、基本的な設定として使用されるファイル。開発・本番・テストの全環境で共通の値を設定する場合に使用。

Reactはこの順序でファイルを参照します。つまり、process.envはまず .env.development.localが存在すればそれを読み込み、次に.env.development、その次に.env.local、最後に.envを参照します。

重要な点

• REACT_APP_プレフィックス: Reactアプリケーションで使われる環境変数はすべて REACT_APP_ で始める必要があります。そうでない変数はビルド時に無視されます。
• 開発時に参照されるファイル:
  • 開発中（npm start 実行時）は、process.envは基本的に .env.development ファイル（存在すれば）を参照します。
  • もし、.env.development が存在しない場合は、.env または .env.local を参照します。

確認する方法

実際にどのファイルが使用されているかを確認するには、console.log(process.env) で環境変数を出力して確認することができます。

console.log(process.env);

これにより、どの環境変数が現在の環境で使われているかが確認できます。

まとめ

• **npm start（開発中）**では、process.env は .env.development.local → .env.development → .env.local → .env の順にファイルを参照します。
• すべての環境変数は REACT_APP_ プレフィックスが必要です。