viteで開発環境でのみconsole.logを表示したい

背景

ユーザのconsoleには表示させたくないが、開発中には表示させることでバグ修正時の時間短縮（原因特定等）に繋がることもあると思います。

そこで今回はviteのプロジェクトでそれを実現する方法を紹介します。

doc
viteのinstallでしたり、viteのconfigファイルの設定は割愛させて頂きます🙏

modeによってconsole.logを表示するか決める関数

displayDevConsoleLog.ts

const displayDevConsoleLog = (msg: string) => {
    const needDevConsoleLog = import.meta.env.MODE === "development";
    if (needDevConsoleLog) {
      console.log(msg);
    }
}

viteはデフォルトで、
開発サーバー（dev コマンド）はdevelopmentモード
buildコマンドはproductionモードで動作します
doc

import.meta.env.MODEでdevelopmentかproductionを取得できます

懸念点

全員に表示されます。
↓
多用すると作業の支障になります。

使い時を考える必要がありそうです。

最後に

• 簡単に導入できました
• viteはdotenvを利用していることを知りました
• 引き続き開発体験を上げる為にできることを調査していきます！💪