Reactで、フォルダのような階層をツリーで表示する方法

import type { TreeNode } from './TreeView';

// "src/App.tsx" のようなパスの一覧から、入れ子の TreeNode を作る
export function buildTree(paths: string[]): TreeNode[] {
  const root: TreeNode[] = [];
  for (const path of paths) {
    let level = root;
    const parts = path.split('/');
    parts.forEach((name, i) => {
      const id = parts.slice(0, i + 1).join('/');
      let node = level.find((n) => n.id === id);
      if (!node) {
        node = i < parts.length - 1 ? { id, name, children: [] } : { id, name };
        level.push(node);
      }
      if (node.children) level = node.children;
    });
  }
  sortTree(root);
  return root;
}

// フォルダを先に、同じ種類どうしは名前の順に並べる
function sortTree(nodes: TreeNode[]) {
  nodes.sort((a, b) => Number(!a.children) - Number(!b.children) || a.name.localeCompare(b.name, 'ja'));
  for (const n of nodes) if (n.children) sortTree(n.children);
}

buildTree(['src/components/Header.tsx', 'src/App.tsx', 'package.json', 'public/favicon.svg']);

public/
  favicon.svg
src/
  components/
    Header.tsx
  App.tsx
package.json

import { useRef, useState, type FocusEvent, type KeyboardEvent } from 'react';

export type TreeNode = {
  id: string;
  name: string;
  children?: TreeNode[]; // あればフォルダ
};

type Props = {
  nodes: TreeNode[];
  label: string;
  onSelect?: (node: TreeNode) => void;
};

type Visible = { node: TreeNode; parentId: string | null };

// 開いているフォルダの中だけをたどって、画面に見えている順に並べる
function listVisible(nodes: TreeNode[], expanded: Set<string>, parentId: string | null = null): Visible[] {
  return nodes.flatMap((node) => [
    { node, parentId },
    ...(node.children && expanded.has(node.id) ? listVisible(node.children, expanded, node.id) : []),
  ]);
}

export function TreeView({ nodes, label, onSelect }: Props) {
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
  const [selectedId, setSelectedId] = useState<string | null>(null);
  // Tab キーで止まる項目（最初は先頭）
  const [focusedId, setFocusedId] = useState<string | null>(nodes[0]?.id ?? null);
  const itemRefs = useRef(new Map<string, HTMLLIElement>());

  const toggle = (id: string, open?: boolean) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (open ?? !next.has(id)) next.add(id);
      else next.delete(id);
      return next;
    });
  };

  const moveFocus = (id: string) => {
    setFocusedId(id);
    itemRefs.current.get(id)?.focus();
  };

  const select = (node: TreeNode) => {
    setSelectedId(node.id);
    onSelect?.(node);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
    const visible = listVisible(nodes, expanded);
    const index = visible.findIndex((v) => v.node.id === focusedId);
    if (index < 0) return;
    const { node, parentId } = visible[index];
    const isOpen = expanded.has(node.id);

    switch (e.key) {
      case 'ArrowDown':
        if (index < visible.length - 1) moveFocus(visible[index + 1].node.id);
        break;
      case 'ArrowUp':
        if (index > 0) moveFocus(visible[index - 1].node.id);
        break;
      case 'ArrowRight':
        if (node.children && !isOpen) toggle(node.id, true);
        else if (node.children?.length) moveFocus(node.children[0].id);
        break;
      case 'ArrowLeft':
        if (node.children && isOpen) toggle(node.id, false);
        else if (parentId) moveFocus(parentId);
        break;
      case 'Home':
        moveFocus(visible[0].node.id);
        break;
      case 'End':
        moveFocus(visible[visible.length - 1].node.id);
        break;
      case 'Enter':
        select(node);
        if (node.children) toggle(node.id);
        break;
      default:
        return; // ほかのキーは、ブラウザの動きのままにする
    }
    e.preventDefault();
  };

  // ツリーの外にフォーカスが出たら、次に Tab キーで入ったときは、選んだ項目に戻す
  const handleBlur = (e: FocusEvent<HTMLUListElement>) => {
    if (e.currentTarget.contains(e.relatedTarget)) return; // ツリーの中で移っただけ
    const visible = listVisible(nodes, expanded);
    if (visible.some((v) => v.node.id === selectedId)) setFocusedId(selectedId);
  };

  const renderNodes = (list: TreeNode[], level: number) =>
    list.map((node) => {
      const isFolder = node.children !== undefined;
      const isOpen = expanded.has(node.id);
      return (
        <li
          key={node.id}
          role="treeitem"
          aria-expanded={isFolder ? isOpen : undefined}
          aria-selected={selectedId === node.id}
          tabIndex={focusedId === node.id ? 0 : -1}
          ref={(el) => {
            if (el) itemRefs.current.set(node.id, el);
            return () => {
              itemRefs.current.delete(node.id);
            };
          }}
        >
          {/* li はフォルダの中身まで含むので、クリックは 1 行ぶんの div で受ける */}
          <div
            className="tree-row"
            style={{ paddingLeft: level * 20 }}
            onClick={() => {
              moveFocus(node.id);
              select(node);
              if (isFolder) toggle(node.id);
            }}
          >
            <span className={isFolder ? (isOpen ? 'chevron open' : 'chevron') : 'chevron none'} aria-hidden="true">
              ▶
            </span>
            <span className={isFolder ? 'icon folder' : 'icon file'} aria-hidden="true" />
            <span>{node.name}</span>
          </div>
          {isFolder && isOpen && <ul role="group">{renderNodes(node.children!, level + 1)}</ul>}
        </li>
      );
    });

  return (
    <ul role="tree" aria-label={label} className="tree" onKeyDown={handleKeyDown} onBlur={handleBlur}>
      {renderNodes(nodes, 0)}
    </ul>
  );
}

