console.log 置き換え、こちらの記事でプロだとどうするのか、という感じで書いてみました。
が、さらにこだわりの作りをしたくなったので、もう少し実用化してみました。プログラムコードを載せておきます。
配列で、一致フィルタと除外フィルタをつくり、また、正規表現での一致フィルタ、除外フィルタ、にも対応しています。
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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
// -------------------- // console.log 横取り関数 const consoleHook = {}; consoleHook.originalConsoleLog = console.log; consoleHook.logHook = (func = () => {}) => { console.log = func; }; consoleHook.logUnhook = () => { delete console.log; }; consoleHook.logFilterIncludes = (titles, logFunc = consoleHook.originalConsoleLog) => { if (Array.isArray(titles)) { consoleHook.logHook((...args) => { if (titles.includes(args[0])) { logFunc(...args); } }); } else { consoleHook.logHook((...args) => { if (String(args[0]).match(new RegExp(titles)) !== null) { logFunc(...args); } }); } }; consoleHook.logTitleExcludes = (titles, logFunc = consoleHook.originalConsoleLog) => { if (Array.isArray(titles)) { consoleHook.logHook((...args) => { if (!titles.includes(args[0])) { logFunc(...args); } }); } else { consoleHook.logHook((...args) => { if (String(args[0]).match(new RegExp(titles)) === null) { logFunc(...args); } }); } }; // -------------------- // テスト用関数 const testConsoleLog1 = () => { const value1 = 10; const value2 = 20; console.log('debug', 'value1=', value1, 'value2=', value2); console.log('product', 'value1=', value1, 'value2=', value2); console.log('test', 'value1=', value1, 'value2=', value2); }; const testConsoleLog2 = () => { const value1 = 10; const value2 = 20; console.log('001', '表示したい内容1'); console.log('002', '表示したい内容2'); console.log('003', '表示したい内容3'); console.log('101', '表示したい内容4'); console.log('102', '表示したい内容5'); console.log('201', '表示したい内容6'); }; // -------------------- // [1] 通常の実行 testConsoleLog1(); testConsoleLog2(); // 実行結果 // debug value1= 10 value2= 20 // product value1= 10 value2= 20 // test value1= 10 value2= 20 // 001 表示したい内容1 // 002 表示したい内容2 // 003 表示したい内容3 // 101 表示したい内容4 // 102 表示したい内容5 // 201 表示したい内容6 consoleHook.originalConsoleLog('-----'); // -------------------- // [2] console.log を横取りして指定したものだけ表示 consoleHook.logFilterIncludes(['product', 'test', '001', '201']); testConsoleLog1(); testConsoleLog2(); // 実行結果 // product value1= 10 value2= 20 // test value1= 10 value2= 20 // 001 表示したい内容1 // 201 表示したい内容6 consoleHook.originalConsoleLog('-----'); // -------------------- // [3] console.log を横取りして指定したものだけ除外表示 consoleHook.logTitleExcludes(['product', 'test', '001', '201']); testConsoleLog1(); testConsoleLog2(); // 実行結果 // debug value1= 10 value2= 20 // 002 表示したい内容2 // 003 表示したい内容3 // 101 表示したい内容4 // 102 表示したい内容5 consoleHook.originalConsoleLog('-----'); // -------------------- // [4] console.log を横取りして正規表現で指定 consoleHook.logFilterIncludes('^1\\d\\d$'); // 先頭1 で 3桁の数値 testConsoleLog1(); testConsoleLog2(); // 実行結果 // 101 表示したい内容4 // 102 表示したい内容5 consoleHook.originalConsoleLog('-----'); // -------------------- // [5] console.log を横取りして正規表現で指定して除外 consoleHook.logTitleExcludes('^1\\d\\d$'); // 先頭1 で 3桁の数値 testConsoleLog1(); testConsoleLog2(); // 実行結果 // debug value1= 10 value2= 20 // product value1= 10 value2= 20 // test value1= 10 value2= 20 // 001 表示したい内容1 // 002 表示したい内容2 // 003 表示したい内容3 // 201 表示したい内容6 consoleHook.originalConsoleLog('-----'); |
関数部品をより再利用しやすい部品に仕上げていくこと
こんなふうに、console.logの横取り機能について、より高性能にしていきました。
うちのライブラリにも取り込んでみています。
今回、私がやったように自分の作ったソースコードを、より汎用的にしておくこと、つまりどんな場面にも再利用しやすいようにしておくことによって、今後のプロジェクトでこのコードをコピペしてすぐに使えるようになります。
いつか先の近い将来に向けて、使える武器を作っておくこと、道具磨き・道具の手入れをしっかりやっておくことが、長期的視野ではプログラマとしての自分の武器になります。
みなさんも自分で工夫して作った関数をまとめて、関数群としてライブラリ化していってください。
GitHubアカウントも大事
GitHubアカウントも作り、そこから自分のコードをWebに上げるようにしましょう。そうすると家のパソコンには開発したプログラムが入っているけど仕事場では見ることができない、なんてことがなくなります。
また、「オープンソースとして公開している」ということは、今どきのWeb開発業界では、ちょっとしたPRになります。GitHubアカウントの紹介やQiitaの投稿などは有能な人はほぼやっていることなので、どこまで有利になるかはわかりませんが、やってないよりやっている人が全然いいわけです。
大したことがないものしか公開できていなくても、その方面に明るくてプログラミングが好きなんだな、という印象をもってもらえ、仕事の面談面接などの時にはそれを経歴書・ポートフォリオなどで書くことでよいPRになるわけなので活用していってください。
見られて恥ずかしい、というレベルは誰にでもあるのですが、見られて恥ずかしいからこそ自分の腕をあげなければならない、ということになるので、そういう意味でも、GitHubでソースコードを公開するのはとてもよいですよ。
追記
最新記事はこちらになります。
仕事で使うので console.log の横取り consoleHook.logHook を npm で公開してみました。 | プログラミングアカデミー ゼロプラスワン