Edited at

Node.js v10.0.0でconsole.table()追加&console.log()アップデートに感動したので早速試してみる

More than 1 year has passed since last update.

Node.jsついに二桁の大台にのりましたね。

2018/4/24にアップデートがあったみたいです。追えてなかった...

ちょい使って感動したので勢いで書いてます。


console.table()追加

console.log()よりも配列やオブジェクトを綺麗に表示してくれるメソッドです。

ブラウザではこんな感じで使えてて便利でしたけど、Node.jsは今まで使えなかったんですよね。

ターミナルでこんな感じに使えるようになりました。


console.log()に色がついて見やすくなっている


  • v9系までのconsole.log()


  • v10のconsole.log()

これはだいぶ見やすい。

むしろ今までなかったのが不思議なくらい。


Node.jsでconsole.table()を試してみる

console.log()の表示とconsole.table()の表示をそれぞれ試します。


パターン1 - 通常の配列

通常の配列です。


app.js

const data = [1,3,4,5,3,1,21,3];

console.log(data);
console.table(data);


  • console.log()


  • console.table()

これくらいだとどちらでも良いかも


パターン2 - ネストしてる配列

配列の中の要素に配列が入れ子的に含まれるものです。


app.js

const data = [1,3,[4,4,4,4,[1,1,1,1]],5,3,1,21,3];

console.log(data);
console.table(data);


  • console.log()


  • console.table()

これはconsole.table()のほうが圧倒的に見やすいですね。


パターン3 - JSONオブジェクト

通常のJSONオブジェクトです。


app.js

const data = {

name: 'nobisuke',
H: 175,
W: 65
}
console.log(data);
console.table(data);


  • console.log()


  • console.table()

これくらいだとconsole.log()でも良さそうだけどconsole.table()のほうが好きな人もいそう。


パターン4 - ネストしてるJSONオブジェクト

JSONが階層構造になっています。


app.js

const data = {

name: 'nobisuke',
sns: {
qiita: 'n0bisuke',
twitter: 'n0bisuke',
github: 'n0bisuke'
},
H: 175,
W: 65
}
console.log(data);
console.table(data);


  • console.log()


  • console.table()

console.log()よりもconsole.table()のほうが階層の表現に見やすさがあります。

この辺で感じたのが、console.table()も色あると嬉しい


パターン5 - 更にネストしてるJSONオブジェクト

更に深くしてみました。


app.js

const data = {

body: {
H: '175',
W: '65',
},
belongto: 'dotstudio',
name: {
sns: {
qiita: 'n0bisuke',
twitter: 'n0bisuke',
github: 'n0bisuke'
},
real: [
'nobisuke',
'sugawara'
],
}
}
console.log(data);
console.table(data);


  • console.log()


  • console.table()

2階層深くしてsnsのキーまで見ようとすると[Object]で省略されてしまいました。

表示の都合上あまり深くは見れない模様。


パターン6 - ライブラリに対して

axiosに対してやってみた。


app.js

const axios = require('axios');

console.log(axios);
console.table(axios)


  • console.log()


  • console.table()

console.table()だとめちゃ表示崩れて見れたものではないですね苦笑

これくらいの量になると一気に見るならconsole.log()にして、もう少し深いネストの一部分とかでconsole.table()を使ってみるのが良いかも


まとめ

デバッグする際にconsole.log()よりもconsole.table()の方が見やすい場合が割とある(かも)ので覚えておくと良いと思います。

パターン6みたいに崩れるときもあるので全てconsole.table()にすればいいって話ではなさそうです。

console.log()自体がv10にするとかなり見やすくなったと思うのでこの二つだけでv10にする価値がある気がしました笑