オンラインで JSON をフォーマット・検証する方法

API、設定ファイル、その他あらゆる構造化データを扱っているなら、JSON は日常的に目にします。圧縮された JSON の壁を見つめながら閉じカッコのないところを探した経験があれば、フォーマットがなぜ大切かはわかるはずです。

JSON フォーマッターが行うこと

API レスポンスや圧縮ファイルから出てくる生の JSON はこんな見た目です:

{"users":[{"name":"Alice","age":30,"roles":["admin","editor"]},{"name":"Bob","age":25,"roles":["viewer"]}]}

フォーマッターはこれを読みやすい形に変換します:

{
  "users": [
    {
      "name": "Alice",
      "age": 30,
      "roles": ["admin", "editor"]
    },
    {
      "name": "Bob",
      "age": 25,
      "roles": ["viewer"]
    }
  ]
}

データは同じですが、これでようやく読めて、エラーが見つけられて、構造が理解できます。

オンラインで JSON をフォーマットする方法

1. JSON を貼り付ける — 入力フィールドに貼り付けます。フォーマッターは構文エラーを即座に検出し、構造を検証します。
2. インデントを選ぶ — スペース 2 つか 4 つを選ぶか、「ミニファイ」をクリックして 1 行に圧縮します。
3. 結果をコピー — フォーマット済みの出力にはシンタックスハイライトが付きます。コード、設定ファイル、ドキュメントにコピーしてください。

よくある JSON エラーと見つけ方

ほとんどの JSON エラーは、いくつかのよくある落とし穴に絞られます:

• カンマの抜けや過剰 — 配列やオブジェクトの最後の要素の後にカンマを入れると JSON では無効です(JavaScript と違って)
• キーが引用符で囲まれていない — JSON はすべてのキーをダブルクォートで囲む必要があります:"name" であって name ではありません
• シングルクォート — JSON はダブルクォートのみ受け付けます:"value" であって 'value' ではありません
• 末尾のカンマ — {"a": 1,} は無効です。最後のエントリの後のカンマを取り除いてください

優れたフォーマッターはエラーの位置を正確にハイライト表示するので、推測なしに修正できます。

フォーマットすべきとき、ミニファイすべきとき

フォーマット(読みやすくする)が必要なのは:

• データを読んで理解したいとき
• API レスポンスをデバッグするとき
• 設定ファイルを編集するとき
• 同僚と JSON を共有するとき

ミニファイが必要なのは:

• ネットワーク経由でデータを送信するとき(ペイロードが小さい = 転送が速い)
• 可読性が重要でないデータベースやログに JSON を保存するとき
• URL パラメータやフォームフィールドに JSON を埋め込むとき

JSON を扱うヒント

• 送信前に検証 — API リクエストを手動で組み立てるなら、まず JSON をバリデーターに貼り付けましょう。たった 1 つのカンマの位置がサーバー側で混乱を招くエラーを引き起こすことがあります。
• 深くネストしたデータには 2 スペースのインデントを使う。行が短く保たれ、構造を追いやすくなります。
• ツールをブックマーク — JSON を頻繁に扱うなら、毎回検索するよりワンクリックで開けるフォーマッターがある方が時間の節約になります。