製作理由
AIと一緒に学習を進めていると、プロンプトを送るときにフォルダ構成やディレクトリ構造を見せたくなることがよくあります。
しかし、わざわざ手書きで書くのは面倒だし、そもそもよほど大きいフォルダをAIに投げるのは重すぎる。私はAI無賃金勢(金欠)なので、フォルダをアップロードしたとたん制限がかかり、半日ほど使えなくなります😢
これらの手間を一発で解決するため、**「フォルダをドラッグ&ドロップするだけで、アスキーアート形式のツリー構造を生成してくれるWebアプリ」**をClaudeさんに作っていただきました。
アプリ概要
- アプリ名: TreeView Generator
- 使用技術: Next.js 14 (App Router), TypeScript, Tailwind CSS
- デプロイ先:Netlify
- URL: https://treeviewgenerator.netlify.app
主な機能
| 機能 | 概要 |
|---|---|
| フォルダアップロード | フォルダをドラッグ＆ドロップ／ボタンから選択可能 |
| 階層構造解析 | フォルダとファイル名だけを解析（中身は見ない） |
| アスキーアート出力 | ├── や └── を使ったツリー構造を自動生成 |
| コピー機能 | ワンクリックでクリップボードにコピー |
| 設定パネル | 除外パターン、表示スタイル、最大階層など(テスト段階) |
ターゲットユーザー
- AIにプロンプトを送る人
- READMEを書く人
- Notionにフォルダ構成を貼りたい人
技術スタック
- フロントエンド: Next.js 14（App Router）
- 言語: TypeScript
- スタイリング: Tailwind CSS
- 状態管理: React Hook
- デプロイ: Netlify
ディレクトリ構成（抜粋）
treeview-generator/
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── globals.css
│ ├── components/
│ │ ├── TreeViewGenerator.tsx # メインコンポーネント
│ │ ├── FileUploader.tsx # アップロード機能
│ │ ├── TreeOutput.tsx # 結果表示
│ │ └── SettingsPanel.tsx # 設定パネル
│ ├── lib/
│ │ ├── fileProcessor.ts # ファイル処理ロジック
│ │ ├── treeGenerator.ts # ツリー生成ロジック
│ │ └── types.ts # 型定義
│ └── utils/
│ ├── constants.ts # 定数
│ └── helpers.ts # ヘルパー関数
├── package.json
└── README.md
魅力
- 大量ファイル対応：10000ファイルでも約3秒程度で出力できるように名前だけを抽出
-
フォルダ構造保持：
webkitdirectoryのサポートを明示し、webkitRelativePathで再構築 -
アイコン表示：拡張子ごとに対応（🟨
.js, 🔷.tsx, 🎨.cssなど）で、AIだけではなく使用者本人にもわかりやすく。
今後のアップデート予定
- ファイルの説明を短文で付与する機能があればもっと便利かも(選択可能)
成果
- 10000ファイル未満のフォルダで3秒以内に処理完了
- オフライン動作：中身は一切読み込まず、ブラウザ内で完結
- 実際にREADMEやNotionに貼ると便利
感想等
実際に想定していた用途でかなり使えたので満足です！
🔗 TreeView Generator: https://treeviewgenerator.netlify.app