JSON.stringify()を使いこなす：詳細ガイド

JavaScriptを使ってJSONを綺麗に印刷する方法

JSON.stringify()は、JSONオブジェクトを文字列に変換する関数です。オプションでスペースやタブを指定することで、整形された文字列を出力できます。

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = JSON.stringify(jsonData, null, 2);

console.log(prettyJson);

上記のコードは、JSONオブジェクトを2スペースのインデントで整形して出力します。

JSON.parse()は、文字列をJSONオブジェクトに変換する関数です。この関数を使ってJSONオブジェクトを解析し、HTML要素を使って整形して出力することができます。

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = JSON.parse(jsonData);

const html = `<pre>
  ${JSON.stringify(prettyJson, null, 2)}
</pre>`;

document.body.innerHTML = html;

ライブラリを使う

JSONを綺麗に印刷するためのライブラリもいくつか存在します。代表的なライブラリは以下の通りです。

これらのライブラリを使うと、より簡単にJSONを綺麗に印刷することができます。

JavaScriptを使ってJSONを綺麗に印刷するには、いくつかの方法があります。それぞれの特徴を理解して、目的に合った方法を選択してください。

JSON.stringify()を使う

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = JSON.stringify(jsonData, null, 2);

console.log(prettyJson);

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
}

JSON.parse()とHTMLを使う

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = JSON.parse(jsonData);

const html = `<pre>
  ${JSON.stringify(prettyJson, null, 2)}
</pre>`;

document.body.innerHTML = html;

出力例:

<pre>
{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
}
</pre>

ライブラリを使う

json-formatterを使う

const jsonFormatter = require('json-formatter');

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = jsonFormatter.format(jsonData);

console.log(prettyJson);

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
}

json-prettyを使う

const jsonPretty = require('json-pretty');

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = jsonPretty.prettyPrint(jsonData);

console.log(prettyJson);

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
}

js-beautifyを使う

const jsBeautify = require('js-beautify');

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = jsBeautify.json(JSON.stringify(jsonData));

console.log(prettyJson);

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
}

JavaScriptでJSONを綺麗に印刷する他の方法

JSON.stringify()のオプションを使う

• replacer: オブジェクトの各プロパティを出力する前に処理する関数です。この関数を使って、プロパティの名前や値を変更したり、特定のプロパティを出力しないようにすることができます。
• space: 出力結果に挿入する空白文字の数を指定します。
• indent: 出力結果のインデント文字を指定します。
• sort: オブジェクトのプロパティをソートするかどうかを指定します。

以下のコードは、JSON.stringify()のオプションを使って、オブジェクトのプロパティをソートし、2スペースのインデントで出力する例です。

const jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main Street",
    "city": "New York",
    "state": "NY"
  }
};

const prettyJson = JSON.stringify(jsonData, null, 2);

console.log(prettyJson);

{
  "address": {
    "city": "New York",
    "state": "NY",
    "street": "123 Main Street"
  },
  "age": 30,
  "name": "John Doe"
}