【React】developmentとproductionで処理を切り替える

Reactでdevelopmentとproductionで処理を切り替えたい！

npx create-react-appで作ったプロジェクトでnpm startとnpm buildで処理を変える感じ。

概要

今回の記事では、Reactでdevelopmentとproductionで処理を切り替える手順を掲載する。

仕様書

環境

• react 18.2.0

手順書

process.env.NODE_ENVにビルドの情報が入ってるのでこれを照合して判別する。
特にimportは不要で使える。

npx create-react-appで作ったプロジェクトでnpm startしたビルドはprocess.env.NODE_ENVがdevelopmentとなってる。

if (process.env.NODE_ENV === 'development') {
    console.log("development!");
}

npx create-react-appで作ったプロジェクトでnpm buildしたビルドはprocess.env.NODE_ENVがproductionとなってる。

if (process.env.NODE_ENV === 'production') {
    console.log("production!!");
}

まとめ（感想文）

Cとかのプリプロセッサーみたいな感じにビルドによってコードを抜いたり足したりしてるわけではないので注意。

developmentだからといってセキュリティ的にまずいコード（パスワードとか）を含めてはいけない。