JSONとJSON整形の概要・基礎知識
JSON（JavaScript Object Notation）は、キーと値のペアや配列を組み合わせてデータ構造を表現する軽量なフォーマットで、RFC 8259として標準化されています。Webアプリケーションのバックエンドとフロントエンドの間でやり取りされる定番形式であり、外部APIのレスポンス、設定ファイル、ログ出力にも広く採用されています。整形（フォーマット）されていないJSONは1行に圧縮されていることが多く、構造を目視で追うのが困難なため、改行とインデントを付けて読める形にする処理が「JSON整形」です。本ツールはブラウザの JSON.parse と JSON.stringify を使い、入力データを外部送信せず端末側で整形します。
整形の仕組みとサポート対象
| 項目 | 内容 |
|---|---|
| パース処理 | JSON.parse による構文チェックと木構造への変換 |
| 出力 | JSON.stringify(value, null, indent) でインデント付き文字列に再変換 |
| インデント | 2スペース／4スペース／タブの3種類から選択可能 |
| サポート型 | オブジェクト・配列・文字列・数値・真偽値・null |
| 非対応 | JSON5（末尾カンマ・コメント）、JSONL（改行区切り）、BSON |
使い方の流れ
- 整形したいJSONを「JSONを入力」欄に貼り付けます。APIレスポンスやログのコピーをそのまま貼り付けてください。
- インデントを「2スペース／4スペース／タブ」から選びます。GitHub上のリポジトリは2スペース、社内コーディング規約に合わせる場合は4スペースが無難です。
- 「整形する」を押すと、色分けされた整形結果が表示されます。キー・文字列・数値・真偽値がそれぞれ別の色で表示されるため、構造を直感的に追えます。
- 結果欄の下にキー数・ネスト深さ・サイズが表示されるので、データ規模の把握にも使えます。
- 「コピー」で整形済みJSONをクリップボードに転送し、エディタやチャットに貼り付けてレビューします。
こんな場面で使う
- API開発・デバッグ：バックエンドが返す圧縮済みJSONを整形して、フロントエンドに渡すべきフィールドが正しく入っているかを目視で確認できます。
- ログ調査：CloudWatch・Stackdriver・Datadog等から取り出したJSONログを整形し、エラー発生時のパラメータを素早く読み取れます。
- 設定ファイルのレビュー：package.json、tsconfig.json、.eslintrc.json などの設定ファイルが破損していないかチェックする用途に使えます。
- 外部サービス連携：Stripe、Slack、LINE Messaging APIなどのWebhookペイロードを保存しておき、後から整形して中身を確認するのに便利です。
- 学習・教材作成：JSONの構造を初心者に説明する際、整形して階層を可視化することで理解が早まります。
使う前に知っておきたい注意点
- JSONはダブルクォート必須です。シングルクォートで囲まれた文字列、末尾カンマ、コメントが含まれているとエラーになります。JavaScriptオブジェクトリテラルとは別物である点に注意してください。
- 巨大なJSON（数十MB以上）はブラウザのメモリを大量に消費し、タブがフリーズする恐れがあります。サーバー側のCLI（jq、prettier）を使うのが安全です。
- キーの順序は
JSON.stringifyが挿入順を保ちますが、JSON仕様上は順序保証がありません。差分比較する場合はソート機能のあるツールを併用してください。 - 数値の精度はIEEE 754倍精度浮動小数で扱われます。
9007199254740993のような大きな整数は丸められる可能性があるため、IDは文字列で扱うのが安全です。
用語の補足
- ネスト深さ：オブジェクト・配列が何重に入れ子になっているかを示す数値。深すぎる構造は可読性を下げるサインです。
- JSON Schema：JSONの構造を定義するための仕様。APIの入出力契約を明示する際に使われます。
- JSON Pointer：JSON内の特定の値を
/users/0/nameのようなパス表記で参照する仕組み。RFC 6901として定義されています。