import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { TreeView } from './TreeView';
import { buildTree } from './buildTree';

const paths = [
  'src/components/Header.tsx',
  'src/components/TreeView.tsx',
  'src/App.tsx',
  'src/main.tsx',
  'public/favicon.svg',
  'package.json',
  'README.md',
];
const tree = buildTree(paths);

function App() {
  const [selected, setSelected] = useState('');
  return (
    <>
      <TreeView nodes={tree} label="プロジェクトのファイル" onSelect={(node) => setSelected(node.id)} />
      <p id="selected">選んだ項目：{selected || 'なし'}</p>
    </>
  );
}

// 比べるための版：開閉の state を、フォルダごとのコンポーネントに持たせる
function Item({ node, level }: { node: TreeNode; level: number }) {
  const [open, setOpen] = useState(false);
  return (
    <li role="treeitem" aria-expanded={node.children ? open : undefined} aria-selected={false}>
      <div className="tree-row" style={{ paddingLeft: level * 20 }} onClick={() => setOpen(!open)}>
        {node.name}
      </div>
      {node.children && open && (
        <ul role="group">
          {node.children.map((child) => (
            <Item key={child.id} node={child} level={level + 1} />
          ))}
        </ul>
      )}
    </li>
  );
}

src の li: y=48 高さ=128
src の行（.tree-row）: y=48 高さ=32

.tree li:focus {
  outline: none;
}
/* li はフォルダの中身ごと囲むので、枠と色は 1 行ぶんの .tree-row に付ける */
[role="treeitem"][aria-selected="true"] > .tree-row {
  background: #d4f3fa;
}
[role="treeitem"]:focus-visible > .tree-row {
  outline: 2px solid #067a98;
  outline-offset: -2px;
}

- tree "プロジェクトのファイル":
  - treeitem "public"
  - treeitem "src" [expanded]:
    - text: src
    - group:
      - treeitem "components" [expanded] [selected]:
        - text: components
        - group:
          - treeitem "Header.tsx"
          - treeitem "TreeView.tsx"
      - treeitem "App.tsx"
      - treeitem "main.tsx"
  - treeitem "package.json"
  - treeitem "README.md"

tree "プロジェクトのファイル"
treeitem "public" level=1 expanded=false selected=false
treeitem "src" level=1 expanded=true selected=false
treeitem "package.json" level=1 selected=false
treeitem "README.md" level=1 selected=false
group ""
treeitem "components" level=2 expanded=true selected=true
treeitem "App.tsx" level=2 selected=false
treeitem "main.tsx" level=2 selected=false
group ""
treeitem "Header.tsx" level=3 selected=false
treeitem "TreeView.tsx" level=3 selected=false