JSONデータをタブで整形した文字列に変換する方法 | JavaScript / jQuery

この記事ではJavaScriptにおいて、JSONデータをタブなどで整形した文字列に変換する方法を紹介します。

通常のJSON→文字列変換の場合

例えば、以下のようなクラスが存在するとします。

class Person {
  constructor() {
    this.Name = "Chichi";
    this.Age = 40;
    this.Child = null;
  }
}

var p = new Person();
var p2 = new Person();
p2.Name = "Kodomo";
p2.Age = 12;
p.Child = p2;

そのときに以下のようにJSON.stringifyメソッドを使用すると、

console.log(JSON.stringify(p));

下のように連続したJSONとなって、デバッグの際の可読性が悪いです。

{"Name":"Chichi","Age":40,"Child":{"Name":"Kodomo","Age":12,"Child":null}}

次のセクションで整形した文字列に変換する方法を紹介します。

JSONデータを整形した文字列に変換する方法

方法は非常に簡単で、下のコードのように、さきほどのJSON.stringifyの第3引数にタブなどの整形用文字列を指定してあげます(第2引数はnullでOKです)。

console.log(JSON.stringify(p, null, "\t"));

このコードでJSONデータを文字列に変換すると以下のように出力されます。

{
    "Name": "Chichi",
    "Age": 40,
    "Child": {
        "Name": "Kodomo",
        "Age": 12,
        "Child": null
    }
}

出力された文字列を見るとタブで整形されており、非常に可読性が高いですね！