JavaScriptでJSON文字列を整形する方法｜JSON.stringifyの使い方を解説

JavaScriptでJSON文字列を読みやすい形式にフォーマット（整形）したい場合は、JSON.stringify()メソッドの引数を活用しましょう。第2引数と第3引数を指定することで、インデント付きの「見やすいJSON」を出力できます。

JSON.stringifyの基本構文

JSON.stringify(value, replacer, space)

• value: 変換対象のオブジェクト
• replacer: 出力をフィルタリング・変換する関数または配列（通常はnull）
• space: インデントに使うスペースの数（または文字列）

サンプルコード

var details = {
    studentId: 101,
    studentFirstName: 'David',
    studentLastName: 'Miller',
    studentAge: 21,
    subjectDetails: {
        subjectId: 'JavaScript_101',
        subjectName: 'Introduction to JavaScript',
    }
};
console.log("Not Pretty JSON Format=")
console.log(JSON.stringify(details));
console.log("Pretty JSON Format=")
console.log(JSON.stringify(details, null, 3));

プログラムの実行方法

上記のプログラムを実行するには、以下のコマンドを使用します。ここでは、ファイル名をdemo127.jsとして保存しています。

node demo127.js

実行結果

このプログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo127.js
Not Pretty JSON Format=
{"studentId":101,"studentFirstName":"David","studentLastName":"Miller","studentAge":21,"subjectDetails":{"subjectId":"JavaScript_101","subjectName":"Introduction to JavaScript"}}
Pretty JSON Format={
   "studentId": 101,
   "studentFirstName": "David",
   "studentLastName": "Miller",
   "studentAge": 21,
   "subjectDetails": {
      "subjectId": "JavaScript_101",
      "subjectName": "Introduction to JavaScript"
   }
}

ポイントまとめ

• 引数なしのJSON.stringify(details)は、すべてが1行に詰まったコンパクトなJSON文字列を返します。
• 第3引数に数値（例：3）を指定すると、その数のスペースでインデントされ、改行も自動的に挿入されます。
• デバッグやログ出力、設定ファイルの生成など、人間が読む場面では「Pretty Format」が便利です。
• 逆にAPI通信などデータ転送用には、サイズが小さいコンパクト形式が適しています。