es.length 0 return ''; let html ''; nodes.forEach node { if node.type 'directory' { const uniqueId 'dir ' + btoa unescape encodeURIComponent node.path .replace / /g, '' ; const metaHTML d ${node.totalDirs}/f ${node.totalFiles} ; if node.isWeb { const destinationUrl findIndexUrl node ; html + const uniqueId 'dir ' + btoa unescape encodeURIComponent node.path .replace / /g, '' ; const metaHTML d ${node.totalDirs}/f ${node.totalFiles} ; if node.isWeb { const destinationUrl findIndexUrl node ; html + /${node.name}${metaHTML} ase out; } ul ul.expanded { max height 2000px; transition max height 0.3s ease in; } .tree row { display flex; align items stretch; width 100%; margin 0; padding 0; } button { background none; border none; padding 0.6rem 0.5rem; font family inherit; font size inherit; ABOUT ; if directIndex return '/' + directIndex.path; for const child of node.children { if child.type 'directory' && child.isWeb { return findIndexUrl child ; } } return ' '; } function renderTree nodes { if nodes.length 0 return ''; let html ''; nodes.forEach node { if node.type 'directory' BLOG totalDirs + 1 + child.totalDirs; totalFiles + child.totalFiles; } else if child.type 'file' { totalFiles + 1; } } ; node.totalDirs totalDirs; node.totalFiles totalFiles; } } ; } function findIndexUrl node { const directIndex node.childr e inherit; color var text color ; text decoration none; flex 1; display block; margin 0; } .file button hover { background color var hover bg ; } .file link text { color var link color ; } .file button hover .file link text { text decoration underline; } .tree row a.web link { display flex; nged true; } } // 2. ワークスペース絶対パスの正規表現書き換え const pathRegex / const WORKSPACE PATH " . ? "; \/\/ PATH PLACEHOLDER /; if pathRegex.test indexContent { const matchedPath indexContent.match pathRegex 2 ; if matchedPath ! absoluteWorkspacePath { indexContent indexContent.replace pathRegex, $1${absoluteWorkspacePath}$3 ; isChanged true; } } if isChanged { fs.writeFileSync indexPat ります。 画面幅に合わせた全幅表示 スマホサイズや画面分割で幅が狭くなると、自動で左右の余白を削り、エディタのような100%全幅表示になります。 🛠️ インストール・設定手順 作業スペース（ワークスペース）のルートディレクトリに、以下の 2つのファイル を作成するだけで完了します。 1. index.html の作成 ワークスペースのルートに index.html を作成し、以下のコードを貼り付けます。 index.html html プロジェクトナビゲーター root { bg color ffffff; text color 000000; border color 000000; sub border color cccccc; meta color 666666; li text color 000000; border color 000000; sub border color cccccc; meta color 666666; link color 0000ee; hover bg f0f0f0; weblink hover bg eef2ff; } @media prefers color scheme dark { root { bg color 000000; text color ffffff; border color ffffff; sub border color 444444; if sessionStorage.getItem dir.id 'open' { dir.classList.add 'expanded' ; } } ; } function switchTab mode { const tree document.getElementById 'file tree' ; const btnAll document.getElementById 'btn all' ; const btnWeb document.getElementById 'btn web' ; if mode 'web' { tree.className 'mode web'; btnAll.classList.remove 'ac uire 'path' ; // 自身のスクリプトや不要なシステムファイルを除外リストに登録 const IGNORE LIST '.git', 'node modules', '.vscode', 'generate tree.js' ; let lastTreeString ""; function scanDirectory dirPath, baseDir dirPath { const result ; let files ; try { files fs.readdirSync dirPath ; } catch e { return result; } files.forEach file { if IGNORE LIST.includes file return; const fullPath path.join dirPath, file ; const relativePath path.relative baseDir, 駐起動させます。 bash node generate tree.js 2. スクリプトが起動すると、自動的に index.html 内部の変数に現在のPCの絶対パスとツリー構造データが注入されます。 3. VS Codeの「Live Preview」で index.html を開きます。 これで、無骨で超軽量なあなただけのプロジェクトツリー環境が爆速で立ち上がります！ 🛠️ おすすめ：VS Code起動時にタスクを自動化する 毎回コマンドを叩くのが面倒な場合は、 .vscode/tasks.json を作成して以下のように設定すると、 VS Codeでこのフォルダを開いた瞬間に裏で勝手にスクリプトが常駐動作 してくれます。 json { "version" "2.0.0", "tasks" { "label" "Auto Project Tracker", "type" "shell", "command" " ext color ; padding 2rem; max width 900px; margin 0 auto; } @media max width 600px { body { padding 2rem 0; } header, .tabs { padding left 0.5rem; padding right 0.5rem; } } header { border bottom 1px solid var border color ; margin bottom 0.5rem; padding bottom 0.5rem; } 構造データが注入されます。 3. VS Codeの「Live Preview」で index.html を開きます。 これで、無骨で超軽量なあなただけのプロジェクトツリー環境が爆速で立ち上がります！ 🛠️ おすすめ：VS Code起動時にタスクを自動化する 毎回コマンドを叩くのが面倒な場合は、 .vscode/tasks.json を作成して以下のように設定すると、 VS Codeでこのフォルダを開いた瞬間に裏で勝手にスクリプトが常駐動作 してくれます。 json { "version" "2.0.0", "tasks" { "label" "Auto Project Tracker", "type" "shell", "command" "node generate tree.js", "isBackground" true, "problemMatcher" ,