JSON整形ツールの使い方｜見やすくフォーマットする方法を解説

「APIのレスポンスが1行に長々と並んで読めない」「設定ファイルのJSONを編集していてエラーになる」そんなとき、JSON整形（フォーマット）が必要になります。

この記事では、JSON整形の方法を、整形と圧縮の違い、よくあるエラーとその対処法、ブラウザで完結する整形手順まで解説します。

JSONとは

JSON（JavaScript Object Notation）は、データをテキストで表現する標準形式です。Web APIのレスポンスやアプリの設定ファイルなど、開発のあらゆる場面で使われています。形式はRFC 8259として標準化されています。

{"name":"太郎","age":30,"address":{"city":"東京","zip":"100-0001"}}

上の1行のJSONは、意味的には問題ありませんが、人間には読みづらいですね。**整形（pretty print）**すると、次のように見やすくなります。

{
  "name": "太郎",
  "age": 30,
  "address": {
    "city": "東京",
    "zip": "100-0001"
  }
}

ポイント：整形と圧縮（minify）は見た目を変えるだけで、データの内容は変わりません。サーバーに送る・保存するときは圧縮で軽く、読む・編集するときは整形が便利です。

JSONでよくあるエラーと対処法

JSONはルールが厳格で、小さなミスでもパースに失敗します。よくあるエラーは次のとおりです。

エラー	例	対処法
末尾カンマ	`[1, 2, 3,]`	最後の要素の後ろにカンマを置かない
シングルクォート	`{'name': '太郎'}`	JSONの文字列はダブルクォート（“）で囲む
コメント	`// 説明`	JSONにコメントは書けない（削除する）
キー名のクォート漏れ	`{name: "太郎"}`	キー名もダブルクォートで囲む
文字列のクォート漏れ	`{"age": 30歳}`	文字列はダブルクォートで囲む

実際の例：エラーを修正する

次のJSONはどこが間違っているでしょうか？

{
  "name": "太郎",
  "age": 30,
  "hobbies": ["読書", "散歩",],
}

問題は2つあります。

"hobbies" の配列の末尾にカンマがある（"散歩",）
オブジェクトの末尾にカンマがある（},）

正しくは次のとおりです。

{
  "name": "太郎",
  "age": 30,
  "hobbies": ["読書", "散歩"]
}

注意：JSONはJavaScriptのオブジェクトとは違い、シングルクォートやコメント、末尾カンマが使えません。コピー&ペーストしたコードは「正しいJSON」かどうかバリデーション（検証）で確かめましょう。

JSONを整形する手順

Tools HubのJSON整形ツールを使えば、貼り付けるだけで整形・圧縮・検証ができます。

JSONを貼り付ける

APIのレスポンスや設定ファイルのJSONを入力欄に貼り付けます。

整形・圧縮・検証から選択

見やすく整形するか、圧縮して軽くするか、構文チェックだけ行うかを選びます。

結果をコピー

整形結果を確認し、コピーやダウンロードで利用できます。エラーがあれば行番号付きで表示されます。

この記事で紹介したツール