【JavaScript】プリントデバッグあれこれ

葛の葉です。

JavaScriptでプリントデバッグあれこれのことを書きます。

とりあえずみて

class Piyo {
    constructor(num, str){
        this.num = num * 3;
        this.str = str;
        this.test = ["唐揚げ", "焼き芋", "醤油指し"]
    }
}

const Test1 = "hogehoge";
const Test2 = {message: "this is message", fruits: "orange", memos:["abc", "def", "ghi"]};
const Test3 = new Piyo(4, "zircon");

console.log('---log---');
console.log(Test1);
console.log(Test2);
console.log(Test3);

// 変数名と共に表示させたい場合
console.log('---VAR = ${VAR}---');
console.log(`Test1 = ${Test1}`);
console.log(`Test2 = ${Test2}`);
console.log(`Test3 = ${Test3}`);

console.log('---JSON.stringify---');
console.log(`Test1 = ${JSON.stringify(Test1)}`);
console.log(`Test2 = ${JSON.stringify(Test2)}`);
console.log(`Test3 = ${JSON.stringify(Test3)}`);

console.log('---{}---');
console.log({Test1});
console.log({Test2});
console.log({Test3});

結果は以下のようになる。

---log---
hogehoge
{ message: 'this is message',
  fruits: 'orange',
  memos: [ 'abc', 'def', 'ghi' ] }
Piyo { num: 12, str: 'zircon', test: [ '唐揚げ', '焼き芋', '醤油指し' ] }
---VAR = ${VAR}---
Test1 = hogehoge
Test2 = [object Object]
Test3 = [object Object]
---JSON.stringify---
Test1 = "hogehoge"
Test2 = {"message":"this is message","fruits":"orange","memos":["abc","def","ghi"]}
Test3 = {"num":12,"str":"zircon","test":["唐揚げ","焼き芋","醤油指し"]}
---{}---
{ Test1: 'hogehoge' }
{ Test2: 
   { message: 'this is message',
     fruits: 'orange',
     memos: [ 'abc', 'def', 'ghi' ] } }
{ Test3: Piyo { num: 12, str: 'zircon', test: [ '唐揚げ', '焼き芋', '醤油指し' ] } }

文字列の中にObjectや配列を入れるとobject Objectという表示までしかしない。そうったObjectや配列はJSON.stringify()を使ってJSON型にすると表示されるということをやっていました。そして、今日、たまたまツイッター見てたら{}を使って表示すると便利ということがわかりました。{}を使うと最初のKeyが変数名になります。

で、そのツイッターのツイートをロストしてしまった。もうしわけない

追記

.や[]を使ってプロパティやメンバーを見たい場合{}は使えないようだ。

const Test3 = new Piyo(4, "zircon");

console.log({Test3.test})
/* 
console.log({Test3.test})
                  ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3
*/

そのような場合はJSON.stringify()を使ってあげる。

console.log(`Test3.test = ${JSON.stringify(Test3.test)}`)
// Test3.test = ["唐揚げ","焼き芋","醤油指し"]