← ハシトシステム トップ English ツール ブログ ポスター
読み込み中
100%
横方向 = JSONの階層
使い方:左の「JSONデータ」に貼り付けて描画するを押すと、ルートを階層0として入れ子の深さごとに要素が縦に並びます。 要素をクリックすると右側に詳細(パス・階層・子要素数・兄弟要素数・値)が出て、図とテキストの両方で関係が色分けされます。 ドラッグで移動、ホイールで拡大縮小、ダブルクリックでその要素へ寄ります。画面が狭いときは上部のJSON詳細で各パネルを開けます。 JSONの解析はすべてブラウザ内で行い、入力内容を送信することはありません。
整形や構文チェックだけを行いたい場合はJSON 整形・検証、 2つのJSONの違いを見たい場合はJSON差分比較が便利です。 データやWebの仕組みをやさしく図解した学習ポスター(無料配布)もあわせてご覧ください。

よくある質問(FAQ)

「階層」とは何を指しますか?

JSONのルート(一番外側)から数えた入れ子の深さです。ルートが階層0、その直下のキーが階層1、さらにその中のキーが階層2と続きます。このツールは階層を横方向の位置に対応させて描画するため、右へ行くほど深い入れ子であることが一目でわかります。

大きなJSONを貼り付けても動きますか?

要素数が多いほど描画と自動整列の計算量が増えるため、既定では2000要素を超えるJSONは描画を中止し、件数を表示してお知らせします。また600要素を超える場合は、重なりを解消する自動整列を省略して描画速度を優先します。大きなJSONは対象の一部だけを切り出して貼り付けると快適に閲覧できます。

入力したJSONはサーバーに送られますか?

いいえ。解析・描画・検索のすべてがお使いのブラウザ内のJavaScriptだけで完結します。入力したJSONがサーバーへ送信・保存されることは一切ありません。設定ファイルやAPIレスポンスなど、外部に出したくないデータもそのまま貼り付けて確認できます。

「描画する」を押すとテキストの見た目が変わるのはなぜですか?

図の各ノードとテキストの各行を対応づけるため、描画時にJSONを標準の字下げ(半角スペース2つ)で組み直しているためです。この対応づけにより、図で要素を選ぶと左のテキストの該当行が同じ色で光ります。値そのものは変わりません。整形前の書式を残したい場合は、貼り付けたテキストを別途保存してからご利用ください。