ツリービュー
Tree view
別名: ツリー表示、階層ツリー、フォルダツリー、ツリーグリッド、Tree view、Tree grid
生態（さわってみる）
- プロジェクト資料
- 要件定義書.docx
- スケジュール.xlsx
- デザイン素材
- ロゴ.svg
- バナー.png
- 議事録.pdf
一言定義
親子関係を持つデータを、開閉できるインデント付きの階層構造として表示するUI。
分類
使う場面
- フォルダ構造や組織図など、親子関係を持つデータをそのまま見せたいとき
- 必要な階層だけを開いて、全体のボリュームを抑えたいとき
避ける場面
- データがフラットで、そもそも階層を持たないとき（→データテーブル）
- 開閉の単位が独立したセクションであり、親子関係を表現する必要がないとき（→アコーディオン）
近縁種との比較
同じ一覧データでも、フラットな行の集合であるデータテーブルは属性同士の横断比較・並び替えに向くのに対し、ツリービューは親子関係そのものを構造として見せることに主眼があり、階層を持つデータにはツリービューが適している。アコーディオンとは見た目の開閉動作が似ているが、アコーディオンの各パネルは互いに独立したセクションであるのに対し、ツリービューの各項目は親子関係でネストしており、キーボード操作も矢印キーによる階層移動（WAI-ARIA APGのTree Viewパターン）という専用の作法を必要とする点で異なる。
実例リンク
アクセシビリティ
- role
- role="tree"の中にrole="treeitem"を親子ネストで配置する。開閉可能な項目にはaria-expanded、選択状態にはaria-selectedを付与する
- キーボード操作
- ↑↓で項目間、→で展開または子要素へ、←で折りたたみまたは親要素へ移動し、Home/Endで先頭・末尾に飛ぶ、WAI-ARIA APGのTree View操作パターンに従う
- 補足
- フォーカスは1項目のみをTabストップとするroving tabindexで管理し、ツリー内部の移動は矢印キーに任せる