JSON ドキュメントが深くネストされている場合は、階層の一部を手動で折りたたんで、必要な JSON のサブセットに焦点を合わせる必要があります。

macOS の Finder は、次の画像に示すように、便利な列表示を提供することでこれらの問題の一部に対処しています。

同じ原則を JSON ドキュメントに適用すると、次のようになります。

キーボードナビゲーション、パスバー、履歴など、期待される機能はすべて備わっています。さらに、選択した子孫を保持したまま階層を上に移動し、兄弟間を移動してそのパスにあるさまざまな値を表示できるという優れた機能もあります。少し抽象的に聞こえるかもしれませんが、次のアニメーションで説明しましょう。

スマートプレビューパネル

現在選択している項目の詳細情報を表示するプレビューパネルを構築しました。選択された項目の内容を自動的に推測し、日時、ウェブサイト、ツイート、YouTube動画、色など、インテリジェントなプレビューを提供します。

関連する値

未定義または空の値を含む、JSON ドキュメント全体の特定のフィールドに関連するすべての値を簡単に表示できます。

検索

特定のデータを検索するには、ショートカット CMD+K を使ってあいまい検索パネルを素早く表示できます。オブジェクトのキー、パス、値、さらにはフォーマットされた値も検索できます。例えば、「Dec」を検索すると、「2021-12-01T13:56:12Z」が見つかります。

クラシック表示

リスト ビューはすべてのシナリオに適しているわけではないため、JSON Hero では従来の JSON ツリー ビュー パターンも提供しています。

このツリービューパターンは、大規模なドキュメントを高速かつスケーラブルに表示するためにゼロから構築しました。優れた react-virtual プロジェクトを活用することで、スムーズなスクロールを実現しています。ARIA 準拠のツリービューで、高速なトラバーサルやコンテンツの展開/折りたたみに必要なすべてのキーボードショートカットも備えています。

また、ドキュメント内を移動するときにサイドバーのプレビューと関連値を保持する CodeMirror 6 を搭載したエディターも含まれています。

自動的に推論されたJSONスキーマ

自動スキーマ推論ジェネレーター (@jsonhero/schema-infer を使用) を使用して、JSON から JSON スキーマ ドキュメントを作成できます。

共有

JSON ドキュメントへのリンク、またはドキュメントの特定のセクションへのリンクを簡単に共有できます。

重要事項： JSONドキュメントのURLを知っている人なら誰でも閲覧でき、すべてのJSON Heroesは公開されています。jsonhero.ioをご利用の場合、データはCloudflare KVに保存されます。

プラグイン

JSON Hero が VS Code でもサポートされるようになりました。公式プラグインをインストールするだけです: https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode。

ドキュメント リンク: https://github.com/jsonhero-io/jsonhero-web。