JSON Formatter

JSON Formatterとは？

JSON Formatterは、読みにくい一行JSONを字下げ（インデント）して整形したり、逆に改行・スペースを取り除いて最小化するツールです。 また、入力したJSONの構文チェック（バリデーション）にも使えます。

API開発やデバッグ時にレスポンスの内容を素早く確認したい場面や、package.json や tsconfig.json などの設定ファイルを整理したい場面に役立ちます。

こんな時に便利

• APIレスポンスが1行で返ってきて読めない：ブラウザの開発者ツールやcurlコマンドでAPIを叩くと、レスポンスが改行なしの1行で表示されることがよくあります。そのままコピーしてこのツールに貼り付ければ、階層構造がひと目でわかる形に整形されます。
• ネストが深いJSONで、どの}がどの{に対応するか分からない：整形すると各階層が字下げされるので、開き括弧と閉じ括弧の対応関係が視覚的に追いやすくなります。
• JSONをAPIのリクエストボディやログとして送る前に軽量化したい：整形とは逆に「圧縮」機能を使うと、不要な改行・スペースを削除してデータサイズを小さくできます。
• 手で書いたJSONにタイプミスがないか確認したい：カンマの付け忘れ、クォート漏れなどの構文エラーを、整形実行時にその場で検出できます。

使用例

例1：ネストしたオブジェクトを整形する

入力（1行の圧縮JSON）：

{"user":{"id":1,"name":"Taro","roles":["admin","editor"]},"active":true}

整形後：

{
  "user": {
    "id": 1,
    "name": "Taro",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "active": true
}

userオブジェクトの中にさらにオブジェクトや配列がネストしている場合でも、階層ごとに字下げされるため、どの値がどのキーに属しているか一目で把握できます。

例2：オブジェクトの配列を整形する

APIの一覧レスポンドでよくある「オブジェクトの配列」形式も、要素ごとに区切られて見やすくなります。

入力：

[{"id":1,"price":1200},{"id":2,"price":980}]

整形後：

[
  {
    "id": 1,
    "price": 1200
  },
  {
    "id": 2,
    "price": 980
  }
]

例3：整形済みJSONを圧縮する

逆に、整形済みのJSONを1行に圧縮したい場合は「圧縮する」ボタンを使います。設定ファイルをAPIのクエリパラメータに埋め込む場合など、改行やスペースを含められない場面で役立ちます。

入力: 複数行に整形されたJSON
出力: {"user":{"id":1,"name":"Taro"},"active":true}

構文エラー時の挙動

閉じカンマの付け忘れや、キーのクォート漏れなど、JSONとして不正な入力を整形しようとすると、パーサーがエラー位置に関する情報を返します。エラーメッセージに表示された行・文字位置を手がかりに、該当箇所を修正してから再度お試しください。よくあるミスは次の通りです。

• 配列やオブジェクトの最後の要素にカンマが余分に付いている（末尾カンマ）
• キー名がダブルクォートで囲まれていない（シングルクォートやクォートなし）
• 文字列内の改行やダブルクォートがエスケープされていない