Reactの環境変数の設定方法を徹底解説！初心者でもわかる.envファイルの活用術
生徒
「ReactでAPIのキーとか秘密の情報をどうやって管理するんですか？」
先生
「Reactでは.envというファイルを使って環境変数を設定します。これは、秘密の合言葉を安全に保管する金庫のようなものなんですよ。」
生徒
「金庫？それってどういう意味ですか？」
先生
「プロジェクトのコードに直接書かずに、別の場所（.envファイル）に保存して、必要なときだけ呼び出せるようにするんです。」
1. 環境変数とは何か？
環境変数（かんきょうへんすう）とは、プログラムの外側から渡される設定値のことです。たとえば「どのサーバーに接続するか」「APIキーは何か」といった情報をコードの中に直接書くのではなく、外部ファイルに保存して必要に応じて呼び出します。
これによって、同じアプリでも「開発用」と「本番用」で違う設定を簡単に切り替えられます。
2. .envファイルの基本
Reactでは、環境変数を設定するためにプロジェクトの直下に.envというファイルを作ります。中には次のように書きます。
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=abcdefg12345
Reactの場合、必ずREACT_APP_という接頭辞（頭につける文字列）が必要です。これがないとReactのアプリ内で使えません。
3. 環境変数の呼び出し方
設定した環境変数は、Reactのコードからprocess.envを使って呼び出します。次の例を見てみましょう。
import React from "react";
function App() {
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;
return (
<div>
<h1>API URL: {apiUrl}</h1>
<p>API Key: {apiKey}</p>
</div>
);
}
export default App;
4. .envファイルを使うメリット
.envファイルを使うと、次のような利点があります。
- 秘密の情報をコードに直接書かずに管理できる
- 開発環境と本番環境で設定を切り替えやすい
- チームで同じ設定を共有しやすい
例えば、家の鍵をドアに貼り付けてしまうと誰でも入れてしまいますよね。envファイルはその鍵を金庫にしまって、必要なときだけ取り出せるようにする仕組みなのです。
5. 環境ごとの.envファイル
Reactでは複数の環境ごとに.envファイルを分けることができます。例えば次のように準備します。
.env.development（開発用）.env.production（本番用）.env.test（テスト用）
こうすることで、開発中はテストサーバーを使い、本番では実際のサーバーを使う、といった切り替えが自動で行われます。
6. .gitignoreに追加してセキュリティを守る
注意点として、.envファイルは外部に公開してはいけません。APIキーや秘密の設定が漏れると不正利用されてしまう危険があります。そのため、通常は.gitignoreに追加して、GitHubなどにアップロードされないようにします。
例として、.gitignoreファイルには次のように書きます。
# 環境変数ファイルを無視
.env
.env.local
7. 実務での.envの使いどころ
実際のReact開発では、次のような場面で.envがよく使われます。
- 外部APIの接続先URLを管理する
- 外部サービスのAPIキーを設定する
- アプリの動作モード（開発・本番）を切り替える
例えば天気予報アプリを作るときに、気象情報を提供する外部APIを利用する場合、APIキーを.envファイルに保存してアプリで呼び出すのが一般的です。
8. 初心者が注意すべきポイント
最後に初心者が.envを使うときによくあるつまずきポイントをまとめます。
REACT_APP_を付け忘れるとReactで読み込めない- .envを編集したら開発サーバーを再起動する必要がある
- 秘密情報は必ず.gitignoreで守る
これらを守れば、安心して.envを活用できます。
