😊

本番環境のみconsoleを出力しない設定

2023/12/13に公開

JavaScript

devではコンソール表示してデバッグをしたいが、本番環境で運用しようと思ったときにコンソールの表示をオフにしたいことがあると思います。reactの開発環境ですが、下記のようにif文を追加するだけで可能です。

App.tsx


(他のコード)

function App() {
  if (import.meta.env.VITE_APP_ENV === 'prod') {
    // 本番環境の場合、コンソール出力を無効にする
    console.log = console.info = console.debug = console.warn = console.error = () => {};
  }
  return (
    <>
      <Provider>
        <RouterProvider router={router} />
      </Provider>
    </>
  )
}

export default App

前提として開発環境によって環境変数のファイル .env を切り替えることで、上の例だとVITE_APP_ENVで設定した値によってコンソールを表示するかしないかの切り替えが可能となります。
その切り替え方法については下記の記事を参照ください。

Discussion