JSONビューアー

このJSONビューアーでデータを整形し折りたたみツリーとして探索。ノードの展開・折りたたみや正確なパスのコピーが可能。ブラウザ内で動作しデータはローカルに留まります。

JSONはブラウザ内でローカルに解析・表示され、サーバーへ何もアップロードされません。

開発・運営：Udit Agarwal

JSONからTypeScriptの型が必要ですか？JSON to TypeScriptツールをお試しください。

JSON ビューア について

このJSONビューアーは、JSONを読みやすく整える2ペインのワークスペースを提供します。テキストタブでデータを編集・整形・圧縮し、ビューアータブに切り替えて折りたたみ可能なツリーとして辿れます。テキストの壁を探し回らずにJSONをオンラインで表示する必要のある開発者、QAエンジニア、APIレスポンスをデバッグするすべての人のために作られています。ノードを展開・折りたたみし、ネストしたオブジェクトや配列を掘り下げ、任意の値をクリックしてその正確なパスをコピーできます。JSONツリービューアーとして機能すると同時に、手軽なJSON整形ツールとしても使え、圧縮された中身を美化し構造を一目で把握できます。すべては完全にブラウザ内で動作するため、データが端末から外に出ることはなく、サーバーへ何もアップロードされません。

機能

• 2ペイン構成：編集・整形用のテキストタブと、探索用のビューアータブ
• ネストしたオブジェクトや配列を展開・折りたたみできるツリービュー
• 「すべて展開」「すべて折りたたみ」ボタンでドキュメント全体を一度に変形
• 任意のノードをクリックすると、その完全なパス（例：author.links）が下部のバーに表示
• ノードのパスをワンクリックでコピーし、コードやクエリで利用
• テキストタブで「整形」で美化、「圧縮」で生JSONをコンパクトに
• 整形済みJSONのダウンロード、またはドキュメント全体のコピーが即座に可能
• 完全にブラウザ内で動作し、サーバーへ何もアップロードされません

JSON ビューア の使い方

1. テキストタブにJSONを貼り付けるか入力します。
2. 「整形」をクリックして美化するか、「圧縮」でコンパクトにし、正しいことを確認します。
3. ビューアータブに切り替えて折りたたみ可能なツリーを表示します。
4. 「すべて展開」または「すべて折りたたみ」を使うか、個々のノードをクリックして掘り下げます。
5. 値をクリックし、下部のバーからそのパスをコピーします。

例

入力

{"author":{"name":"Ada","links":["site","blog"]}}

出力

{
  "author": {
    "name": "Ada",
    "links": [
      "site",
      "blog"
    ]
  }
}

テキストタブで整形した例。ビューアーで最初のリンクをクリックすると author.links[0] のパスが表示されます。

よくあるエラーとトラブルシューティング

• ビューアータブが空、または展開するものが何も表示されない。 — 末尾のカンマや引用符のないキーなどの構文エラーがないかテキストタブを確認してください。ツリーは正しいJSONのみを描画します。
• 貼り付けたスニペットにシングルクォートやJavaScript風のキーがある。 — JSONはダブルクォートのキーと文字列値を必要とします。表示する前にシングルクォートをダブルクォートに変換してください。
• 巨大なドキュメントの展開が重く感じる。 — まず「すべて折りたたみ」を使い、すべてのノードを一度に開くのではなく必要な枝だけを展開してください。
• パスをコピーしたが自分のコードと一致しない。 — パスはルートからのドット・ブラケット記法を使います。言語のアクセサ構文が異なる場合は調整してください。

よくある質問

JSONビューアーは何に使いますか。

JSONビューアーではJSONを整形・圧縮し、折りたたみ可能なツリーとして探索できるため、生テキストの壁を読まずにAPIレスポンスや設定ファイルを読めます。

JSONビューアーで値へのパスを取得するには。

ビューアータブで任意のノードをクリックすると、そのパス（例：author.links）が下部のバーに表示され、コピーできる状態になります。

ツリー全体を一度に展開または折りたたみできますか。

はい。ツールバーの「すべて展開」「すべて折りたたみ」ボタンを使うと、ドキュメント全体をワンクリックで変形できます。

JSONビューアーはJSONの整形や圧縮もできますか。

はい。テキストタブで「整形」「圧縮」ボタンを使って生JSONを美化またはコンパクトにし、ビューアータブで辿れるツリーとして表示します。

JSONビューアーを使うとJSONはどこかに送信されますか。

いいえ。JSONビューアーはすべてをブラウザ内でローカルに処理するため、データが端末から外に出ることはなく、何もアップロードされません。

JSONビューアーは不正なJSONをどう扱いますか。

ビューアータブはツリーを構築するために正しいJSONを必要とします。テキストタブで示されたエラー（行と列を含む）を修正すれば、ツリーが描画されます。

関連ツール

• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• JSON ツリービューア — JSONを折りたたみ可能な型付きツリーとして閲覧します。
• JSON から TypeScript — サンプルJSONから TypeScript のインターフェースを生成します。
• JSON から CSV — フラットなJSONオブジェクトの配列をCSVに変換します。
• YAML ↔ JSON — YAMLをJSONに、またその逆に変換します。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• テキスト比較 — 2つのテキストを行単位で比較し、追加と削除を確認します。
• JSON からコード — JSONから Go、Rust、Python、Java、Kotlin、C#、TypeScript の型を生成します。

JSONの他のツール

• JSON から TypeScript — サンプルJSONから TypeScript のインターフェースを生成します。
• JSON から CSV — フラットなJSONオブジェクトの配列をCSVに変換します。
• JSON エスケープ / アンエスケープ — テキストをJSON文字列にエスケープ、またはJSON文字列をプレーンテキストに戻します。
• JSON からコード — JSONから Go、Rust、Python、Java、Kotlin、C#、TypeScript の型を生成します。
• JSON Diff — 2つのJSONを比較し、追加・削除・変更を構造的な差分で表示します。
• JSON Schema 生成・検証ツール — JSONサンプルからスキーマを生成し、ドキュメントを検証します。
• JSON Flatten / Unflatten — ネストしたJSONをドット記法のキーにフラット化し、元に戻す。
• JSON to Zod — JSONサンプルからZodスキーマを生成。
• JSON to Pydantic — JSONサンプルからPydantic v2モデルを生成。
• JSONPath 評価ツール — JSONPath式をJSONに対して評価し、マッチをライブ表示。
• JSON to TOON — JSONとTOONを相互変換し、LLMのプロンプトトークンを節約。
• jq プレイグラウンド — 本物のjqエンジンをブラウザで実行。

JSONのツールをすべて見る (29) · すべてのツール