eternal-studentのブログ

様々な便利なWebツールや知的に面白いコンテンツを共有しています。

トップ > Webツール > JSON内容確認ツール - ツリー構造で見やすく検索

JSON内容確認ツール - ツリー構造で見やすく検索

Webツール

JSONビューア・整形ツール｜ツリー表示・検索・差分比較・CSV変換対応

JSONを見やすくツリー表示し、整形・検索・バリデーション・差分比較・CSV変換まで行えるブラウザ完結型ツールです。 APIレスポンス確認、ログ解析、設定ファイル検査、JSON→CSVデータ抽出などにそのまま使えます。

🌲 ツリー表示 🔍 キー・値検索 ⚠️ エラー箇所表示 ↔️ 差分比較 📤 JSON→CSV変換 📋 パスコピー 💾 ダウンロード
🔒 ブラウザ内処理のみ・外部送信なし
💡 Ctrl+Enter (Mac: ⌘+Enter) で即解析
インデント:
入力内容を保存 (localStorage) — ONの場合、このブラウザにのみ保存。外部には送信されません。
パス
🌲

JSONを入力して「解析・表示」をクリック

ツリー構造で階層を確認、キー・値を検索できます

JSONを整形・検索・比較・CSV変換できる無料ツール

このツールは、JSONの整形だけでなく、構造確認・検索・エラー検出・差分比較まで まとめて行える実務向けのJSONビューアです。APIレスポンスの確認、ログ解析、 設定ファイルの検査、データ構造の把握などに使えます。 データはサーバーに送信されず、ブラウザ内だけで処理されます。

このJSONツールでできること

  • ツリー構造で階層を視覚的に確認し、深いネストも迷子にならない
  • キー名・値でリアルタイム検索し、前後ナビゲーションで巡回できる
  • JSON構文エラーの位置・原因の目安を画面内に表示する
  • ノードをクリックするとJSONPathスタイルのパスが表示され、ワンクリックでコピーできる
  • 2つのJSONを比較して追加・削除・変更・型変更の差分を一覧表示する
  • JSON配列・NDJSONを必要なフィールドだけ選択してCSVに変換し、Excelで開けるファイルとしてダウンロードできる
  • 整形済みJSON・圧縮JSONをコピーまたは .json ファイルとしてダウンロードできる

よくある使い方

  • APIレスポンスを貼り付けて整形し、必要なキーをツリーで確認する
  • キー名で検索して、深い階層にある値を素早く見つける
  • エラーのあるJSONを貼り付けて、構文エラーの位置と原因を確認する
  • 変更前後のJSONを差分比較モードに貼り付けて何が変わったか確認する
  • 設定ファイルの構造を把握してパスをコピー、コードに貼り付ける
  • APIのリスト取得レスポンスを「CSV変換」タブに貼り付け、必要な列だけ選んでExcel用CSVとしてエクスポートする

FAQ

JSONの理解を深めたい方へ

📖 JSONとは何か

JSON（JavaScript Object Notation）は、データを人間が読みやすいテキスト形式で表現するためのフォーマットです。 もともとJavaScriptの構文から生まれましたが、現在はあらゆる言語で標準的に使われるデータ交換形式になっています。

JSONが扱えるデータ型は6種類です。 Object {} Array [] String "" Number Boolean null

{ "name": "田中太郎", "age": 30, "active": true, "score": null, "tags": ["dev", "api"] }

キーは必ずダブルクォート（"key"）で囲む必要があります。 シングルクォートや末尾カンマは無効な構文です。これが最も多いエラーの原因です。

🌐 APIレスポンスの確認でJSONビューアが役立つ場面

REST APIはレスポンスボディをJSON形式で返すことがほとんどです。 開発中はブラウザのDevTools（Network タブ）やcurlの出力をコピーして このツールに貼り付けることで、大量のデータの中から必要な値をすぐに見つけられます。

特にネストが深いAPIレスポンスでは、ツリービューの「キー名検索」が力を発揮します。 たとえば access_token や error_code のようなキーを入力すると、 何階層も掘らずに一発で場所が分かります。

パスコピー機能を使えば $.data.user.profile.name 形式のパスを ワンクリックでコピーでき、コードに直接貼り付けられます。

✅ 整形とバリデーションの違い

整形（フォーマット）とは、JSONの構造はそのままに、 インデントや改行を整えて読みやすくする操作です。 データの意味は変わらず、見た目だけが変わります。

バリデーション（検証）とは、入力がJSONとして文法的に正しいかを確認する操作です。 整形はバリデーションを内包しているため、整形できればそのJSONは有効です。 逆に整形に失敗した場合は構文エラーが存在します。

よくある構文エラーの原因は次の3つです。 ① 末尾カンマ（,] や ,}） ② キーをシングルクォートで囲む（'key'） ③ 波括弧・角括弧の対応が取れていない

🔎 大きいJSONを読むコツ

ログや大量データを含むJSONは、全展開すると数千行になることがあります。 そのまま読もうとしても迷子になるだけです。効率的な読み方には順序があります。

Step 1: まず全折りたたみ
ルート直下の構造だけを確認し、データの「大枠」を把握します。 オブジェクトか配列か、主要なキーは何かを見極めます。

Step 2: キー検索で目的地を特定
探したいキー名（例：error、id、created_at）を 検索バーに入力し、前後ナビゲーションで巡回します。

Step 3: 「一致のみ展開」で集中表示
検索後に「一致のみ展開」ボタンを押すと、関係ないノードが折りたたまれ、 目的の箇所だけが表示されます。

📍 JSONPathでデータの位置を把握する

JSONPathはJSONデータ内の位置を表現する記法です。 ファイルシステムのパスと同じ感覚で、ネストの深い値を一行で指し示せます。 このツールのパスコピー機能もJSONPath形式を使っています。

// JSON構造 { "users": [{ "profile": { "name": "田中" } }] } // このツールが表示するパス $.users[0].profile.name // 記法の読み方 $ → ルート (JSONの起点) .users → "users" キーへ移動 [0] → 配列の0番目（先頭） .profile → "profile" キーへ移動 .name → "name" キーへ移動

コピーしたパスはJavaScript（obj.users[0].profile.name）や Python（data['users'][0]['profile']['name']）のコードに そのまま応用できます。

関連ツール

🔀 Mermaid ノーコードビルダー

テキストの記述だけでフローチャート・シーケンス図・ER図などを生成できるダイアグラムツールです。 コードを書かずにマウス操作で図を組み立て、そのままブログ記事に埋め込めます。

JSONとの使い分け: JSONで確認したAPIのデータ構造やシステム間の連携フローを、 Mermaidで図示することで技術ドキュメントとして整理しやすくなります。
📊 データプロファイルツール

CSVやテーブル形式のデータを貼り付けると、列ごとのデータ型・件数・欠損数・分布を 自動で集計して表示するツールです。データの品質確認や前処理の方針決定に使えます。

JSONとの使い分け: APIレスポンスのJSON配列をCSVに変換してプロファイルにかけることで、 フィールドの欠損状況や値の偏りを一括で把握できます。
🧪 テストデータ生成ツール

スキーマ定義に基づいてランダムなテストデータをJSON形式で自動生成するツールです。 氏名・メールアドレス・日時・IDなどのフィールドを指定件数分まとめて出力できます。

JSONとの使い分け: 生成したテストデータをこのJSONビューアに貼り付けて構造を確認し、 そのままAPIのモックデータやテストケースとして活用できます。