console.logを見やすくする

5387 ワード
テキストリンク

背景

js / ts で開発をしていて
「console.logの値が埋もれてわかりづらいよ〜〜；；」
「この値って何だっけ・・・」
みたいなことがよくあり、最近良い対策を思いついたので共有します（既出ならすみません）

前提

いつも通りにすると
const userData = {
  name: 'console太郎',
  age: 2021,
  type: 'log'
}

console.log(userData)

値のみがconsoleに出力されて追い辛い。。。
ほな変数名も出したろ

配列バージョン
console.log('userData: ', userData)

お！いいやん！！
でもデバッグするたびに打つの嫌やしなぁ。。。
もっといい方法ないかなぁ。。。。

解決策

推し
console.log({userData})

お！！記述量も少ないしわかりやすい！
いいじゃん！！！
てな感じです。

一応解説

ES6からjsはオブジェクトに値を設定するときにkeyと変数名が一致する場合、省略することができます。

const name = 'console太郎';
const obj = {
-  name: name,
+  name,
}

オブジェクトの配列を表示するときのTips

JSONなどで[{}, {}, {}]という形の配列をよく扱いますよね。
どのようなデータが取得できたか確認したい場合があると思います。
その時にconsole.tableを使用すると視覚的にわかりやすくおすすめです。

const obj = [
    {
        "name": "1960",
        "富山県": 1032614,
        "滋賀県": 842695
    },
    ...
    {
        "name": "2045",
        "富山県": 817398,
        "滋賀県": 1262924
    }
]
console.table(obj)

tableのカラム名をクリックすると並び替えもできます！

Desk言語概説
Amazon Lightsailを用いたOmeka Sサイトの構築（独自ドメイン+SSL化を含む）