JSON整形ツール

このツールについて

API レスポンスやログのペイロードは、たいてい 1 行に圧縮された状態で届きます。整形すれば、アサーションやバグレポートを書くときにフィールド名、ネスト、値をずっと確認しやすくなります。このツールはブラウザ標準の JSON パーサーで入力を解析するため、受け付ける内容はテストコードの JSON.parse とまったく同じです。データはアップロードされず、最後の入力は利便性のためブラウザのローカルストレージに保存されます。

使い方

1. 入力パネルに JSON を貼り付けるか、「Load sample」（サンプルを読み込む）をクリックします。
2. インデントの形式を選びます。2 つのペイロードを比較しやすくしたい場合は、キーをアルファベット順に並べ替えることもできます。
3. 整形結果をコピーまたはダウンロードします。入力が不正な場合は、修正すべき行と列がエラーに表示されます。

よくある JSON 構文エラーの直し方

「JSON が不正」という報告のほとんどは、手書きのペイロードや JavaScript からコピーしたデータが原因です。代表的な原因と対処法は次のとおりです。

• {"a": 1,} や [1, 2,] のように最後の要素の後にカンマがある：最後のカンマを削除します。
• {'a': 1} のように文字列やキーがシングルクォートで囲まれている：JSON ではダブルクォートしか使えません。
• {a: 1} のようにキーがクォートされていない：キーはすべてダブルクォートで囲んだ文字列である必要があります。
• コメント（// や /* */）：JSON にはコメント構文がありません。削除するか、コメント付きの設定は JSONC や JSON5 として明示的に読み込むツールで扱います。
• 値に NaN、Infinity、undefined を使っている：これらは JSON ではありません。null、数値、文字列を使います。
• 文字列の中に生の改行やタブがある：\n や \t としてエスケープします。
• NDJSON のログ 2 行など、2 つのドキュメントをまとめて貼り付けている：1 行ずつ整形します。

テストコードで JSON を整形出力する

テストレポート内のペイロードが読みやすければ、失敗の原因をずっと早く突き止められます。JavaScript や TypeScript では JSON.stringify(value, null, 2) で 2 スペースのインデントになります。Playwright では testInfo.attach('response', { body: JSON.stringify(json, null, 2), contentType: 'application/json' }) で整形済みのボディをレポートに添付できます。

Java の Jackson では mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj)、Python では json.dumps(obj, indent=2, sort_keys=True) を使います。コマンドラインでは jq . response.json でファイルを整形し、色付きで表示できます。

大きな数値は精度が失われる

JSON 自体には数値の大きさの上限はありませんが、JavaScript はすべての数値を 64 ビット浮動小数点数として解析します。一部のデータベース ID のように 9,007,199,254,740,991（2^53 − 1）を超える整数は、黙って丸められます。このツールは JSON.parse を使っているため、そのような ID は出力でも丸められ、ブラウザベースのテストコードでも同じことが起こります。大きな ID を返す API は文字列として送り、テストでも文字列として比較すべきです。

JSON整形ツール のよくある質問