ディレクトリ構成の可視化

はじめに

生成AIを使ってプログラムを作るときにディレクトリ構成を情報として渡す場合がありました。

環境

- Linux Debian 13 Trixie
- tee (GNU coreutils) 9.7

コマンド

ドットから始まるファイル、ディレクトリは無視します。
また、Next.jsのディレクトリ構成の場合なので、tsとtsxを指定しています。
他のプログラム言語の場合は変更します。

find . \
  -path "./.*" -prune -o \
  -path "./node_modules" -prune -o \
  \( -type d -o -name "*.ts" -o -name "*.tsx" \) \
  -print \
| sed 's|^\./||' \
| awk '
BEGIN { FS="/" }
{
    # 階層の深さ
    depth = NF - 1
    path[$0] = 1
    parent = ""
    for (i = 1; i < NF; i++) {
        parent = parent $i "/"
    }
    parent_count[parent]++
}
END {
    # 再度出力部分
    for (p in path) {
        # 分解
        n = split(p, a, "/")
        prefix = ""
        parent = ""
        for (i = 1; i < n; i++) {
            parent = parent a[i] "/"
            if (i < n-1) {
                prefix = prefix "│   "
            }
        }
        # 最後の親の残カウントを減らす
        lastparent = ""
        for (i = 1; i < n; i++) lastparent = lastparent a[i] "/"
        parent_count[lastparent]--

        # ├── か └── を決定
        if (parent_count[lastparent] == 0)
            arrow = "└── "
        else
            arrow = "├── "

        print prefix arrow a[n]
    }
}
' | sort

例

こんな感じになります。

src
├── app
│   ├── search
│   │   ├── page.tsx
│   │   └── components
│   │       ├── SearchCategoryPanel.tsx
│   │       ├── SearchResultsTable.tsx
│   │       └── CommonSearchModal.tsx
│   └── layout.tsx