環境毎に分けて定数を定義する方法【React】

■はじめに

前回の記事の「定数クラス」に環境毎に分けた定数を定義する方法を記載します。

APIの向き先などで使用することはあると思います。

■手順

プロジェクトは「create-react-app」を使用して作成しておいてください。

※そうすることで、環境を分ける定数が自動で用意されます。

以下のようにConst.jsを作成します。

class Const {
    ENV = () => {
        if (process.env.NODE_ENV === 'development') {
            return {
                API_URL: "http://hogehoge.com/",
                API_KEY: "aaaaa"
            }
        } else if (process.env.NODE_ENV === 'test') {
            return {
                API_URL: "http://hugahuga.com/",
                API_KEY: "aaaaa"
            }
        } else if (process.env.NODE_ENV === 'production') {
            return {
                API_URL: "http://example.com/",
                API_KEY: "aaaaa"
            }
        } else {
            return {
                API_URL: "http://aaaaaaa.com/",
                API_KEY: "aaaaa"
            }
        }
    }
}

export default new Const();

以下のIF文で環境を判定しています。

process.env.NODE_ENV

上記は、ビルド方法によって値が変わります。

具体的には、以下のように変わります。

実行コマンド	NODE_ENVの値
yarn start	development
yarn test	test
yarn build	production