はじめに

初めて実務でフロントエンド開発を行っています。
想像の10倍ぐらいconsole.log()を書いているわけですが、その時「仮に削除 or コメントアウトし忘れても大丈夫なconsole.log()が欲しい」と思ったのがきっかけです。

console.log()の仕様を見てみる

/*略*/

log(message?: any, ...optionalParams: any[]): void;

/*略*/

↑らしいです。
これをそのまま引数として受け取ってローカル環境だった場合のみconsole.log()を実行する、というやり方で実現できそう。

実装


const defaultLocalPortNumber = process.env.REACT_APP_LOCAL_PORT_NUMBER || 3000

/**
 * ローカルかどうか
 *
 * @param {number} [localPortNumber=3000]
 * @return {*}  {boolean}
 */
export const isLocal = (localPortNumber: number = defaultLocalPortNumber): boolean => Number(location.port) === localPortNumber

/**
 * ローカル用console.log()
 *
 * @param {*} [message]
 * @param {...any[]} optionalParams
 */
export const consolocalLog = (message?: any, ...optionalParams: any[]): void => {
  if (!isLocal()) {
    return
  }

  console.log(message, ...optionalParams)
}

/**
 * ついでにローカル用console.error()も
 *
 * @param {*} [message]
 * @param {...any[]} optionalParams
 */
 export const consolocalError = (message?: any, ...optionalParams: any[]): void => {
  if (!isLocal()) {
    return
  }

  console.error(message, ...optionalParams)
}

使い方

import { consolocalLog, consolocalError } from '../path/to/helpers'

/*略*/

consolocalLog('DEBUG OUTPUT: ', randomData)
consolocalError('ERR OUTPUT: ', err)

/*略*/

とはいえ最後はしっかり確認して削除なりコメントアウトなりするに越したことはないと思います。