JSONビューア・整形ツール

JSONはどうやって整形・検証しますか？

上の入力欄にJSONを貼り付けるか、ファイルをドラッグして置くと、その場で検証して見やすく整形します。ボタンを押す必要も、サーバーに送信されることもありません。APIのレスポンスをあちこちのオンライン整形ツールに貼り付けるたびに、こっそりデータを記録されていないか気になって、このツールを作りました。

JSONが正しければ、インデントを半角スペース2つで整え直し、キー・文字列・数値・真偽値を色分けして一目で見分けられるように表示します。正しくない場合は、空白の画面ではなく、どこが間違っているかを伝えるエラーメッセージを表示します。

エラーメッセージは何を教えてくれますか？

ブラウザの JSON.parse が入力を拒否した正確な理由を、そのまま表示します。多くのエラーはいくつかのミスから生じます。末尾の項目のあとに残ったカンマ、ダブルクォートの代わりに使ったシングルクォート、クォートを付け忘れたキー、紛れ込んだコメントなどで、JSONはこのどれも許可していません。

メッセージは通常、解析が止まった位置を指し示すので、文書全体を1行ずつ読まなくても、直すべき箇所へすぐに移動できます。

規格に沿ったJSONとはどんなものですか？

JSONは緩い慣習ではなく、きちんと規格化された形式です。JSONを定義する標準は2つあり、ひとつはIETFのRFC 8259（2017年12月発行、インターネット標準 STD 90）、もうひとつはEcma InternationalのECMA-404（第2版、2017年12月）です。どちらも同じ文法を説明しています。RFC 8259は、JSONの型体系の全体を1文でまとめています。

JSONは4つの基本型（文字列・数値・真偽値・null）と、2つの構造型（オブジェクト・配列）を表現できる。

— RFC 8259, 第1節

つまり、ビューアが検証するすべての値は、ちょうどこの6つの型のいずれかです。

型	分類	例
string（文字列）	基本型	"こんにちは"
number（数値）	基本型	42、-3.14、1e5
boolean（真偽値）	基本型	true / false
null	基本型	null
object（オブジェクト）	構造型	{"key": "value"}
array（配列）	構造型	[1, 2, 3]

これらの規格は、ビューアがいくつかの点で厳格な理由でもあります。JSONは末尾の項目のあとのカンマを認めず、いかなる形式のコメントも受け付けず、キーはシングルクォートではなくダブルクォートで囲む必要があります。「不正なJSON」エラーの多くは、この3つから生じます。さらにRFC 8259は、独立したシステム間でやり取りするJSONは「必ずUTF-8でエンコードしなければならない」と定めており、このツールがすべてのファイルをUTF-8で読み込むのもそのためです。正確な文法を知りたい場合は、MDNのJSON.parseのドキュメントが各ルールを例とともに解説しています。

JSONファイルをアップロードしたりドラッグできますか？

はい。アップロードのリンクから .json や .txt ファイルを選ぶか、入力欄の上にファイルをドラッグして置くだけです。ファイルはブラウザの FileReader で端末上で直接読み込み、その場で整形するので、端末の外に出ることはありません。

コピー＆ペーストが面倒な大きなデータ、たとえば書き出した設定ファイルや保存したAPIレスポンスを扱うときに特に便利です。整形が終わったら、コピーボタンできれいに整えた結果をワンクリックでクリップボードに入れられます。

JSONビューアはどんなときに役立ちますか？

開発中に毎日ぶつかる細かな作業で最もよく使います。代表的な例は次のとおりです。

• 1行に圧縮されたAPIレスポンスを、読める形に展開するとき
• コミットする前に設定ファイルが正しいか確認するとき
• ビルドを壊した、ずれた括弧やカンマを見つけるとき
• ブラウザの開発者ツールやログからコピーしたJSONを整えるとき

すべての処理はブラウザ内だけで行われるため、トークンや内部データ、機密情報も外部に漏れる心配なく安心して貼り付けられます。