JSONツリー表示
折りたたみ可能なツリーでJSONを閲覧・編集します
JSON入力
25 MiBまでのJSONファイル
修復により、不正な形式のデータが変更される場合があります。エクスポート前に編集後の入力内容を確認してください。
パーサーの詳細
JSONビューアー
構造を表示するには、有効なJSONを入力してください。
ツリーには表示対象ノードの1ページ分が表示されます。すべてのデータは引き続きツリーと全体のエクスポートで利用できます。
構造を表示するには、有効なJSONを入力してください。
JSONの統計
- オブジェクトのキー
- 0
- 値の総数
- 0
- オブジェクト
- 0
- 配列
- 0
- 文字列
- 0
- 数値
- 0
- 真偽値
- 0
- null値
- 0
- 最大の深さ
- 0
- UTF-8のバイト数
- 0
ビューアーの使い方
型を変更するにはJSONを、文字列として保存するには通常のテキストを入力してください。Enterで保存、Escapeでキャンセルします。
- ファイルまたはサンプルを読み込むとツリーが開き、入力パネルが折りたたまれます。「入力欄を表示」で元のJSONを編集できます。
- 入力中は入力欄が開いたままになります。整形と圧縮は、解析済みのデータを失うことなく入力内容を変更します。
- ツリーモードでは、コピー時に整形済みのJSONを使用します。コードモードでは、コピー時に入力の書式を保持します。コードのプレビューとダウンロードには整形済みのJSONを使用します。
- ドットや引用符を含むキー、rootという名前のキーは、文字どおりのキーとして扱われます。
- 鉛筆アイコンでプリミティブ値を編集できます。削除には確認が必要です。オブジェクトと配列は元の入力欄で編集してください。
- 検索では、配列内の文字列を含め、キーと文字列値を照合します。一致する項目を選択すると、その正確な場所が表示されます。
- 数値にはJavaScriptの数値精度が使用されます。
無料オンラインJSONツリー表示・検証・編集ツール
このJSONツリー表示は、生のJSONデータを操作可能な折りたたみ式のツリー構造に変換し、深くネストしたオブジェクトも簡単に確認できるようにします。JSON文字列の貼り付け、.jsonファイルのアップロード、ページへのドラッグ＆ドロップに対応し、すぐにデータを検証・解析して、文字列、数値、真偽値、null値を色分けした、たどりやすい階層として表示します。
可視化に加え、このツールは軽量なJSONエディターとしても使えます。ツリー内のプリミティブ値にカーソルを合わせると編集・削除ボタンが表示され、別のエディターへ切り替えずにその場でデータを変更できます。変更は元のJSONにすぐ反映され、コピーやダウンロードが可能です。内蔵のJSON検証機能は構文エラーをリアルタイムで強調表示し、自動修正機能は引用符のないキー、単一引用符、末尾のカンマなどのよくある間違いを修正します。
強力な検索機能で構造全体からキーや値を探せます。統計パネルでは、キー総数、オブジェクト、配列、文字列、数値、真偽値、null、最大深度、バイトサイズの内訳を確認できます。APIレスポンスのデバッグ、設定ファイルの確認、データベースのエクスポートの分析など、このオンラインJSONビューアーなら作業をすばやく進め、データのプライバシーを守れます。すべてブラウザー内で動作し、サーバーへのアップロードはありません。
主な機能
- 展開、折りたたみ、すべて展開、すべて折りたたみの操作ができるツリー表示
- わかりやすいエラーメッセージ付きのリアルタイムJSON検証
- よくあるJSONエラーを自動修正: 引用符のないキー、単一引用符、末尾のカンマ、undefined値
- ツリー表示内で値を直接編集・削除
- 結果の強調表示とパス表示に対応したキーと値の検索
- JSON統計パネル: キー総数、オブジェクト、配列、文字列、数値、真偽値、null、最大深度、サイズ
- 生のJSON入力の整形（見やすい形式）と圧縮を切り替え
- ファイルのアップロード、ドラッグ＆ドロップ、クリップボードへのコピー、.json形式でのダウンロード
- ツリー表示とコード表示を切り替え
- ツリーの表示スペースを最大限確保できる折りたたみ式の入力パネル
JSONツリー表示の使い方
- JSONを読み込み: 入力欄にJSONを貼り付けるか、「アップロード」で.jsonファイルを選ぶか、入力エリアへファイルをドラッグしてください。「サンプルを読み込み」でデモも確認できます。
- 検証と解析: ツールがJSONをリアルタイムで検証します。エラーが検出された場合は「JSONエラーを修正」をクリックし、よくある問題を自動修正してください。
- ツリーを確認: ノードをクリックして展開または折りたたんでください。「すべて展開」と「すべて折りたたみ」でまとめて操作できます。
- データを検索: 検索バーにキー名や値を入力すると、一致する項目とその完全なパスを確認できます。
- 値を編集・削除: プリミティブ値の横にある編集・削除ボタンを使ってください。タッチ画面でも利用できます。削除には確認が必要です。
- データをエクスポート: 「コピー」でJSONをクリップボードにコピーするか、「ダウンロード」で.jsonファイルとして保存してください。
活用例
- APIレスポンスのデバッグ: RESTやGraphQLのレスポンスを貼り付け、構造を可視化して特定の項目をすばやく見つけられます。
- 設定ファイルの確認: package.json、tsconfig.jsonなどの設定ファイルをアップロードし、構造と値を確認できます。
- データ構造の分析: 統計パネルでJSONペイロードの複雑さを確認できます。ネストの深さ、キーの数、バイトサイズがわかります。
- 手軽なJSON編集: 本格的なIDEやテキストエディターを開かずに、JSONデータを少し修正できます。
- エラーの修正: ログや外部ソースの不正なJSONを、アプリケーションで処理する前に自動修正機能で修正できます。
- データベースのエクスポートの確認: MongoDB、Firebaseなどのドキュメントデータベースから書き出したJSONを、読みやすい形式で確認できます。
- 教育と学習: JSON、API、データモデリングを学ぶ学生のために、ネストしたデータ構造を可視化できます。
よくある質問
このツールは無料ですか？
はい、JSONツリー表示は完全無料で、登録、広告視聴による利用条件、利用制限はありません。必要なだけJSONを表示、検証、編集、エクスポートできます。
データは安全ですか?
はい。解析、検証、編集、検索はすべてブラウザー内だけで行われます。データがリモートサーバーへ送信されることはなく、独自のデータ、社内データ、機密性の高いJSONデータにも安心して使えます。
自動修正でどのようなJSONエラーを修正できますか？
修復操作は、引用符のないキー、単一引用符、末尾のカンマ、undefined値に対する従来の修正を試みます。修正を試みた入力は確認用に表示されたままになります。修復で不正なデータが変わることがあり、意図した意味は保証されません。すでに有効なJSONは変更されません。
JSONファイルのサイズ制限はありますか？
アップロードとドラッグ＆ドロップは25 MiBまでのファイルに対応し、上限ちょうどのファイルも受け付けます。ビューアーは表示するツリーノードをページ分割しながら、編集とエクスポートのために全データを保持します。サイズが大きいJSONや非常に深くネストしたJSONでは、さらに時間やメモリーが必要になる場合があります。
ツリー内でネストしたオブジェクトや配列を編集できますか？
現在、その場での編集と削除はプリミティブ値（文字列、数値、真偽値、null）に対応しています。ネストしたオブジェクトや配列を変更するには、入力パネルに切り替えて生のJSONを直接編集してください。
ヒントとベストプラクティス
- 確認前に整形: 「JSONを整形」をクリックして入力を見やすく整形し、ツリー表示と並べて生のテキストを読みやすくしてください。
- 入力パネルを折りたたみ: JSONを読み込んだら入力パネルを隠し、深い階層のツリーに画面スペースを最大限確保してください。
- 大きなファイルには検索を活用: 大きなJSONのノードを手動で展開する代わりに、検索バーへキーや値を入力して一致箇所へ直接移動してください。
- 統計で手早く監査: 「統計を表示」を使うと、個々のノードを詳しく調べる前に、データの複雑さをすばやく把握できます。
- ドラッグ＆ドロップを活用: ファイルマネージャーから.jsonファイルを入力欄へ直接ドラッグすると、最もすばやくデータを読み込めます。
- 編集後にダウンロード: その場で編集した後は「ダウンロード」をクリックし、元のファイルを上書きせず、変更したJSONを新しいファイルとして保存してください。