以前から console.log の横取り関数についてはたくさん記事を書いています。
これ前の記事です。
JavaScript console.log 置き換えコードを更に発展させた | プログラミングアカデミー ゼロプラスワン
console.logの乗っ取り記事書きすぎていて日本で一番くわしいんじゃないか(そんなことねーか...)もしれません。とりあえずその名に恥じないように更にバージョンをアップしてconsole.log乗っ取り決定版的な関数を作っておきました。
ページ上のコピペで動かしてもいいのですが、npm でライブラリを公開しはじめたので、そちらでオープンソースしていくようにしてみました。npmというのは node.js のパッケージ管理システムと呼ばれるもので、コマンド一発でコードをダウンロードしてくれるようなものです。
GitHub
npm
技術的に困ったのでStackOverflowで聞いたんだ。
javascript - TypeScript の名前空間を使った場合の外部モジュール設定 - スタック・オーバーフロー
わからないことは何でも聞いてしまえ！ということでプログラミング質問サイト StackOverflow で聞きました。TypeScript の内部モジュールと外部モジュールの組み合わせでどうやったら正解なのかがさっぱりわかりませんでした。JavaScriptのモジュールシステムは標準化が遅れたことによって後方互換を考えたりすることによって相当複雑なことになっていて、それに加えて TypeScript のモジュールを組み合わせるともっと大変。
いろいろ工夫してたらわかってきたので自己レスしておきました。ご参考ください。
徹底的に考えて、そして正解がわからなければ StackOverflow とか teratail で質問するのがよいでしょう。しかし、初心者の人とかは丁寧に質問するのも難しく、また再現コードを切り取って書くのも大変なんだろうなと思います。
やっぱりプログラマって簡単じゃなくて誰もができる仕事ではないでしょう。教育や身近に聞くことのできる先輩的な人がいることってとても大事だと思います。
マニュアル無いよ的なオープンソース
consoleHook についてですが、丁寧なマニュアルを作る人的パワーがないので使い方はマニュアル化されていません。下記で実装とテストコードから使い方を探って頂いて理解できた人は使ってください。雑ですいません。丁寧なマニュアル作る労力分、このページ書いたり、ツールのコード書いたり仕事ですごい難しいものを解決したりしなきゃならないようなので忙しくしています。。
こういうライブラリのマニュアルつくったりとか整備を行える人を雇えるパワーが欲しいかぎりです。技術は教えるので、こういう雑務的ないろいろやってくれる弟子とかいたらいいなあ、と思いますが、そういうのは今どきはお金を払ってやってもらわない限りはネットで叩かれちゃったりするんでしょうね。
https://github.com/standard-software/copipejs/blob/master/source/copipe_console.ts
https://github.com/standard-software/copipejs/blob/master/build/node/copipe_console.js
https://github.com/standard-software/copipejs/blob/master/source/test/test_copipe_console.js
copipe ライブラリの現在の最新版は version 0.5.4 です。
元はTypeScriptコードなのでJavaScript環境で使うためにTypeScriptコンパイラによる変換後のコードもリンクしておきます。必要ならコピペして使ってください。npmでインストールして JavaScript として使えるので現代的な JavaScript プロジェクトの場合はインストールが楽ちんなのでどうぞです。
俺、仕事で使うわ
今、JavaScriptプロジェクトで開発していて誰がつくったかわからないコードの山と格闘するお仕事しています。そこでは全体的にコードが無秩序っぽくて 必要なのか不要なのか判断できない console.log がどっさりあります。
全部コメントアウトするのも気が引けるので他の人の書いた console.log はそのままにしておいて、自分の書いた console.log だけ有効にしたくなっていまして、このconsoleHook が役に立つ場面になります。
console.log を上書きしているので全部の console.log を非表示にできたり、特定のログだけ表示することができたりします。自分が開発しているところだけログ出力して挙動を確認したい、という場合に上手に使うことができます。console.log の第一引数だけルールを決めておいてもらえれば、文字列か正規表現でフィルタリングできるというもの。
このあたりの開発動機は前の記事でも読んでください。
「仕事で必要になったから作った」というハードなツールです。丁寧なマニュアルはないけれどもですが、使いたい人がおられたらどうぞです。
プロのWebフロントエンドの開発者の console.log はコックピットのようなものだろう、ということでアイキャッチ画像を選んでみました。最高の言語の最高の道具をカスタマイズしてよい成果をだせるよい開発者になっていってください。
npm でライブラリを公開して使いやすい道具を作り込むと楽しいですよ。おすすめです。
追記 2019/05/11
そういえばなのですが誰もいってくれるわけないので改めて書いておきますが、この consoleHook 許可するものと拒否するものどちらも文字列一致と正規表現一致に対応しています。
正規表現一致だけで否定の表現ということもできるのですが許可と拒否にわけることによって「debug という文字列が含まれているものを許可」して「その中でも mouse move という文字列が含まれているものを拒否」することが非常に簡単に指定できます。正規表現で否定表現をするのは著しく難しいためにこのように許可と拒否の2段階指定をしておくことで非常に簡単に全体を制御することができます。
なんてセンスのいいプログラミングなんだろう！そんなふうに自画自賛したくなりました。
どのようにすれば使い勝手のよい関数になるか、を見抜くことがプログラミングのセンスです。今回の場合は許可と拒否の2段階指定をする実装をすることがセンスがある人のプログラミングの書き方となるわけです。
大した仕組みではないですが見抜いてこれを実装する人もそう多くいるわけではないでしょう。
くどくど説明しなくても理解出来る人がいてくれたらいいなーと思うところもありますが、細かすぎる事でもあるのので、説明しておかないと誰も気が付かないだろうなと思ってくどくど説明しました。
よかったら使ってみてください。頭がいい人なら使いこなせると思います。もっと頭良かったら、この程度のプログラムは自分で作ってもっと便利なものにしてしまうかな。
そしたらメールやコメント欄でやり方教えてください。そんなツワモノのすごいコードは、このゼロプラスワンの記事でコードを紹介させていただきたいです。
