環境毎に分けて定数を定義する方法【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

コメントを残す