import React from "react"; import { createRoot } from "react-dom/client"; import "./styles.css"; // 今回取り扱うデータ構造のまとめ type File = { name: string; }; type Directory = { name: string; children: (File | Directory)[]; }; const isDir = (fd: File | Directory): fd is Directory => "children" in fd; /** 木構造データ、実際はAPIなどから取得することが多い */ const MailDirectory: Directory = { name: "Mail", children: [ { name: "Attachment.php" }, { name: "Events", children: [{ name: "MessageSending.php" }, { name: "MessageSent.php" }] }, { name: "LICENSE.md" }, { name: "MailManager.php" }, { name: "MailServiceProvider.php" }, { name: "Mailable.php" }, { name: "Mailer.php" }, { name: "Markdown.php" }, { name: "Message.php" }, { name: "PendingMail.php" }, { name: "SendQueuedMailable.php" }, { name: "SentMessage.php" }, { name: "Transport", children: [ { name: "ArrayTransport.php" }, { name: "LogTransport.php" }, { name: "SesTransport.php" } ] }, { name: "composer.json" }, { name: "resources", children: [ { name: "views", children: [ { name: "html", children: [ { name: "button.blade.php" }, { name: "footer.blade.php" }, { name: "header.blade.php" }, { name: "layout.blade.php" }, { name: "message.blade.php" }, { name: "panel.blade.php" }, { name: "subcopy.blade.php" }, { name: "table.blade.php" }, { name: "themes", children: [{ name: "default.css" }] } ] }, { name: "text", children: [ { name: "button.blade.php" }, { name: "footer.blade.php" }, { name: "header.blade.php" }, { name: "layout.blade.php" }, { name: "message.blade.php" }, { name: "panel.blade.php" }, { name: "subcopy.blade.php" }, { name: "table.blade.php" } ] } ] } ] } ] }; /** ファイル表示用コンポーネント。単に名前のみを表示する */ const FileDisplay: React.FC<{ file: File }> = ({ file }) => { return (

{file.name}

); }; /** ディレクトリ表示用コンポーネント。名前のみとディレクトリ内にあるファイルやディレクトリを表示する */ const DirectoryDisplay: React.FC<{ directory: Directory }> = ({ directory }) => { return (

{/* 名前の表示 */} {directory.name}

{/* ディレクトリ内にあるファイルやディレクトリを一通り回す */} {directory.children.map((fOrD) => isDir(fOrD) ? ( // ディレクトリ内のディレクトリで更に続く場合、再帰する ) : ( // ファイルならファイルの方を表示 ) )}

); }; const App = () => { return ; }; createRoot(document.getElementById("root")).render();

flamboyant-buck-jrk2fi