Web制作で使える！フォルダ構成をツリー表示して共有する方法【Windows】

📌 はじめに
✅ 「treecopy.bat」でできること
1. ▶️ 制作ディレクトリを一瞬でツリー表示に変換！
✅ batファイルの作り方：3ステップで完成
✅ こんな場面で活躍します
📝 まとめ：開発者の小技が作業効率を爆上げする！
📚 参考リンク

📌 はじめに

Web制作をしていると、「現在のディレクトリ構成をチームに共有したい」という場面に出くわすことはありませんか？特にチャットやChatGPTなどを使ってやりとりしている際に、「今どんなフォルダ構成になってるのか見せて」と言われて戸惑った経験、あるかもしれません。

そんな時に便利なのが、今回作成してみた「treecopy.bat」というWindows標準機能を活用したバッチファイルです。親フォルダをドラッグ＆ドロップするだけで、ディレクトリ構成がクリップボードにコピーされるという超便利なツールなんです。

今回は、筆者が実際に作ってみて感動した制作中フォルダの構成共有を“爆速化”する方法を紹介します。

✅ 「treecopy.bat」でできること

▶️ 制作ディレクトリを一瞬でツリー表示に変換！

以下のようなディレクトリ構成を、一発でテキスト形式にしてコピーできます：

C:.
│  index.html
│
├─css
│  ├─top
│  └─price
├─js
│  ├─top
│  └─price
└─img

これはチームに構成を共有したり、ChatGPTに「この中身を使ってCSSとJSを書いて」とお願いする時にめちゃくちゃ便利です。

✅ batファイルの作り方：3ステップで完成

▶️ 1. 新規テキストを開いて以下のコードを貼り付け

@echo off
chcp 65001 >nul
setlocal enabledelayedexpansion

:: ドラッグ＆ドロップされたフォルダを対象にする
if "%~1"=="" (
    echo 対象フォルダをこのファイルにドラッグ＆ドロップしてください。
    pause
    exit /b
)

cd /d "%~1"

:: 一時ファイルに tree 結果出力（不要行を除去）
set "tmpfile=%TEMP%\tree_temp.txt"
tree /f /a | findstr /v /c:"Volume serial number" /c:"Folder PATH listing for volume" > "%tmpfile%"

:: Markdown形式に整形（線の変換なしでASCIIのまま）
set "outfile=%TEMP%\tree_md.txt"
(
    echo ```
    for /f "usebackq delims=" %%A in ("%tmpfile%") do (
        echo %%A
    )
    echo ```
) > "%outfile%"

:: Markdown囲い（```）を除去して出力用ファイル作成
set "cleanedfile=%TEMP%\tree_cleaned.txt"
findstr /v /c:"```" "%outfile%" > "%cleanedfile%"

:: PowerShellで「最後の行を除いて」クリップボードにコピー
powershell -command "Get-Content '%cleanedfile%' | Select-Object -SkipLast 1 | Set-Clipboard"

:: 出力内容を表示
type "%cleanedfile%"

:: 後始末
del "%tmpfile%"
del "%outfile%"
del "%cleanedfile%"
pause
exit /b