JSONはまず読みやすくするところから始まる

APIレスポンス、Webhookのペイロード、ブラウザのログ、設定ファイルなど、開発中にJSONを確認する場面は何度もあります。
ただし実際に手元へ届くJSONは、改行のない1行形式だったり、深いネストを含んでいたり、文字列の中にエスケープが混ざっていたりします。

JSON整形・検証の基本：APIレスポンスを読みやすく安全に確認する方法

この状態のまま目で追うと、必要な値を見落としたり、配列とオブジェクトの境界を勘違いしたりしがちです。
まずはJSONを整形し、構造を読み取れる状態にすることがデバッグの第一歩です。

例えば、次のような1行のレスポンスが届いたとします。

{"id":42,"name":"Alice","roles":["admin","editor"],"profile":{"city":"Tokyo"}}

整形すると、ネストと配列の構造が一目でわかるようになります。

{
  "id": 42,
  "name": "Alice",
  "roles": ["admin", "editor"],
  "profile": {
    "city": "Tokyo"
  }
}

整形で確認したいポイント

ネストの深さ

JSONを整形すると、どのプロパティがどのオブジェクトに属しているかがはっきりします。
APIのレスポンスで user.profile.name のような階層を確認したいときや、配列の中に同じ形のオブジェクトが並んでいるかを見るときに役立ちます。

値の型

見た目は同じでも、"123" は文字列で、123 は数値です。
"true" と true、null と空文字も扱いが異なります。
JSON整形後に値の型を確認しておくと、フロントエンドの表示崩れやバリデーションの失敗を早めに見つけられます。

構文エラー

余分なカンマ、閉じ忘れた波括弧、クォート漏れは、JSONでよくあるエラーです。
JSON整形ツールでパースできるか確認すれば、アプリケーション側の処理に渡す前に問題を切り分けられます。

次の例には、JSONとしては無効な箇所が2つあります。

{
  "name": "Alice",
  "tags": ["a", "b",],   // 末尾の余分なカンマ
  age: 30                 // キーがクォートで囲まれていない
}

JSONでは末尾カンマやコメント、クォートなしのキーは許されません。手書きのJSONやJavaScriptのオブジェクトリテラルをコピーしたときに混入しがちなので、整形ツールでパースが通るかを最初に確認すると安全です。

実務でよくある使い方

  • APIレスポンスの確認: ブラウザのNetworkタブやcurlの出力を貼り付け、必要なフィールドが返っているか確認します。
  • ログの調査: 1行で出力された構造化ログを整形し、エラー原因に関係するキーを探します。
  • サンプルデータの整理: ドキュメントやテストで使うJSONを読みやすい形に整えます。
  • 型定義の準備: 整形済みJSONをもとにTypeScript型、Zodスキーマ、OpenAPIスキーマへ展開します。

DevToolKitsでJSONを確認する

JSON整形ツール にJSONを貼り付けると、ブラウザ上で整形と検証を行えます。
機密情報を含むレスポンスを扱う場合でも、まずローカルで確認できるツールを使うと安心です。

整形したJSONは、必要に応じて次のツールにもつなげられます。

JSONはただのデータ形式に見えて、デバッグ、型安全、ドキュメント化の入口になります。
最初にきれいに整形して構造を把握しておくと、その後の作業がかなり楽になります。

よくある質問

JSONにコメントや末尾カンマは書けますか？

標準のJSONでは、コメントも末尾カンマも使えません。これらを許容するのはJSON5やJSONCといった拡張仕様で、設定ファイルなど一部のツールが独自に対応しているものです。APIのやり取りで使う場合は、標準JSONとして有効かを整形ツールで確認してください。

機密情報を含むJSONを外部ツールに貼り付けても大丈夫？

APIキーや個人情報を含むレスポンスを、処理内容が不明な外部サービスへ送るのは避けたほうが安全です。JSON整形ツールはブラウザ内で処理が完結し、入力データをサーバーへ送信しないため、機密データの確認にも使えます。

整形したあとは何をすればいい？

整形して構造を把握したら、用途に応じて型定義やバリデーション、API仕様書へ展開できます。型が欲しいならTypeScript型生成、実行時チェックならZodスキーマ生成、仕様共有ならOpenAPI生成が出発点になります。