【VS Code】Live Previewを最強にする、1ファイル完結型の爆速・軽量「プロジェクトナビゲーター」の構築方法

VS Codeの拡張機能「Live Preview」を使ってWebサイト制作やドキュメント管理をする際、標準のディレクトリ一覧が少し物足りないと感じたことはありませんか？外部ライブラリを一切使わず、**HTML、CSS、Node.jsの標準機能だけ**で動く、極限まで無骨でセマンティックな「マイ・プロジェクトナビゲーター」を構築する方法を紹介します。 ## 💡 このツールの特徴 * **超軽量＆爆速**: 外部のCSSフレームワークやJavaScriptライブラリは一切不使用。ブラウザ標準の等幅フォント（`monospace`）を活かした無骨なデザイン。 * **1ファイル完結のデータ保持**: 面倒な別ファイルへのデータ書き出しは不要。Node.jsが直接`index.html`の内部変数を上書き同期します。 * **強力なセッション復元**: ページをリロードしたり、ファイルを編集してLive Previewが自動更新されても、**さっきまで開いていたフォルダの展開状態やタブの選択状態がそのまま維持**されます。 * **システム連動テーマ**: OSやブラウザのライトモード/ダークモード設定を自動検知して配色が切り替わります。 * **画面幅に合わせた全幅表示**: スマホサイズや画面分割で幅が狭くなると、自動で左右の余白を削り、エディタのような100%全幅表示になります。 ## 🛠️ インストール・設定手順作業スペース（ワークスペース）のルートディレクトリに、以下の **2つのファイル** を作成するだけで完了します。 ### 1. `index.html` の作成ワークスペースのルートに `index.html` を作成し、以下のコードを貼り付けます。

index.html

``` html プロジェクトナビゲーター

```

### 2. バックグラウンドタスク `generate-tree.js` の作成同じくルートディレクトリに `generate-tree.js` を作成し、以下のコードを貼り付けます。

generate-tree.js

``` js const fs = require('fs'); const path = require('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, fullPath).replace(/\\/g, '/'); try { if (fs.statSync(fullPath).isDirectory()) { const children = scanDirectory(fullPath, baseDir); const hasLocalIndex = children.some(c => c.type === 'file' && c.name.toLowerCase() === 'index.html'); const hasChildIndex = children.some(c => c.type === 'directory' && c.isWeb); const isWeb = hasLocalIndex || hasChildIndex; result.push({ type: 'directory', name: file, path: relativePath, isWeb: isWeb, children: children }); } else { result.push({ type: 'file', name: file, path: relativePath, ext: path.extname(file).toLowerCase() }); } } catch (e) {} }); return result.sort((a, b) => (b.type === 'directory') - (a.type === 'directory')); } function updateIndexHtml() { const treeData = scanDirectory(__dirname); const currentTreeString = JSON.stringify(treeData); const absoluteWorkspacePath = __dirname.replace(/\\/g, '/'); const indexPath = path.join(__dirname, 'index.html'); if (!fs.existsSync(indexPath)) return; let indexContent = fs.readFileSync(indexPath, 'utf8'); let isChanged = false; // 1. ツリーデータの正規表現書き換え const treeRegex = /(const PROJECT_TREE = )([\s\S]*?)(; \/\/ DATA_PLACEHOLDER)/; if (treeRegex.test(indexContent)) { const matchedTree = indexContent.match(treeRegex)[2]; if (matchedTree !== currentTreeString) { indexContent = indexContent.replace(treeRegex, `$1${currentTreeString}$3`); isChanged = 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(indexPath, indexContent, 'utf8'); console.log(`[${new Date().toLocaleTimeString()}] 📝 index.html へのデータ同期が完了しました`); } } updateIndexHtml(); // フォルダ内を監視し、変更があれば100msウェイトでインデックスを自動同期 fs.watch(__dirname, { recursive: true }, (eventType, filename) => { if (filename && !IGNORE_LIST.some(item => filename.includes(item)) && filename !== 'index.html') { clearTimeout(global.watchTimeout); global.watchTimeout = setTimeout(updateIndexHtml, 100); } }); ```

## 🚀 動かし方 1. ターミナルでワークスペースのルートに移動し、同期スクリプトを常駐起動させます。 ``` 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": "node generate-tree.js", "isBackground": true, "problemMatcher": [], "runOptions": { "runOn": "folderOpen" } } ] } ``` ## 📝 終わりに無駄なアセットや重いフレームワークを削ぎ落とし、CSSセレクタによるフィルタリングを主軸にすることで、数百ファイル規模の環境でも一瞬で切り替わる最高にプレーンなツリーに仕上がりました。Live Previewライフのお供にぜひ役立ててください。

ザワログ

【VS Code】Live Previewを最強にする、1ファイル完結型の爆速・軽量「プロジェクトナビゲーター」の構築方法