あなたのJSONを一度も見ないJSON整形ツール。

JSON beautifier はドキュメントを読み込み、オブジェクト、配列、文字列、数値、真偽値、null からなる木構造へとパースし、その木を1行に1つの値と一定のインデントで書き戻します。大事なのはパースするという点です。正規表現でカンマのたびに改行を挿入しているわけではありません。ウェブに転がっているスニペットの多くはそのやり方で、カンマや波かっこを含む文字列を黙って壊してしまいます。

ここからすぐに気づく帰結があります。正しいJSONでないドキュメントは整形できません。出力すべき木が存在しないからです。このサイトで整形と検証が2つのボタンではなく同じ操作になっているのはそのためで、無効なテキストを貼ったときに空の出力欄ではなく、行と列と「何が期待されていたか」が返るのもそのためです。

文字列の外側の空白はJSONでは何の意味も持ちません。RFC 8259 は任意のトークンの間にスペース、タブ、復帰、改行を許しているので、整形し直してもドキュメントの意味は変わりません。一方で文字列の内側の空白はデータであり、元のまま手を触れずに残されます。木構造ではなくテキストを相手に処理する整形器はこの2つを区別できません。整形がペイロードを壊す原因として、これが最も多いパターンです。

キーの順序は保たれます。仕様上オブジェクトは順序を持たないことになっていて、何かがその順序に依存してはいけないのですが、貼り付けたときの順序は差分表示やコードレビュー、そして読む人間がほぼ常に期待する順序です。キーを並べ替えれば、以後の比較がすべて無駄に騒がしくなるだけで、得るものはありません。

左の欄に貼り付けて「整形」を押してください。整形されたドキュメントが右に現れ、そのままコピーもダウンロードもできます。アカウントもアップロード手順も1日あたりの上限も、どこにも課金の壁もありません。JSON beautifier をオンラインで無料で探している人の多くが求めているのは、デスクトップ製品の体験版ではなく、まさにこれです。

既定のインデントは半角2文字で、多くの言語エコシステムとスタイルガイドが落ち着いた値です。リポジトリ側ですでに決まっているなら4文字とタブも選べます。その選択はサーバーではなくブラウザのローカルに覚えられます。覚えておくためのサーバーが存在しないからです。

すべてが Web Worker の中で動くので、ドキュメントをパースしている間も画面は反応し続けます。100 KB のペイロードでおよそ9〜13 ms、1 MB で70〜119 ms、10 MB でおよそ0.6〜0.8秒です。デスクトップ機1台で2回測った値なので、ベンチマークではなく幅として受け取ってください。ただし意味があるのは規模の方です。10 MB はメインスレッドを完全に固めるには十分な仕事量であり、ここではメインスレッドで動いていません。

初回訪問のあとページはキャッシュされるので、このオンライン JSON beautifier はネットワークを切っても動き続けます。service worker の小細工ではありません。処理をすべて手元で行う静的ページの自然な帰結です。ネットワークがなくなれば解析の ping が失敗するだけで、どのツールもそのまま動き続けます。もともとどれもサーバーを必要としていないからです。

大半の整形ツールはテキスト欄とボタンだけです。貼ったものが入り、整形されたテキストが出て、ドキュメントが壊れていたら自分のエディタに戻って当てずっぽうを始めることになります。ここの欄は本物のコードエディタで、シンタックスハイライト、かっこの対応表示、コード折りたたみ、インクリメンタル検索、行内のエラーマーカーを備えています。貼ったものをその場で直し、ページを離れずに整形し直せます。

折りたたみは見かけよりずっと重要です。4,000行の設定ファイルは、インデントされただけでは読めるようになりません。実際に読めるようにするのは、関心のある枝以外をすべて畳むことであり、それは整形器ではなくエディタの性質です。

同じドキュメントをテキストではなく折りたためる木として見たいなら、JSONビューアがその形で表示します。検証は最初の1件で止まらず、すべての問題を報告します。修復はシングルクォート、末尾カンマ、引用符のないキーといった「ほぼJSON」を扱い、行った変更をすべて列挙するので、修正ではなく判断が入ったものだけを拒否できます。

最良のJSONビューア兼 JSON beautifier をオンラインで探している人が本当に尋ねているのは、どのツールも正しくできるインデントのことではありません。ツールが壊れるドキュメントのことです。JavaScript が保持できる範囲を超える整数、重複キー、チャットクライアントやワープロから紛れ込んだ不可視文字。それらはここで扱われ、上のカードに実際の出力として示されています。議論する価値があるのはその部分だけです。

