何度JSでconsole.logをラップしたか分からんがやっとうまい方法を見つけた
案件ごとに対応ブラウザとか違ってそれ毎に毎度作成していてなんとなくモヤモヤしていましたが、 こちらで上手い方法が解説されていました。
とてもシンプルに書けるしこのやりかたの良い所は、関数でラップする場合と比較して、
ちゃんと呼び出した場所の行数がconsole.logで出力される点と、
IEに対応していないスプレッド構文を考慮しなくても、console.logの引数をまんま使える点だと思います。
(console.logは可変パラメータを受け付けてくれる)
なんだかんだ言っても、まだIE対応させなければならない場合や、トランスパイル環境つくるまでの
規模じゃないこともあるので、これは便利に使えそうです。
さらに発展させて、スタティッククラスっぽく利用できるようにしてみました。
const Log = (function(logLevel) { let none = function(){}; return { debug: (logLevel <= 0) ? console.log.bind(console) : none, info: (logLevel <= 1) ? console.log.bind(console) : none, error: (logLevel <= 2) ? console.log.bind(console) : none }; })(1); // ここにログレベルを記述 let obj = { hoge: 'HOGE', moga: 'MOGA' }; Log.debug('デバッグログ'); // レベルが異なるのでこれは出力されない Log.info('インフォログ', 'fuga'); Log.error('エラーログ', obj, Log); // オブジェクトの可変パラメータも出力できる
これならIE(11限定ですが)も問題なく動きます。
ちなみに先に解説されていたconsole.log.bind(console)の書き方は、最新のブラウザなら
console.logのみで問題なく動作するみたいです。
2020.7.3追記
IE11はconsole.log.bind(console)という書き方をしないと動作しなかったの修正しました。
IEの開発者ツールを開いていれば動作しますが、閉じるとエラーも発生せずスクリプトが止まってしまうようです。