JSON整形と検証のイメージ

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

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

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

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

ネストの深さ

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

値の型

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

構文エラー

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

実務でよくある使い方

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

DevToolKitsでJSONを確認する

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

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

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