APIのレスポンスやログに出てくるJSONが、改行のない1行で延々と続いていて読めない。設定ファイルを書き換えたら、どこかが間違っていてエラーになる。JSONは整形するだけで、ぐっと読みやすくなります。
この記事では、FlowPocketのJSON整形を使って、JSONを見やすく整形する方法と、よくあるエラーの直し方を紹介します。入力したデータが外部に送られることはありません。
APIキーや顧客データが入ったJSONを、よく知らない整形サイトに貼り付けるのが不安だったので、ブラウザの中だけで整形できるようにしました。
JSONとは
JSON（ジェイソン）は、データをやり取りするための書き方のルールです。WebサービスのAPI、アプリの設定ファイル、ログなど、さまざまな場所で使われています。
基本の形は、{"名前": "値"}のように、名前（キー）と値の組み合わせを波かっこで囲んだものです。値には文字列・数値・true/false・null、さらに配列[ ]や別のオブジェクト{ }を入れ子にできます。
コンピューター同士でやり取りするときは、容量を減らすため改行やスペースを省いた1行の形になっていることがほとんどです。人が読むときは、整形（インデントを付けて改行する）すると構造が見えるようになります。
このツールでできること
- 1行のJSONを、インデント付きで見やすく整形する
- 整形されたJSONを、1行に圧縮する
- インデントをスペース2・スペース4・タブから選ぶ
- キーをABC順に並べ替える
- 構文エラーがあれば、その内容を表示する
- 入力したデータをサーバーに送らず、ブラウザの中だけで処理する
使い方
STEP1. JSONを貼り付ける
JSON整形を開き、「元のJSON」欄にJSONを貼り付けます。
STEP2. 整形か圧縮かを選ぶ
読みやすくしたいときは「整形」、1行にまとめたいときは「圧縮（1行化）」を選びます。結果は自動で下の「結果」欄に表示されます。
STEP3. 必要ならオプションを変える
インデントの幅は、スペース2・スペース4・タブから選べます。2つのJSONを見比べたいときは、「キーをABC順に並べ替え」にチェックを入れると、項目の順番の違いに惑わされずに比べられます。
STEP4. コピーして使う
「結果をコピー」で、整形・圧縮したJSONをコピーできます。構文エラーがある場合は、結果の下にエラーの内容が表示されます。
エラーメッセージには、問題のある位置（何文字目か）が含まれていることが多いので、その周辺を重点的に確認すると早く見つかります。
活用シーン
- APIのレスポンス確認：返ってきたデータの構造や、目的の項目を探す
- ログの調査：1行で記録されたJSON形式のログを読みやすくする
- 設定ファイルの編集：書き換えた設定ファイルに構文エラーがないか確かめる
- データの比較：キーを並べ替えて、2つのJSONの違いを見比べる
よくある質問
よくある構文エラーの原因は？
多いのは次の4つです。
- 最後の項目のあとに余分なカンマがある（
{"a": 1,}） - シングルクォートを使っている（JSONはダブルクォートのみ）
- キーを引用符で囲んでいない（
{name: "a"}） - コメント（
//や/* */）が入っている（JSONはコメント非対応）
JSONとJavaScriptのオブジェクトは同じですか？
似ていますが、JSONの方がルールが厳しくなっています。JavaScriptではキーの引用符を省いたり、シングルクォートを使ったりできますが、JSONではエラーになります。このツールは厳密なJSONのみに対応しています。
数値の桁が多いと値が変わることがありますか？
あります。16桁を超えるような非常に大きな整数（IDなど）は、ブラウザの数値の精度の限界により、整形後に末尾の桁が変わることがあります。大きなIDを扱うAPIでは、IDを文字列として返すのが一般的です。
注意点
- 厳密なJSONのみ対応：コメント入りのJSON（JSONC）や、JavaScriptのオブジェクトはエラーになります
- 巨大なJSONは時間がかかります：数十MBを超えるデータは、ブラウザが重くなることがあります
- Base64でエンコードされている場合は：中身が読めない文字列になっているときは、Base64エンコード・デコードで先に戻してください
まとめ
1行で読めないJSONも、整形するだけで構造がひと目で分かるようになります。FlowPocketのJSON整形なら、APIキーなどを含むデータでも、外部に送ることなく整形できます。
次にAPIのレスポンスを確認するときに、試してみてください。