ブラウザのタブが常に作業したい場所とは限りません。ファイルがすでにエディタで開いているなら、いちばん速い JSON beautifier はそこでキーに割り当てられているものです。

Notepad++ にJSON整形機能は入っていません。定番の答えは JSTool プラグインです。Plugins から Plugins Admin を開き、JSTool を検索してインストールし、再起動すると Plugins、JSTool、JSFormat にコマンドが現れます。動作しますし、日常的なペイロードにはこれが正しい道具です。ただし JSTool は数値を64ビット浮動小数点としてパースするため、9007199254740991 を超える Twitter や Snowflake 形式のIDは、入れたときとは違う桁で、何も言わずに返ってきます。

Sublime Text では Pretty JSON パッケージを使います。Package Control から入れ、既定で Ctrl+Alt+J に割り当てられます。Python を通して整形するので大きな整数はそのまま正確に残り、これは JavaScript ベースの選択肢に対する実質的な利点です。その代わり重複キーは何も告げずに捨て、最後の1つだけを残します。

VS Code はプラグインすら要りません。ドキュメントのフォーマット、Windows と Linux では Shift+Alt+F、macOS では Shift+Option+F で、エディタがJSONと認識したファイルを整形します。コマンドパレットには Format JSON という専用コマンドもあります。

これらのどれもが与えてくれないのが診断です。有効なドキュメントを整形し、無効なものは拒否する。ドキュメントが無効で4万行になるその日までは、それで何の問題もありません。このページが想定しているのはまさにその場面であり、プラグインのインストールを許されていないマシンもまた同じです。

Chrome の JSON beautifier 拡張機能は、確かに有用なことをしています。application/json として返ってきたレスポンスを横取りし、アドレスバー上で整形済みかつ折りたためる形で描き直すので、いじっているAPIが整形ツールを往復しなくても読めます。Firefox はバージョン44から同じことを標準で行っており、そのための拡張機能は一切不要です。

インストールする前に、その代償を読む価値があります。訪問先のあらゆるAPIのページを書き換えるために、拡張機能は「すべてのウェブサイトでデータを読み取り、変更する」権限を要求しなければなりません。これは Chrome が与える中で最も広い権限です。その権限は銀行にも、メールにも、勤務先の管理コンソールにも及び、その後に拡張機能が配信するあらゆる無言の更新をまたいで残り続けます。信頼する理由のある開発者が公開した JSON beautifier 拡張機能を入れるのは妥当ですが、検索結果の一番上だったからという理由で入れるのは妥当ではありません。

このページにはそのどれも必要ありません。Chrome でも Firefox でも Safari でも Edge でも同じように動き、何もインストールせず、あなたが訪れるほかのどのサイトに対しても権限を持ちません。ページは拡張機能ではないからです。読めるのは自分自身だけで、ほかには何も読めません。横取り型の拡張機能との違いは、貼り付けというキー操作が1つ増えることだけです。

これにライブラリは要りません。JSON.stringify にはインデントを制御する第3引数があり、あらゆる JavaScript ランタイムに組み込まれています。JSON.stringify(value, null, 2) は半角2文字でインデントし、数値ではなく文字列を渡す JSON.stringify(value, null, "\t") はタブでインデントします。

結果をページに流し込むところが、HTML での JSON beautifier がしくじる場所です。出力は <pre> 要素の中に置かなければ連続した空白が潰れて整形が台無しになりますし、HTMLとして挿入する前にエスケープしなければなりません。さもなければ </script> や不等号を含む文字列値を、マークアップとしてパーサーに手渡していることになります。それは手順が少し増えただけのクロスサイトスクリプティングの穴です。

React ではそのエスケープがすでに済んでいます。デバッグ目的でいえば <pre>{JSON.stringify(data, null, 2)}</pre> がReact の JSON beautifier のすべてであり、React は補間したテキストを既定でエスケープするので、信頼できない入力に対しても安全です。規則は単純で、JSONを描画するために dangerouslySetInnerHTML に手を伸ばさないことだけです。その保証を失う道はそれ1つしかありません。

これらすべてに共通する注意点が数値の精度です。JSON.parse はあらゆる数値を double に変えるので、2^53-1 を超える識別子は JSON.stringify が見るより前にすでに別の数になっており、どれだけ整形しても桁は戻りません。大きなIDを含むペイロードを扱うなら、先に2^53-1 を超える整数に何が起きるのかを読んでください。このページの beautifier は貼り付けられた桁をそのまま出し直します。その出力と JSON.parse を往復させた結果が必ずしも一致しないのは、そのためです。