JSON を読みやすくする方法を検索したことがあれば、おそらく「JSON viewer」と「JSON formatter」の両方のツールを見かけ、両者が同じものかどうか疑問に思ったことがあるはずです。同じではありませんが、ツールが高機能になるにつれて境界はぼやけてきました。違いを理解すると、適切なツールを選びやすくなります。生の API 出力の整形、デバッグ中の深くネストされたレスポンスの探索、あるいは大きな設定ファイルを迷子にならずに読み通したいときなど、用途に合わせて選べます。
JSON フォーマッターとは何か
JSON フォーマッターは、生の整形されていない JSON —— 通常は 1 行の長い文字列 —— を受け取り、一貫したインデントと改行で書き直します。データ自体は変わらず、変わるのは空白だけです。
// 生の入力
{"user":{"id":42,"name":"Alice","roles":["admin","editor"],"active":true}}
// 整形後(2 スペースインデント)
{
"user": {
"id": 42,
"name": "Alice",
"roles": [
"admin",
"editor"
],
"active": true
}
}フォーマッターはテキスト操作です。JSON 文字列を読み、空白を正規化して、新しい文字列を出力します。多くのフォーマッターは副作用として JSON を検証もします —— JSON が壊れていれば正しくインデントできず、エラーが表面化します。
JSON フォーマッターが得意なこと:
- minify された API レスポンスを数秒で読みやすくする
- チーム内でインデント(2 スペース vs 4 スペース vs タブ)を統一する
- ドキュメントやログ向けに pretty-print した出力を作る
- JSON が妥当かどうかの簡易チェックとして使う
JSON ビューワーとは何か
JSON ビューワー —— 時に JSON reader や JSON explorer とも呼ばれます —— はさらに一歩進んでいます。整形済みのテキストを出すのではなく、JSON をナビゲートできるインタラクティブな構造としてレンダリングします。
JSON ビューワーの肝となる特徴は 折りたたみ可能なノード です。各オブジェクト {} と配列 [] は独立して展開・折りたたみができます。つまり、1 万行のレスポンスのトップレベルを眺め、関心のあるセクションを探し、そのブランチだけ展開し、他をすべて無視できます。
典型的な JSON ビューワーはさらに以下を提供します:
- シンタックスハイライト —— キー、文字列、数値、真偽値、null がそれぞれ別の色になり、構造がすぐにわかる
- 展開/折りたたみ可能なノード —— サブツリー全体を折りたたんで視覚ノイズを減らす
- 子要素数 —— 折りたたんだノードに子要素数が表示される(例:
[...] 24 items) - キー検索 —— 数千行をスクロールせずに特定のキーを見つけられる
JSON ビューワーが得意なこと:
- 大きく、深くネストされた API レスポンスを探索する
- 事前にデータ形状を知らない状態でデバッグする
- 一部のセクションだけが重要な設定ファイルを確認する
- 見慣れない JSON 構造をすばやく把握する
「JSON tree viewer」は同じもの
同じ機能が JSON tree viewer、JSON tree、または collapsible JSON tree と呼ばれることもあります。いずれもドキュメントを展開可能なノードのインタラクティブな階層として描画するビューワーを指します。特にその語で検索したい場合は JSON Tree Viewer: 折りたたみ可能なツリーとして JSON を探索する を参照してください。
実はもう持っています: ブラウザの DevTools
知っておくと便利: Chrome、Firefox、Edge はいずれもレスポンスの Content-Type が application/json のとき、組み込みの折りたたみ可能 JSON ビューワーを描画します。URL を直接開く(あるいは Network タブの Preview を開く)だけで、追加機能なしにツリーが得られます。ちょっと読むには十分ですが、非常に大きなペイロード、「全部折りたたむ」操作、キー検索が必要なら、専用ビューワーが優れます。
本質的な違いを一言で
最もシンプルな考え方は: フォーマッターはテキストの 見え方 を変え、ビューワーはデータとの やり取り を変える、 というものです。
| JSON フォーマッター | JSON ビューワー | |
|---|---|---|
| 出力 | 整形済みテキスト | インタラクティブツリー |
| 折りたたみノード | なし | あり |
| シンタックスハイライト | 時々 | 常に |
| テキストとしてコピー | 可能 | 通常はエクスポート経由 |
| 得意分野 | 出力をきれいにする | 構造を探索する |
JSON フォーマッターを使うべき場面
読みやすいテキスト出力 が必要なときにフォーマッターを使います —— 貼り付けたり、コミットしたり、ログに出したり、同僚に送ったりできるものです。
ターミナルで API レスポンスを読む
curl https://api.example.com/users/42 を実行して minify された JSON の塊が返ってきた場合、フォーマッターに貼ると数秒で読みやすくなります。
コミット前にファイルを標準化する
チームのスタイルガイドが 2 スペースインデントを要求するなら、フォーマッターは手作業なしに一貫して強制してくれます。
簡易な妥当性チェック
壊れている疑いのある JSON をフォーマッターに貼れば、パースできるかすぐにわかります。エラーが出れば JSON は不正、きれいに整形できれば妥当です。
ドキュメントやスクリーンショット
整形済み JSON はドキュメント、README、Slack メッセージなどで、minify された 1 行よりずっと見栄えがします。
JSON ビューワーを使うべき場面
ナビゲートして探 索する 必要があるときにビューワーを使います —— JSON に何が入っているか、どこにあるかをまだ正確に知らないときです。
大きな API レスポンスを探索する
数十のネストされたオブジェクトと配列を持つレスポンスを受け取った場合、トップレベルを折りたたむと構造の地図になります。調べたいブランチだけを展開します。
事前にスキーマを知らずにデバッグする
初めて使うサードパーティ API では、パース処理を書く前に、ビューワーでツリーをクリックしてオブジェクト間の関係を理解できます。
深くネストされた設定を読む
Kubernetes マニフェスト、AWS CloudFormation テンプレートなどは多重ネストになりがちです。5 階層深くに埋もれた設定を見つけるのが、ビューワーがあれば現実的になります。
環境間のデータ形状を比較する
本番のレスポンスとステージングのレスポンスを並べて展開します。折りたたまれたノードによって、どこが違うかが一目でわかります。
良い JSON ビューワーに共通すること
すべての JSON ビューワーが同じわけではありません。便利なものとストレスのたまるものを分けるポイント:
- 全部展開 / 全部折りたたみのコントロール —— ビューを即座にリセットする必要がある。「全部折りたたむ」ボタンがないと、ノードを 1 つずつ閉じる羽目になる
- 大きなファイルでも安定した性能 —— ブラウザベースのビューワーには、数万ノードの JSON で苦しむものもある。優れたツールはそれを難なく扱える
- 正確なシンタックスハイライト —— キーと文字列値は見た目で区別され、数値、真偽値、null もそれぞれ見分けられるべき
- エッジケースを綺麗に処理する —— 空オブジェクト、空配列、null 値、深くネストされた構造はすべて正しく描画される必要がある
- データのアップロードが不要 —— JSON にはしばしば機密データが含まれる。ブラウザ内ですべて処理するビューワーは、データをサーバーに送るものより遥かに安全
JSON Reader: また別物?
「JSON reader」は通常「JSON viewer」と互換的に使われます —— 編集や再整形ではなく、JSON を読んでナビゲートする行為を表します。JSON reader を名乗るツールを見たら、ほぼ確実に折りたたみ可能なツリーベースのナビゲーションを提供します。viewer と同じです。
ときに「reader」はコードの文脈で現れます —— たとえば Java の Gson ライブラリの JsonReader —— が、Web ツールの文脈では reader と viewer は同じ意味です。
両方必要?
はい —— そして良いツールは両方の機能を兼ね備えます。現代の JSON ツールは入力を整形し(インデントを正規化)、かつ ナビゲート可能なツリーとして描画します。整形済みテキストとインタラクティブビューワーは共存し、その時の作業に合うほうを使えます。
違いがとくに効いてくるのは、ツールがどちらか一方に特化しているときです。jq や python -m json.tool のようなコマンドラインフォーマッターはテキスト出力のみ。ブラウザ拡張の専用ビューワーはツリーナビゲーションのみ。日常作業には、両方こなすブラウザベースのツールが最も実用的です。
正しいツールの選び方
主にター ミナルで作業する場合
jq が定番。強力な式言語で JSON を整形、フィルタ、クエリできます。ビューワーはありませんが、スクリプト化されたワークフローでは並ぶものがありません。
コードエディタで作業する場合
Prettier 拡張を入れた VS Code は保存時に JSON を整形します。ツリーナビゲーションは、ほとんどのブラウザの DevTools に組み込まれた JSON エディタが意外と高機能です。
貼って見るだけの素早い解決策が欲しい場合
ブラウザベースのツールが最速。入力中に検証してくれて、折りたたみ可能なツリービューを備え、大きなファイルでもフリーズせず、データをローカルに保つものを選んでください。fixjson の JSON ビューワー はすべてこれを満たします —— JSON を貼ればツリーが即座に描画され、いかなるサーバーにもデータは送信されません。
壊れた、または不正な JSON を扱う場合
通常のフォーマッターやビューワーでは助けになりません —— 先に JSON 修復ツール が必要です。修復ツールは 末尾カンマ、シングルクオート、クオートのないキー など一般的な誤りを直してから、整った JSON をビューワーかフォーマッターに渡します。
よくある質問
JSON ビューワーと JSON フォーマッターの違いは?
フォーマッターは読みやすくインデントされた テキスト を出力し、コピーできます。ビューワーは折りたたみ可能ノードと シンタックスハイライトを備えたインタラクティブな ツリー を描画し、ナビゲートできます。フォーマッター = テキストの見た目、ビューワー = データとのやり取り方です。
JSON ビューワーは JSON reader と同じ?
Web ツールでは、はい —— 「reader」「viewer」「explorer」はすべて折りたたみ可能なノードのツリーベースナビゲーションを指します。(Gson のようなコードライブラリの「JsonReader」は無関係です。)
ビューワーとフォーマッターの両方が必要?
ほとんどの現代的なツールはこれらを兼ねています —— 入力を整形し、同じ表示の中で折りたたみ可能ツリーとして描画するので、可読性とナビゲーション性のどちらかを選ぶ必要がありません。
JSON が壊れていたら?
ビューワーもフォーマッターも助けになりません —— まず JSON Fix で修復し、その後で整った出力を表示または整形します。詳しくは JSON のフォーマット方法 も参照してください。
結論
JSON フォーマッターは読みやすいテキストを、JSON ビューワーはインタラクティブなツリーを提供します。どちらも有用です —— どちらを選ぶかは、コピペできる出力が必要なのか、クリックして探索できる構造が必要なのかで決まります。
ほとんどの開発者にとって理想のツールは両方を兼ねるものです: 入力を整形し、同じ表示で折りたたみ可能ツリーを描画します。これなら可読性とナビゲーション性のどちらかを諦める必要はありません。
表示しようとする前に JSON が壊れているなら、まず修復してください —— ビューワーもフォーマッターも有効な JSON を必要としますが、修復ツールはそうではありません。