JSON Tree View

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

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

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

Demo

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

Object(3)

name"fandhe-frontend"

tagsArray(2)

0"rust"

1"ssg"

stablefalse

Features

実装済み crate::tree_view（イシュー #753）の 12 anatomy パーツ・状態機械 TreeView を再利用し、JSON 固有の key/value 2 パーツのみを追加する（json_tree_view.rs:1-29）。
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

API Reference

Arguments

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

Data Attributes

Part	Attribute	Observed Values
value	data-kind	array, bool, object, string

Examples

Collapsed array

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

Array(3)

Accessibility

WAI-ARIA

Attribute	Description
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-setsize	crate::tree_view の branch/item から継承する（tree_view.rs:159-303）。