ツリービュー Tree View
階層構造のデータをツリー形式で表示する。フォルダ構造やカテゴリ分類に最適。
ライブデモ
src
components
Button.tsx
Card.tsx
Modal.tsx
utils
index.ts
ソースコード
<div class="demo-tree" role="tree">
<div class="demo-tree-node open" role="treeitem" aria-expanded="true">
<button class="demo-tree-toggle">▼</button>
<span class="demo-tree-icon">📁</span>
<span class="demo-tree-label">src</span>
</div>
<div class="demo-tree-children">
<div class="demo-tree-node open" role="treeitem" aria-expanded="true">
<button class="demo-tree-toggle">▼</button>
<span class="demo-tree-icon">📁</span>
<span class="demo-tree-label">components</span>
</div>
<div class="demo-tree-children">
<div class="demo-tree-leaf" role="treeitem">
<span class="demo-tree-icon">📄</span>
<span class="demo-tree-label">Button.tsx</span>
</div>
<div class="demo-tree-leaf" role="treeitem">
<span class="demo-tree-icon">📄</span>
<span class="demo-tree-label">Card.tsx</span>
</div>
<div class="demo-tree-leaf" role="treeitem">
<span class="demo-tree-icon">📄</span>
<span class="demo-tree-label">Modal.tsx</span>
</div>
</div>
<div class="demo-tree-node" role="treeitem" aria-expanded="false">
<button class="demo-tree-toggle">▶</button>
<span class="demo-tree-icon">📁</span>
<span class="demo-tree-label">utils</span>
</div>
<div class="demo-tree-children" style="display:none;">
<div class="demo-tree-leaf" role="treeitem">
<span class="demo-tree-icon">📄</span>
<span class="demo-tree-label">helpers.ts</span>
</div>
</div>
<div class="demo-tree-leaf" role="treeitem">
<span class="demo-tree-icon">📄</span>
<span class="demo-tree-label">index.ts</span>
</div>
</div>
</div>.demo-tree { font-size: 14px; color: #333; }
.demo-tree-node {
display: flex; align-items: center; gap: 4px;
padding: 4px 8px; border-radius: 6px; cursor: pointer;
transition: background 0.15s;
}
.demo-tree-node:hover {
background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
}
.demo-tree-leaf {
display: flex; align-items: center; gap: 4px;
padding: 4px 8px 4px 26px; border-radius: 6px; cursor: pointer;
transition: background 0.15s;
}
.demo-tree-leaf:hover {
background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
}
.demo-tree-toggle {
background: none; border: none; cursor: pointer;
font-size: 10px; color: var(--ui-primary); padding: 2px;
width: 18px; text-align: center;
transition: transform 0.2s;
}
.demo-tree-icon { font-size: 14px; }
.demo-tree-label { font-size: 13px; }
.demo-tree-children {
padding-left: 20px;
}document.querySelectorAll('.demo-tree-toggle').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const node = this.closest('.demo-tree-node');
const children = node.nextElementSibling;
if (children && children.classList.contains('demo-tree-children')) {
const isOpen = node.classList.toggle('open');
children.style.display = isOpen ? 'block' : 'none';
this.innerHTML = isOpen ? '▼' : '▶';
node.setAttribute('aria-expanded', isOpen);
}
});
});AIプロンプト
Basic
ツリービューをHTML/CSSで作ってください。フォルダとファイルを階層表示し、フォルダをクリックで展開・折りたたみできるようにします。
Custom
以下の仕様でツリービューを実装してください。 - フォルダ/ファイルアイコンを種類別に表示 - 展開・折りたたみのアニメーション付き - ドラッグ&ドロップでノードを移動可能 - 右クリックでコンテキストメニュー表示 - プライマリカラー: #2563eb - 検索フィルタ機能付き
Advanced
アクセシビリティ対応のツリービューを実装してください。 - role="tree" / role="treeitem" によるARIA構造 - キーボード操作（矢印キーでナビゲーション、Enter/Spaceで展開切替） - aria-expanded, aria-level, aria-setsize, aria-posinset の適切な設定 - 遅延読み込み（大量ノード対応） - 複数選択モード対応 - ノードの検索・フィルタリング - アニメーション時のprefers-reduced-motion対応