Skip to content
fandhe-frontendcore v0.4.3
GitHub

JSON Tree View

JSON 風データ構造をツリー表示する部品です。fandhe-frontend-headless-ui の json_tree_view mod は tree_view（イシュー #753）の 12 anatomy パーツ・状態機械をそのまま再利用しつつ、key/colon/value の 3 パーツと決定的な変換ロジックのみを追加します。Themes 版と異なりインデント・展開アイコンのスタイルを持たず、構造とアクセシビリティ属性のみを担います。

スタイル済みの表示例は JSON Tree View を参照してください。

アクセシビリティ・参考サイトとの対応

  • ark-ui/zag（@zag-js/json-tree-utils）と突合した結果です（イシュー #1661）。chakra-ui・Radix には対応部品がありません。
  • key（オブジェクトキー/配列 index）・colon（区切り、固定テキスト ": "）・value（値、data-kind で型別に表示）は branch-text/item-text の内側へこの順で入れ子にします（ark-ui の KeyNode/ValueNode が BranchText/ItemText を包む構造に合わせています）。colon はキーを持つノードにのみ出力し、ルート自身には出ません。
  • value の data-kind は "null"/"boolean"/"number"/"string"/"array"/"object" の 6 語彙です（イシュー #1661 で "bool" から "boolean" へ変更、破壊的変更）。
  • キーボード操作は構造部（tree-view スコープ）が fandhe-frontend-wasm-full の TreeView 配線（イシュー #1072）をそのまま継承します（矢印キー・Home/End・Enter/Space・typeahead）。*（兄弟一括展開）は未実装の既知ギャップです。単一選択のみのため Shift+Arrow/Ctrl+A は対象外です。
  • 参照実装が持つ aria-label（アクセシブル説明文）・data-line/--line-length（行番号・インデント計測）・data-root/data-non-enumerable/quotesOnKeys（表示オプション）はいずれも意図的に採用していません。展開可否・子要素数は既存の aria-expanded/aria-setsize で表現済みで、行番号・インデント計測は装飾・レイアウトの関心のため UI コンポーネント層へ持ち込みません。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Object(5)
name: "fandhe-frontend"
version: 1
tags: Array(2)
0: "rust"
1: "ssg"
stable: false
license: null

Features

  • 実装済み crate::tree_view（イシュー #753）の 12 anatomy パーツ・状態機械 TreeView を再利用し、JSON 固有の key/colon/value 3 パーツを branch-text/item-text の内側へ入れ子にして追加する（json_tree_view.rs:1-35、colon はイシュー #1661 で ark-ui/zag 突合により追加）。
  • Object は HashMap ではなく挿入順を保持する Vec<(String, JsonValue)> で表現し、render_json の出力が決定的（バイト単位で一致）である（json_tree_view.rs:31-37,118-136）。
  • ノード識別子に RFC 6901 JSON Pointer を用い、key に //~ を含むデータでも一意性が壊れない（json_tree_view.rs:39-46,180-192）。
  • role/aria-*（role="tree"/"treeitem"/"group"、aria-expanded/aria-selected/aria-level/aria-posinset/aria-setsize）はすべて crate::tree_view のパーツ関数から継承する（json_tree_view.rs:16-24）。

Anatomy

value
key
colon

API Reference

Arguments

NameTypeDefaultDescription
render_json: tree&TreeView—展開・選択状態（json_tree_view.rs:221-223）。
render_json: root&JsonValue—描画対象の JSON 風データ木（json_tree_view.rs:221-223）。
expanded_to_depth: depthusize—この深さまでのブランチを展開済みにした TreeView を生成する（json_tree_view.rs:347）。
value: kind&'static str—JsonValue::kind() が返す固定語彙（"null"/"boolean"/"number"/"string"/"array"/"object"）のみを受け取る data-kind 属性値（イシュー #1661 で "bool" から "boolean" へ変更、json_tree_view.rs:138-153,201-209）。

Data Attributes

PartAttributeObserved Values
valuedata-kindarray, boolean, null, number, object, string

Examples

Collapsed array

depth=0（全ブランチ折りたたみ）で描画した配列の例です（Demo は depth=2 まで展開済みのオブジェクト）。

Custom CSS for key/colon/value

本モジュールが型別配色を提供しない headless 部品のため、キー・区切り・値の 3 パーツへ自前 CSS を当てる最小例です（json-tree-view スコープのみを対象とし、構造部の tree-view スコープには触れません）。

json-tree-view スコープ（key/colon/value）と tree-view スコープ（構造部）の両方に data-scope / data-part / data-kind 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

Array(2)
0: 1
1: "two"
CSS
[data-scope="tree-view"][data-part="branch-content"][hidden] {
  display: none;
}
[data-scope="tree-view"][data-part="branch-indent-guide"] {
  width: 1rem;
}
[data-scope="json-tree-view"][data-part="key"] {
  color: #7c3aed;
  font-family: monospace;
}
[data-scope="json-tree-view"][data-part="colon"] {
  color: #6b7280;
}
[data-scope="json-tree-view"][data-part="value"][data-kind="string"] {
  color: #059669;
  font-family: monospace;
}
[data-scope="json-tree-view"][data-part="value"][data-kind="number"] {
  color: #2563eb;
  font-family: monospace;
}

Accessibility

Keyboard Interactions

KeyDescription
ArrowDown / ArrowUp可視かつ disabled でない treeitem 間で 1 件ずつフォーカス移動する（折りたたみ中の子孫はスキップ、非循環）。
ArrowRight閉じたブランチは展開する。開いたブランチは最初の子へフォーカス移動する。葉ノードでは no-op。
ArrowLeft開いたブランチは折りたたむ。それ以外（葉ノード・閉じたブランチ）は親ブランチへフォーカス移動する（ルート直下では no-op）。
Home / End可視かつ disabled でない最初/最後の treeitem へフォーカス移動する。
Enter / Space葉ノードは選択（select）、ブランチは開閉（toggle）を発火する。
印字可能文字typeahead: 直近の入力から一致する treeitem へフォーカス移動する。
Escapetypeahead バッファをリセットするのみ（TreeView は常時展開のツリーであり閉じる操作を持たない）。

WAI-ARIA

AttributeDescription
role="tree" / role="treeitem" / role="group"crate::tree_view の tree/branch・item/branch_content から継承する（tree_view.rs:125-259）。
aria-expanded / aria-selected / aria-level / aria-posinset / aria-setsizecrate::tree_view の branch/item から継承する（tree_view.rs:159-303）。