React環境判別と設定
Reactの開発環境と本番環境をランタイムで判別する
Reactアプリケーションでは、開発環境と本番環境で異なる設定や挙動が必要となることがあります。例えば、開発環境ではホットリロードやデバッグツールを使用し、本番環境では最適化やエラーハンドリングを優先します。本記事では、Reactアプリケーションのランタイムで開発環境と本番環境を判別する方法について解説します。
process.envを利用する
最も一般的な方法は、process.envオブジェクトを利用することです。このオブジェクトには、環境変数やアプリケーションの情報を格納しています。NODE_ENV環境変数を設定することで、開発環境と本番環境を区別することができます。
if (process.env.NODE_ENV === 'development') {
// 開発環境の処理
console.log('Development mode');
} else {
// 本番環境の処理
console.log('Production mode');
}
process.env.NODE_ENVの値
- test
テスト環境（オプション） - production
本番環境 - development
開発環境
環境変数の設定
NODE_ENV環境変数は、通常、アプリケーションの起動時に設定されます。例えば、package.jsonのscriptsセクションで以下のように設定できます。
{
"scripts": {
"start": "NODE_ENV=development react-scripts start",
"build": "NODE_ENV=production react-scripts build"
}
}
create-react-appの自動設定
create-react-appで作成したプロジェクトでは、NODE_ENV環境変数が自動的に設定されます。開発モードではdevelopment、本番モードではproductionが設定されます。
条件付きレンダリング
process.env.NODE_ENVの値に基づいて、コンポーネントのレンダリングを条件付けすることもできます。
import React from 'react';
function MyComponent() {
if (process.env.NODE_ENV === 'development') {
return <div>開発モードのコンテンツ</div>;
} else {
return <div>本番モードのコンテンツ</div>;
}
}
注意
- 開発環境と本番環境で異なるコードパスを管理する際には、注意が必要です。複雑なロジックはモジュール化して管理することをおすすめします。
process.env.NODE_ENVはビルド時に静的に評価されます。ランタイムでの変更は反映されません。
React環境判別と設定のコード例
if (process.env.NODE_ENV === 'development') {
console.log('開発モード');
} else {
console.log('本番モード');
}
process.env.NODE_ENVが'production'の場合、本番モードであることを示します。
import React from 'react';
function MyComponent() {
if (process.env.NODE_ENV === 'development') {
return <div>開発モードのコンテンツ</div>;
} else {
return <div>本番モードのコンテンツ</div>;
}
}
process.env.NODE_ENVに基づいて、異なるコンテンツをレンダリングします。
{
"scripts": {
"start": "NODE_ENV=development react-scripts start",
"build": "NODE_ENV=production react-scripts build"
}
}
package.jsonのscriptsセクションで、NODE_ENV環境変数を設定します。
// `create-react-app`で作成したプロジェクトの場合
if (process.env.NODE_ENV === 'development') {
// 開発モードの処理
} else {
// 本番モードの処理
}
create-react-appで作成したプロジェクトでは、NODE_ENVが自動的に設定されます。
react-scriptsの環境変数
// `react-scripts`の環境変数
console.log(process.env.PUBLIC_URL); // 公開ディレクトリのパス
console.log(process.env.NODE_ENV); // 環境変数
react-scriptsはいくつかの環境変数を提供します。
dotenvパッケージを利用する
import dotenv from 'dotenv';
dotenv.config();
console.log(process.env.MY_API_KEY); // カスタム環境変数
dotenvパッケージを使用すると、.envファイルから環境変数をロードできます。
process.envは最も一般的な方法ですが、他にもいくつかの方法があります。
create-react-appで作成したプロジェクトでは、react-scriptsが提供する環境変数を利用することもできます。
console.log(process.env.PUBLIC_URL); // 公開ディレクトリのパス
console.log(process.env.NODE_ENV); // 環境変数
dotenvパッケージ
.envファイルから環境変数をロードする場合は、dotenvパッケージを使用できます。
import dotenv from 'dotenv';
dotenv.config();
console.log(process.env.MY_API_KEY); // カスタム環境変数
カスタムフラグ
アプリケーション内でカスタムフラグを設定し、開発環境と本番環境を区別することもできます。
const isDevelopment = process.env.NODE_ENV === 'development';
if (isDevelopment) {
// 開発モードの処理
} else {
// 本番モードの処理
}
ビルドツールによる設定
WebpackやParcelなどのビルドツールを使用している場合は、ビルド時に環境変数を設定することができます。
Webpackの例
module.exports = {
mode: process.env.NODE_ENV || 'development',
// ...
};
Parcelの例
module.exports = {
mode: 'development', // または 'production'
// ...
};
javascript reactjs
