JSONビューアとは？
生のJSONは機械には便利ですが、目で追うには向いていません。5階層の波括弧、末尾のカンマ、ずらっと続く1行 — よくある光景です。JSONビューアはそれを実際にブラウズできる形に変換します。各配列は行に、各オブジェクトは列の集まりに、ネストした構造はテーブルの中のテーブルになり、好きなだけ掘り下げられます。
「とにかくデータを見たい」というときのためのツールです。解析でも、検証でも、変換でもなく — ただ見る。fetchレスポンス、GraphQLペイロード、ログ行、何でも投入できます。ビューアが整然と並べてくれるので、APIが期待どおりに返してきたか、形がコードの想定と合っているかが一目でわかります。
すべてブラウザー内で動作します — アップロードなし、アカウント不要、午後いっぱい貼り付けと表示を繰り返しても制限はありません。
ここでのJSONの見方
データを構造化して見るまでの3ステップ。エディターの下のボタンは、ここで読んでいる内容と対応しています。
貼り付けるかサンプルを読み込む
APIクライアント（Postman、Insomnia、ブラウザーのDevToolsのNetworkタブなど）からJSONをコピーして左側に貼り付けます。まずビューアの動きを見たい場合はサンプルを押して小さなデータセットを読み込んでください。
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}JSONに誤りがあれば、エディター直下にパーサーが止まった位置を示すメッセージが表示されます。
構造を閲覧
入力が変わるたびに右側が即座に再描画されます。オブジェクトの配列は各キーを列にした行として表示されます。ネストしたオブジェクトや配列はセル内のミニテーブルになるので、order.customer.tierのような連なりを視覚的にたどれます。レコードのキー数が行数より多いときはメインやネストで向きを切り替えてください — キーを行、値を列にした方が読みやすい場面もあります。レイアウトはRFC 8259で定義されたJSONの型に従います。
見たい範囲を絞り込む
各列にフィルター欄があります。tier列にgold、SKU列にSKU-1、ステータス列にpendingと入力すると、一致しない行は隠れます。フィルターは大文字小文字を区別せず、複数併用できます（tier=gold かつ status=paid）。邪魔な列があれば編集を押してヘッダーの（×）アイコンで外せます。
幅広いデータは全画面で
列が20以上あるようなデータセットには全画面を。テーブルがビューポート全体に広がり、サイドパネルに邪魔されず横スクロールできます。重いGraphQLクエリや非正規化されたレポートのデバッグに便利です。
共有またはエクスポート
気になるものを見つけたら共有を押して短縮リンク（1時間、1日、1週間から選択）を作成し、チームメンバーに送りましょう — 同じJSONで同じビューがそのまま開きます。スプレッドシートに取り込みたいときはExcelを押して.xlsをダウンロードし、Excel、Googleスプレッドシート、LibreOfficeなどで開けます。パースはJSON.parse()でクライアント側で行われます。
ビューアが活きる場面
APIレスポンスをざっと確認
Postmanでエンドポイントを叩き、8 KBのJSONが返ってきて、ネストしたshipping.address.countryに値が入っているか知りたい。ここに貼れば2秒で答えが出ます。頭の中でJSONをパースする必要はありません。
ログストリームを読む
<a href="https://www.elastic.co/jp/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>、CloudWatch、その他JSON-lineロガーの構造化ログは1行の塊で届きます。ここに落とせばタイムスタンプ、サービス、レベル、メッセージ、トレースIDが整然と並んで見えます — 深夜2時に不安定なサービスを追っているときに効きます。
スキーマのサンプルを見る
<a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a>の仕様書やチームのREADMEにあるペイロード例を確認していますか？サンプルブロックを貼ってフィールドごとに形を追えます。インデント済みJSONを上から下まで読むより速く、省略可能／欠落しているフィールドもすぐ見えます。
関係者にデータを見せる
PMがチェックアウトAPIの戻り値を知りたがっている場面で、「JSONの塊です」では通りません。共有リンクを作ってSlackに貼れば、相手にはきれいなテーブルが見えます — 波括弧やコロンの説明はいりません。
よくある質問
JSONビューアとJSONパーサーは何が違いますか？
重なる部分が大きいですが、切り口が違います。パーサーはJSONテキストを使える構造に変換する（そして不正な構文を指摘する）ことに重きを置きます。ビューアは出力側 — パース結果をどう表示して読めるようにするかに重きを置きます。このツールは内部で両方行っていますが、UIは単なる検証ではなく、大きな／深くネストしたデータの閲覧に最適化されています。
データはブラウザーの外に出ますか？
出ません。パースも描画もJavaScriptで手元で行われます。データが送られるのは「共有」を押して短縮リンクを作る時だけで、その場合も有効期限（1時間〜1週間）はご自身で選べます。機微な内容なら共有せず、タブを閉じれば終わりです。
ネストはどこまで深くいけますか？
固定の上限はありません。ビューアは投入されたネストした配列・オブジェクトを再帰的に描画します。深すぎる構造はどこかで視覚的に混雑してくるので、5〜6階層を超えたあたりからはフィルター行で見たい枝に集中するか、ネストボタンで向きを切り替えるのがおすすめです。
オブジェクトだけでなくプリミティブの配列も見られますか？
見られます。["read", "write", "admin"]のような配列は1列のリストとして表示されます。混在配列（オブジェクト＋プリミティブ）も機能します — 要素ごとに行が作られ、ビューアはオブジェクト群に存在するキーから列の集合を決定します。
JSONを更新したら列がいくつか消えているのはなぜ？
編集モードで×アイコンから列を削除した場合、ビューアはそのセッション中それを覚えており、JSON側の対応するキーも非表示にします。新しいJSONを貼り直すと検出が走り直します。期待した列が出ないときは、編集モードで落としていないか、そのキーが全レコードに存在するかを確認してください。
関連するJSONツール
表示はJSONでやりたいことの一部にすぎません。もっと特定の用途があれば、こちらもどうぞ：