JSON オンライン整形

左側に JSON を貼り付けるか入力すると、右側でリアルタイムに整形され、折りたためるツリー構造として解析されます。構文エラーがあれば位置をそのまま指摘します。JSON の URL を入力して中身を取得することもできます(相手の API がクロスオリジンを許可している必要があります)。ノードを 1 つずつ展開/折りたたむことも、ワンクリックで全展開/全折りたたみすることもでき、整形と圧縮、ノードのパスと値のコピーにも対応しています。解析はすべてブラウザ内で完結し、入力内容が当サイトに送られることはありません。
JSON の URL
JSON テキスト
入力待ち
ツリー表示
解析結果はここに表示されます。
入力待ち
説明:
1. 入力が変わるたびに自動で解析されるので、ボタンを押す必要はありません。解析に失敗したときは、右側にエラーの位置(行番号 / 列番号)が表示されます。
2. ノードの前にある三角アイコンをクリックすると、そのノードを折りたたんだり展開したりできます。折りたたんでいる間は、含まれる要素の数が表示されます。
3. ノードにマウスを重ねると右側にコピーボタンが現れ、そのノードのパス(例: data.items[0].id)と値をコピーできます。
4. 「エスケープ / エスケープ解除」は、文字列の中に入れ子で保存された JSON を扱うためのものです。たとえばログの中にあるバックスラッシュだらけの JSON 断片などに使います。
5. 上部の「JSON の URL」から、リモートの JSON をそのまま取得できます。Enter キーだけで実行できます。取得できるのは相手がクロスオリジンを許可している場合(レスポンスに Access-Control-Allow-Origin が付いている場合)だけです。ページから Referer を偽装することはできないため、チェックボックスで選べるのは「送る」か「送らない」かだけです。

JSON の整形と検証について

整形と圧縮の使い分け

どちらも変えるのは空白文字だけで、データそのものは同一です。整形は人が読むために改行とインデントを加えるもので、API のデバッグ、ログの確認、設定ファイルのレビューで使います。圧縮は余分な空白をすべて取り除いて容量を減らすもので、リクエストボディに入れる、データベースに保存する、環境変数に詰め込むといった場面で使います。1 行に詰まった JSON は「壊れている」のではなく、読むためのレイアウトがされていないだけなので、貼り付けて整形すれば済みます。手元にあるのが 1 つにまとめたい 2 つの設定ファイルなら、それはJSON 結合の仕事です。このページは 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 の URL」で取得する場合も当サイトを経由しません。リクエストはあなたのブラウザから直接そのアドレスへ送られます。もちろん、そのサーバー自体にはアクセスが記録されるので、社内ネットワークのアドレスや、リンクに token を含む API については各自でご判断ください。

JSON の URL を直接入力できますか?

はい。上部の「JSON の URL」欄にアドレスを入力し、「取得」を押すか Enter キーを押すだけで、中身が左側に取り込まれてすぐ解析されます。 example.com/data.json のような、スキームを省いたアドレスでも構いません。自動的に https://が補われます。ただし、そのアドレスがクロスオリジンアクセスを許可していることが前提です —— ブラウザはレスポンスの中に Access-Control-Allow-Origin を見つけたときだけ、中身をページに渡します。raw.githubusercontent.com、jsDelivr、および多くの公開 API はこの条件を満たしますが、社内ネットワークの API やログインが必要な API はたいてい満たしません。

「取得に失敗しました」と表示されるのはなぜですか?

ほとんどの場合はクロスオリジンによるブロックです。ブラウザはセキュリティ上の理由から失敗の原因をページに伝えず、大まかなエラーしか返しません。そのためツール側も大まかにしか案内できません —— F12 でコンソールを開けば、本当の原因がそこに書かれています。クロスオリジンだと分かった場合、このページ側で回避する方法はありません。当サイトは完全な静的サイトで、代わりに取得できるバックエンドがなく、入力された URL を第三者のプロキシサービスに転送することもしません。それは、アドレスとその中に含まれるかもしれない token をまとめて渡すのと同じだからです。現実的な方法は、JSON をローカルにダウンロードしてから貼り付けるか、 curl などで取得することです。また、http で始まるアドレスは、このページ(https)ではブラウザに混在コンテンツとみなされて直接ブロックされ、リクエスト自体が送信されません。

Referer を自由に設定できますか?

できません。これはブラウザの厳格な制限です。Referer は「変更が禁止されたリクエストヘッダー」に該当し、ページのスクリプトから値を代入しても黙って無視されます。fetch には別途 referrer というオプションがありますが、他人のドメインを指定した場合、ブラウザは同じようにこっそりこのページ自身のアドレスへ戻してしまいます —— どちらの書き方もエラーにはならず、ただ効かないだけです。ですから、Referer を偽装できると謳う Web ツールの裏側には、必ずあなたの代わりにリクエストを送るサーバーがあります。ページが本当に選べるのは 2 通りだけです。既定どおり当サイトのアドレスをリファラーとして送るか、「Referer を送らない」にチェックを入れて一切送らないか —— 後者は、リファラーで直リンク対策をしているアドレスに対して有効です。

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 を文字列型として返すことをおすすめします。

APIのレスポンスにある10桁の数字は何ですか?

ほぼ確実にUnixタイムスタンプです。10桁なら秒、13桁ならミリ秒を表します。整形しても数値のままで、ツリービューが日時に読み替えてくれるわけではありません。タイムスタンプ変換に貼り付ければ対応する日時が分かりますし、逆に日時からタイムスタンプを作ってリクエストパラメータを組み立てることもできます。