はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。

GitHubのリポジトリを見せるとき、「このプロジェクトってどんな構造？」と聞かれることがあります。特にREADMEではディレクトリ構造をテキストで書くのが面倒ですよね。

そんなときに便利なのが、「GitHub File Tree Visualizer」。ワンクリックでツリー構造を生成できて、READMEにも貼れる優れモノです。

「GitHub File Tree Visualizer」は、GitHub上のリポジトリのディレクトリ構造を自動で解析して、見やすいツリー形式で出力してくれるツールです。

ツールを開いて、GitHubリポジトリのURLを入力するだけ。

読み込みが完了すると、以下のような構造が表示されます。

src/
├─ components/
│  ├─ Home/
│  └─ Footer/
├─ hooks/
├─ assets/
└─ main.tsx

下部にある「Copy as Markdown」ボタンを押せば、そのままREADMEに貼り付けられます。見た目も整っていて、GitHubでも綺麗に表示されます。

✅ READMEが一気に見やすくなる
✅ 手打ちのツリーを直す手間がゼロ
✅ 構成の把握にも役立つ（自分でも）

特にポートフォリオ公開時やチーム共有のときに、「どこに何のファイルがあるのか」がパッと分かるのは大きな利点です。

GitHub File Tree Visualizerは、「READMEをより見やすく、伝わりやすく」するための神ツールです。

ポートフォリオやチーム共有の際にぜひ活用してみてください。