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

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にする価値がある気がしました笑