迷わない！Reactアプリの開発環境と本番環境を判別する6つの方法

Reactアプリで開発環境と本番環境を判別する方法

判別方法

1. 環境変数を使う

• .env.development と .env.production という2つのファイルを作成し、それぞれに環境変数を設定します。
• アプリ内で process.env.NODE_ENV を使って環境変数を読み込み、開発環境と本番環境を判別します。

// .env.development
NODE_ENV=development

// .env.production
NODE_ENV=production

// App.js
const isDev = process.env.NODE_ENV === 'development';

if (isDev) {
  // 開発環境用の処理
} else {
  // 本番環境用の処理
}

1. URLを使う

• 開発環境と本番環境で異なるURLを使用します。
• アプリ内で window.location.href を使って現在のURLを取得し、開発環境と本番環境を判別します。

// App.js
const isDev = window.location.href.includes('localhost');

if (isDev) {
  // 開発環境用の処理
} else {
  // 本番環境用の処理
}

1. React DevToolsを使う

• React DevToolsは、ブラウザ拡張機能で、Reactアプリの開発に役立ちます。
• DevToolsが有効になっている場合は開発環境、無効になっている場合は本番環境と判別できます。

// App.js
const isDev = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;

if (isDev) {
  // 開発環境用の処理
} else {
  // 本番環境用の処理
}

上記3つの方法はいずれも簡単に実装できます。プロジェクトの規模や要件に合わせて、最適な方法を選択してください。

ファイル構成

- .env.development
- .env.production
- App.js

内容

// .env.development
NODE_ENV=development

// .env.production
NODE_ENV=production

// App.js
import React from 'react';

const App = () => {
  const isDev = process.env.NODE_ENV === 'development';

  return (
    <div>
      <h1>Hello, world!</h1>
      {isDev && (
        <p>This is a development environment.</p>
      )}
    </div>
  );
};

export default App;

動作

• 開発環境で実行すると、<h1>Hello, world!</h1> と This is a development environment. が表示されます。
• 本番環境で実行すると、<h1>Hello, world!</h1> のみが表示されます。

上記のサンプルコード以外にも、URLやReact DevToolsを使うなど、さまざまな方法で開発環境と本番環境を判別できます。

開発環境と本番環境を判別する他の方法

URL

例：

• 開発環境：localhost:3000
• 本番環境：www.example.com

コード例：

const isDev = window.location.href.includes('localhost');

// ...

React DevTools はブラウザ拡張機能で、React アプリの開発に役立ちます。DevTools が有効になっている場合は開発環境、無効になっている場合は本番環境と判別できます。

const isDev = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;

// ...

Webpack DefinePlugin を使用して、環境変数をコードに埋め込むことができます。

// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
};

const isDev = process.env.NODE_ENV === 'development';

// ...

環境固有のファイル

開発環境と本番環境で異なるファイルを読み込むことで、環境を判別できます。

• 開発環境：./config/dev.js

const config = require(`./config/${process.env.NODE_ENV}.js`);

// ...

Feature flag を使用して、機能の有効・無効を切り替えることができます。

const isFeatureEnabled = process.env.FEATURE_FLAG === 'true';

// ...