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


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

[2018/4/24にアップデート](https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V10.md#10.0.0)があったみたいです。追えてなかった...

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

## console.table()追加

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

ブラウザではこんな感じで使えてて便利でしたけど、Node.jsは今まで使えなかったんですよね。
![](https://i.gyazo.com/d921cafe0eec864d05ea5f9b3558952f.png)

ターミナルでこんな感じに使えるようになりました。
![](https://i.gyazo.com/eb7dc08feb9dd75aab33e0d11c3e35f9.png)

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

* v9系までの`console.log()`

![](https://i.gyazo.com/033a70db6ae59d10fd210c021358a03c.png)

* v10の`console.log()`

![](https://i.gyazo.com/1616274a41c04562bcb2b30b3184692a.png)

これはだいぶ見やすい。
むしろ今までなかったのが不思議なくらい。

## 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()

![](https://i.gyazo.com/3e6fae4b928bb0be5dbb39fef94e181c.png)

* console.table()

![](https://i.gyazo.com/eb7dc08feb9dd75aab33e0d11c3e35f9.png)

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

### パターン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()

![](https://i.gyazo.com/1fe22c54a3dd8c542d54b5c2cae8304f.png)

* console.table()

![](https://i.gyazo.com/df80a0bca1fef6fb31d3a82712235c38.png)

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

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

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

```app.js
const data = {
    name: 'nobisuke',
    H: 175,
    W: 65
}
console.log(data);
console.table(data);
```

* console.log()

![](https://i.gyazo.com/1616274a41c04562bcb2b30b3184692a.png)

* console.table()

![](https://i.gyazo.com/09d9ec1de7fc7968bb4bd362ecb208f8.png)

これくらいだと`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()

![](https://i.gyazo.com/2a9b1d03895811d56d161a2a74150524.png)

* console.table()

![](https://i.gyazo.com/c5c5f50af18578b1d427e20e6c96bd57.png)

`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()

![](https://i.gyazo.com/edc284e70310c9ce1715441adf3108c2.png)

* console.table()

![](https://i.gyazo.com/4bcade12005b3ca1a3c66b11d99fa22a.png)

2階層深くして`sns`のキーまで見ようとすると`[Object]`で省略されてしまいました。
表示の都合上あまり深くは見れない模様。

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

axiosに対してやってみた。

```app.js
const axios = require('axios');
console.log(axios);
console.table(axios)
```

* console.log()

![](https://i.gyazo.com/dbd3a061e3285d6b4c2df55185866234.png)

* console.table()

![](https://i.gyazo.com/f11b63ca3c1c8575f67370f51f08eab9.gif)

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

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

## まとめ

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

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

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