JSON オンライン整形

左側に JSON を貼るか入力すると、右側がリアルタイムに整形し、折りたたみ可能なツリーへ解析します。構文エラーがあれば位置をそのまま指摘します。ノードごとの展開/折りたたみ、ワンクリックで全展開/全折りたたみ、整形と圧縮、パスと値のコピーに対応。解析はすべてブラウザ内で行われ、データは送信されません。
JSON テキスト
入力待ち
ツリー表示
解析結果はここに表示されます。
入力待ち
説明:
1. 入力が変わるたびに自動で解析されるので、ボタンを押す必要はありません。解析に失敗したときは、右側にエラーの位置(行番号 / 列番号)が表示されます。
2. ノードの前にある三角アイコンをクリックすると、そのノードを折りたたんだり展開したりできます。折りたたんでいる間は、含まれる要素の数が表示されます。
3. ノードにマウスを重ねると右側にコピーボタンが現れ、そのノードのパス(例: data.items[0].id)と値をコピーできます。
4. 「エスケープ / エスケープ解除」は、文字列の中に入れ子で保存された JSON を扱うためのものです。たとえばログの中にあるバックスラッシュだらけの JSON 断片などに使います。

JSON の整形と検証について

整形と圧縮の使い分け

どちらも変えるのは空白文字だけで、データそのものは同一です。整形は人が読むために改行とインデントを加えるもので、API のデバッグ、ログの確認、設定ファイルのレビューで使います。圧縮は余分な空白をすべて取り除いて容量を減らすもので、リクエストボディに入れる、データベースに保存する、環境変数に詰め込むといった場面で使います。1 行に詰まった JSON は「壊れている」のではなく、読むためのレイアウトがされていないだけなので、貼り付けて整形すれば済みます。

解析エラーでよくある原因

頻度の高い順におおよそ次のとおりです。最後の要素の後ろに余分なカンマがある。ダブルクォートではなくシングルクォートを使っている。ダブルスラッシュのコメントを書いている。キーが引用符で囲まれていない。値に NaN や undefined、あるいは Python 風の True / None が入っている。文字列の中にエスケープされていない改行やバックスラッシュがある。これらはいずれも JavaScript や Python のソースでは正しい書き方ですが、JSON の規格では認められていないため、コードから断片をコピーしてきたときに特に踏みやすい落とし穴です。目に見えないケースとしては、ファイル先頭に BOM や不可視の空白が付いている場合もあり、メモ帳から保存したときやウェブページからコピーしたときに紛れ込むことがあります。

API のレスポンスをツリーで見る理由

実際の API レスポンスは 5 階層も 6 階層もネストしていることが珍しくなく、インデントだけを頼りに探すのは骨が折れます。ツリー表示なら、関係のない枝を畳み、配列の要素数や目的のフィールドの深さを一目で把握でき、ノードのパスをそのままコピーしてコードに貼れます。本番の不具合を追うとき、ログの中の JSON は文字列としてもう一段ネストされ、バックスラッシュだらけになっていることが多いので、先にアンエスケープしてから解析すれば正しく展開できます。

JSON と JavaScript のオブジェクトは別物

JSON はデータ交換のための形式で、型はオブジェクト・配列・文字列・数値・真偽値・null の 6 種類だけです。キーは必ずダブルクォートで囲む必要があり、関数、日付オブジェクト、コメント、末尾のカンマはいずれも許されません。JavaScript のオブジェクトリテラルはこれよりずっと緩やかです。また JSON は数値の精度に上限を定めていない一方、多くのパーサーは倍精度浮動小数点として扱うため、2 の 53 乗を超える整数(Snowflake 方式で生成された ID など)は末尾の数桁が失われます。この種のフィールドは API の段階で文字列として渡すことをおすすめします。

よくある質問

JSON データはサーバーにアップロードされますか?

されません。解析、整形、ツリー表示、コピーはすべてブラウザ内の JavaScript で完結します。このページにはバックエンドがなく、貼り付けた内容がどこかに送られることもありません。社内向けのフィールドを含む API レスポンス、ログの断片、設定ファイルの確認にも安心して使えます。

JSON の解析に失敗したと表示されたときはどうすればよいですか?

右側にブラウザが返したエラーメッセージと、おおよその行番号・列番号が表示されます。よくある原因は、ダブルクォートではなくシングルクォートを使っている、キー名に引用符がない、最後の要素のあとにカンマが残っている、コメントが混ざっている、コピー時に JSON が途中で切れている、などです。表示された位置を見て修正してください。

とても大きな JSON を開くと少し遅いのはなぜですか?

ツリー表示はノードごとに DOM 要素を作るため、ノード数が非常に多いと描画が遅くなります。このツールは巨大な文書では最初の数階層だけを展開し、残りは折りたたんだまま、展開時に描画することで引っかかりを大きく減らしています。ファイルが特に大きい場合は、必要な部分だけを切り出してから表示することをおすすめします。

「エスケープ / エスケープ解除」ボタンは何をするものですか?

ログやデータベースの項目には、JSON をそのまま文字列として保存しているものがあり、中身が \" のようなバックスラッシュだらけになっています。「エスケープ解除」を押すと、そうした文字列を通常の JSON に戻して解析できます。逆に「エスケープ」を押すと、現在の JSON を文字列の中に埋め込める形に変換します。

特定のノードのパスだけをコピーできますか?

できます。任意のノードの行にマウスを重ねると右側にコピーアイコンが現れ、クリックするとそのノードのアクセスパス(例: data.items[0].name)がコピーされ、コードやデバッグツールにそのまま貼り付けられます。Shift を押しながらクリックすると、そのノードの値をコピーします。

JSON5 や JSONC、コメント付きの JSON に対応していますか?

解析にはブラウザ標準の JSON.parse を使うため、対応するのは標準の JSON 構文だけです。コメント、シングルクォート、末尾のカンマ、引用符のないキー名は使えません。内容が JSON5 / JSONC の場合は、あらかじめこれらの拡張記法を手動で取り除いてください。

とても大きな数値は正確に表示されませんか?

JavaScript の数値には精度の限界があり、2^53 を超える整数(たとえば Snowflake ID)は解析後に下位の数桁が変わることがあります。これは JSON.parse を使うすべてのツールに共通する制限です。このようなフィールドがある場合は、サーバー側で ID を文字列型として返すことをおすすめします。