1. 導入：なぜJSONの整形が重要なのか？
Web開発をしていると、APIから取得したデータや設定ファイルなどで「JSON」という形式に頻繁に出会います。しかし、多くの場合、それらのデータは改行やスペースがない「圧縮された状態」で提供されます。このままだと人間が中身を理解するのは非常に困難です。JSONを適切に整形（フォーマット）することは、データの構造を把握し、デバッグの時間を短縮するために不可欠なスキルです。
2. 基礎知識：JSONとシリアライゼーション
JSON（JavaScript Object Notation）は、データをやり取りするための軽量なテキスト形式です。そして「シリアライゼーション（Serialization）」とは、プログラム上で扱っているオブジェクト（メモリ上のデータ）を、ネットワーク転送や保存に適した「文字列」に変換することを指します。JavaScriptでは、JSON.stringify() という関数を使ってこの変換を行います。
3. 実装：JSONを読みやすく整形する方法
JavaScriptでJSONを文字列化する際、JSON.stringify() の第3引数に数値を渡すだけで、自動的に改行とインデントが挿入されます。この数値は、1階層あたりの「スペースの数」を意味します。一般的には「2」または「4」がよく使われます。
4. サンプルプログラム
以下のコードをブラウザのコンソールや、Node.js環境で実行してみてください。データの見え方が劇的に変わることが分かります。
// 1. サンプルとなるオブジェクトを作成
const user = {
id: 1,
name: "山田 太郎",
skills: ["JavaScript", "React", "CSS"],
isActive: true
};
// 2. 整形せずに文字列化（圧縮された状態）
const compactJson = JSON.stringify(user);
console.log("--- 圧縮されたJSON ---");
console.log(compactJson);
// 3. 第3引数に「2」を指定して整形（2スペースでインデント）
const formattedJson = JSON.stringify(user, null, 2);
console.log("\n--- 整形されたJSON ---");
console.log(formattedJson);
// 結果：人間が読みやすいように改行とスペースが追加されます
5. 応用・注意点：現場で役立つTips
実務では以下の点に注意してください。
・インデント文字のカスタマイズ
第3引数には数値だけでなく、文字列も指定可能です。例えば “\t” を指定すれば、タブ文字でインデントできます。好みに合わせて使い分けましょう。
・循環参照に注意
オブジェクトが自分自身を指しているような「循環参照」が含まれていると、JSON.stringify() はエラーを吐いて停止します。APIへ送るデータを作る際は、循環参照が含まれていないか事前に確認する癖をつけましょう。
・デバッグ時の活用
開発中にブラウザのコンソールで複雑なオブジェクトを確認する場合、console.table() を使うと、JSONとは別に表形式で綺麗に表示してくれるので、こちらも併せて活用するとデバッグ効率がさらに上がります。