DocumentTreeのコードの可読性を向上できていない

[Yuisei-Maruyama]

現在のDocumentTreeのコードは下記の状態になっている。
下記の形である場合に、2点の懸念点が挙がった。

• DocumentTreeの関心事として、コンテンツにどんな内容を持っているのかは知る必要がないこと
• コードが冗長で新たな要素の追加がしづらい環境であること

(一部抜粋)

return (
    <>
      <Box>
        <TreeItem nodeId="1" label="Front-End">
          <TreeItem
            nodeId="2"
            label="README"
            onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
          />
          <TreeItem nodeId="3" label="React">
            <TreeItem
              nodeId="4"
              label="Environment"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="99"
              label="Basics"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="100"
              label="PerformanceTuning"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="5"
              label="Props(React)"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem nodeId="6" label="React Hooks">
              <TreeItem
                nodeId="7"
                label="useState"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="8"
                label="useEffect"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="9"
                label="useContext"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="12"
                label="useCallback"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="13"
                label="useMemo"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
            </TreeItem>
            <TreeItem
              nodeId="14"
              label="react-router-dom"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="15"
              label="styled-components"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            {/* <TreeItem nodeId="16" label="Suspense" />
            <TreeItem nodeId="17" label="OAuth" />
            <TreeItem nodeId="18" label="Apollo-Client" /> */}
            <TreeItem
              nodeId="19"
              label="MaterialUI"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="80"
              label="NextJS"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            ></TreeItem>
            <TreeItem
              nodeId="81"
              label="SSG&SSR"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            ></TreeItem>
          </TreeItem>
          <TreeItem nodeId="20" label="Vue">
            <TreeItem
              nodeId="40"
              label="Tips(Vue)"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem nodeId="21" label="CompositionAPI">
              <TreeItem
                nodeId="22"
                label="Props(Vue)"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="23"
                label="Emit"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
              <TreeItem
                nodeId="24"
                label="Two-Way Binding"
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
              />
            </TreeItem>
            <TreeItem
              nodeId="54"
              label="Provide&Inject"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
            <TreeItem
              nodeId="55"
              label="NuxtJS"
              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => previewDocument(e)}
            />
          </TreeItem>
        </TreeItem>
      </Box>

このまま割れ窓を放置するのは、今後の要素を追加する際の重荷になると考えたので、改善を行う！

[Yuisei-Maruyama]

再起的にレンダリングすることによって、コードのリファクタリングを行う。

また、ツリーに表示するコンテンツは外部ファイルに移動させる。

(イメージ)

const DocumentListTree: React.FC<Props> = () => {

  const documentListData = // 外部ファイルから取得

  const renderTree = (nodesList: DocumentItem[]) =>
    nodesList.map((nodes) => {
      return (
        <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.label} onClick={nodes.onClick}>
          {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree([node])) : null}
        </TreeItem>
      )
    })

  return (
    <TreeView
    >
      {renderTree(documentListData)}
    </TreeView>
  )
}