なんだか、console.logの記事が検索されて人気の様子です。もともとの初心者向けの記事はこちら。
初心者向けではない、もう少し突っ込んで紹介してみておきましょう。
初心者の方は、先に紹介した内容で十分だと思いますが、プロの中のプロレベルの使い方の紹介をしたりします。ぶっとばし過ぎているかもしれないので、初心者の人は真似をしないように。
なんつって...
（^ｗ^;
プロはconsole.logなんて使わない、なんてことはない。
こんな歌詞の歌がありましたね。「もう恋なんてしないなんて、言わないよぜーったいにー」
つまり、恋をしないのか？するのか？どっちやねん!？という感じです。年がバレますね。まあ、ばれても構わないのですが。
さて、console.logです。
めちゃくちゃ使います。ははは。使いまくります。
実は、GoogleChromeはJavaScriptのトレース実行というものができます。VSCodeと組み合わせることで、ブレークポイントはったり、マウスをあてて変数の内容もみれたりして、デバッグも何もかも、非常に便利なのです。これは恐ろしく開発効率をあげてくれます。
それが当たり前の世界では、console.logなんて、かったるくて使わない、というところもあるかもしれません。
で・す・が、そんな世界は現実の開発の現場では、あまり実現されていません。
最新のWeb開発業界でも、開発生産性を真に見抜いている人ばかりではないのです。Chromeのトレース実行できるということを知らない人も大勢いるようです。
そういう現場ではトレース実行できる開発メリットを全部ひっくるめて捨ててしまっていて、Chromeのトレース実行ができない形でJavaScriptを変換して、リリースビルドされた、JavaScriptを実行する、という環境はよくみかけます。
JavaScript は現代の開発現場では、徹底的に変換されて動くものなのです。そして変換されすぎちゃって、人間が読めない形になります。
変数名は極めて短くしてインデントも消したりすると通信量も減ったりしますし、自社で開発しているソースコードを他社にパクられたくない、という思いを込めて、ミニファイという変換を行ったりします。
そうしてブラウザ上で動くJavaScriptは、人間には読めない形になってしまうのです。それゆえに開発者はChrome上でJavaScriptを読めないし、実行を一時停止もできない、という状況が、よくあります。
そこで活躍するのが、古くから使える、console.log というわけです。
ソースコードがブラウザ上でみえなくても、console.log の内容は出力されます。
最新のWeb開発なのに、古臭い console.log を使う。というのは、web開発のあるあるネタなのかもしれません。開発効率は悪くなっている気がしますが、そういうことがよくアルアルだということです。
では、プロはどのようにconsole.logを使うか。
単純な使い方の一例です。
|
1 2 3 4 5 |
console.log('2018/10/12', 'yama-san', 'value1', value1, object1, // object2, ); |
チームで開発してたりなんかすると、日付と氏名なんかをいれておくと、誰がいつ何を必要としてログを出力しているかわかったりします。引数をいくらでも与えられるので、value1 の値でも、object1 の値でも、object2 の値でも出力できますし、上記のように書いていれば、1行ごとのコメントアウトが簡単です。
まあ、こんなのは普通のことです。
console.log を置き換えてしまおう。
今の現場では、console.log を埋め込んでデバッグして開発していますが、リリースするために console.log をソースコードから消して、git にコミットします。
まいどまいど、開発中に埋め込んだかなりの量のconsole.logを消すのです。手間です。正直いうと開発スタイルが古臭くて嫌になっています。古臭いというか、やり方を知らないんでしょう。
開発者は、console.log をそこに埋め込んで開発したのですから、そこには console.log が必要だ、ということなのです。そこに書かれているconsole.log は意味のあるソースコードなのです。リリース版でも、極力残したいのです。でも、リリース版で出力するのは嫌ですよね。開発者の名前とかでちゃうと困ります。
ということで、コンソールログを、リリース版のときだけ置き換えるわけです。
|
1 |
console.log = () => {}; |
アロー関数の空関数でも配置すればいいことです。これでプロジェクト全体のconsole.log は一撃で全OFFされます。
一部は出力したいけど、一部は出力したくない。
え？なんですか？全てOFFしたいわけじゃなくて、部分的にOFFして、部分的にONしたい？
わがままですね。
そんなのは、、、む、、、、り、、、じゃないです。できますよ！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//----- var consoleExt = {}; consoleExt.originalConsoleLog = console.log; consoleExt.hook = function(func = () => {}) { console.log = func; }; consoleExt.unhook = function() { console.log = consoleExt.originalConsoleLog; }; //----- // 元のconsole.log var value1 = 1; console.log(value1); // 1 が表示される consoleExt.hook(); // console.logは横取りされて何も出力されない var value1 = 2; console.log(value1); // 何も出力されない consoleExt.hook((value)=>{ consoleExt.originalConsoleLog(value, value); }) // console.logは横取りされて2回出力される var value1 = 3; console.log(value1); // 3 3 が表示される consoleExt.unhook(); // 元のconsole.log var value1 = 4; console.log(value1); // 4 が表示される |
途中で、何も出力されないところと、2回値が表示されるところがありましたね。
consoleExt.hook と、consoleExt.unhook を使えば可能になります。
デバッグ版や、テスト版や、リリース版で、出力するものを選びたい。
なめてるんですか！そんなこと、できるわけ、、、、、、、できました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
//----- var consoleExt = {}; consoleExt.originalConsoleLog = console.log; consoleExt.hook = function(func = () => {}) { console.log = func; }; consoleExt.unhook = function() { console.log = consoleExt.originalConsoleLog; }; consoleExt.hookedTitles = []; consoleExt.hookTitle = (titles, func = () => {}) => { consoleExt.hookedTitles = titles; console.log = function(argument1) { if (consoleExt.hookedTitles.includes(argument1)) { return func(); } var args = Array.prototype.slice.call(arguments); consoleExt.originalConsoleLog(...args); }; }; //----- var value1 = 10; var value2 = 20; var object1 = { value3: value2, } console.log('debug', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('product', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('test', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); consoleExt.originalConsoleLog('----------'); consoleExt.hookTitle(['debug']); console.log('debug', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('product', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('test', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); consoleExt.originalConsoleLog('----------'); consoleExt.hookTitle(['debug', 'test'], () => { consoleExt.originalConsoleLog('デバッグとテストは出力したらだめ'); }); console.log('debug', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('product', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('test', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); consoleExt.originalConsoleLog('----------'); consoleExt.unhook(); console.log('debug', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('product', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); console.log('test', '2018/10/12', 'yama-san', 'value1', value1, 'object1', object1, ); |
出力結果は次の通りになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
debug 2018/10/12 yama-san value1 10 object1 { value3: 20 } product 2018/10/12 yama-san value1 10 object1 { value3: 20 } test 2018/10/12 yama-san value1 10 object1 { value3: 20 } ---------- product 2018/10/12 yama-san value1 10 object1 { value3: 20 } test 2018/10/12 yama-san value1 10 object1 { value3: 20 } ---------- デバッグとテストは出力したらだめ product 2018/10/12 yama-san value1 10 object1 { value3: 20 } デバッグとテストは出力したらだめ ---------- debug 2018/10/12 yama-san value1 10 object1 { value3: 20 } product 2018/10/12 yama-san value1 10 object1 { value3: 20 } test 2018/10/12 yama-san value1 10 object1 { value3: 20 } |
最初は、普通に出力、
次は、debugログ出力だけを、表示させなくして
次は、debugとtest の場合は、違うメッセージを出すようにして
次は、元の console.log に戻しています。
こんなことが、できてしまうのですね。
ちょっと独特な console.log 乗っ取り拡張でした。
console.logの乗っ取りなんて邪道だー
プロの開発者によっては、こんな邪道なこと、やってはいけない、とかなんとかかんとかいう人もいると思います。
例えば、JavaScript業界では、数値や文字や配列などのprototype拡張は、するべきではない、という論調が主流になっています。自分もそう思います。ある場所で動くものが、コードをコピペしたりすると別の環境では動かない、というものがたくさんあるとコードを読み書きするのは難しくなるからです。
ですが、この console.log 乗っ取り拡張などは、むしろ逆にコードコピペしても動くように手間を減らすために行うことですし、必要あれば、consoleExtのメソッドを全て、空関数に置き換えてしまうと何も動かないものになりますので、うまく使えば強力な武器になるでしょう。
初心者の方にはぶっとんだ内容だったと思いますが、開発効率をあげる方法のひとつとして、こんなのもできるんだよ。ということです。周りに反感買わないようにしつつ、うまく、自分で判断してみてください。
ではでは。
追記
最新記事はこちらになります。
仕事で使うので console.log の横取り consoleHook.logHook を npm で公開してみました。 | プログラミングアカデミー ゼロプラスワン
