プロジェクトの引き継ぎや、質問掲示板(teratailやStack Overflowなど)でエラーについて質問したいとき、「現在のディレクトリ構成を教えてください」と言われること、よくありますよね
Windows標準の tree コマンドを使えば一発でツリー状の構成を出力できますが、デフォルトではフォルダ名しか出力されないため、「結局どのファイルがどこにあるのか分からない!」という事態になりがちです。
そんな時に活躍するのが、ファイル名まで含めて出力してくれる簡単な小技です。

(debian系などのtreeコマンドとはオプションが違うのでwindowsでの引数とその時の出力例をまとめてみました。)
結論:/F オプションをつけるだけ
VS Codeのターミナル(PowerShellやコマンドプロンプト)を開き、以下のコマンドを打ち込むだけです。
tree /Fたったこれだけで、フォルダだけでなくその中に入っているファイル名まで完全に網羅して出力してくれます。
実際の出力例
通常時(treeのみ)と、オプションあり(tree /F)を見比べてみましょう。
オプションなし:通常の tree (フォルダのみ)
C:.
├─src
│ ├─components
│ └─utils
└─publicこれでは、構成の骨組みはわかっても「肝心のソースコードや設定ファイルがどこにあるのか」が分かりません。
tree /F (ファイル名も表示)
C:.
│ index.html
│ package.json
│
├─src
│ │ App.js
│ │ index.js
│ │
│ ├─components
│ │ Header.js
│ │ Footer.js
│ │
│ └─utils
│ api.js
└─public
favicon.ico
「どこに何の設定ファイルがあるか」「どのコンポーネントがどの階層にあるか」が一目瞭然になりました。技術記事の補足や、他人にプロジェクト構造を伝える際に圧倒的に親切です。
さらに便利に使うための実用Tips
出力結果をチャットやQiita/Zennなどの記事に貼り付ける際、ターミナルからマウスで選択してコピペするのは少し面倒ですよね。以下の小技を組み合わせるとさらにスマートです。
1. クリップボードに直接コピーする
tree /F | clipコマンドを実行しても画面には何も表示されませんが、結果がすべてクリップボードにコピーされています。あとはMarkdownエディタやチャット欄に Ctrl + V で貼り付けるだけです。
2. テキストファイルとして保存する
tree /F > tree.txtカレントディレクトリに tree.txt というファイルが作成され、その中に結果が出力されます。規模が大きいプロジェクト全体をファイルとして共有したいときに便利です。
3. 文字化けを防ぐ(/A オプション)
ツリーの罫線(├ や └ など)が、共有先の環境によっては文字化けしてしまうことがあります。その場合は /A を追加してASCII文字だけで出力させましょう。
tree /F /Aまとめ
ディレクトリ構成を共有するなら、「tree /F を使ってファイル名も出す」。 非常に地味なコマンドですが、知っているとドキュメント作成やコミュニケーションのコストをグッと下げてくれる強力な味方です。ぜひ今日の開発からVS Codeのターミナルで試してみてください!
関連記事
- linux でtreeコマンドがないときの代替コピペ紹介
Linuxでtreeコマンドがない!? 標準コマンドだけで階層表示するコピペ集 - windows で linux WSL2のセットアップ方法
【WSL2リファレンス】Ubuntuの最短構築・詳細設定・リソース制限まとめ
ここまで読んでいただきありがとうございます。
では、次の記事で。 lumenHero