フォルダツリーの記号一覧｜├──・└──・│の意味と作り方

未分類

READMEや設計書へフォルダ構成を書こうとして、「├──や└──は何を意味する？」「最後の項目だけ記号が違うのはなぜ？」「Windowsで自動生成できる？」と迷っていませんか。

フォルダツリーでは、縦線の│、途中の枝を表す├──、最後の枝を表す└──を組み合わせ、親子関係をテキストで表現します。

基本ルールは、まだ下に兄弟項目が続く行へ├──、同じ階層の最後の項目へ└──を使い、上の階層が続いている列へ│を残すことです。

これらはUnicodeのBox Drawing（罫線素片）に含まれる記号で、等幅フォントとコードブロックを使うと位置がそろいやすくなります。

Windowsでは標準のtreeコマンド、Linuxではtreeパッケージ、macOSではHomebrewなどで導入したtreeを利用できます。

ただし、自動出力には不要なファイルや深い階層が大量に含まれるため、READMEへ載せる際は対象範囲を絞り、秘密情報や個人名が混ざっていないか確認してください。

この記事では、フォルダツリー記号の意味、手書きのルール、Windows・Linux・Macでの自動生成、Markdownへの貼り方、文字化け・ずれの対処まで解説します。

この記事でわかること

  • フォルダツリーで使う├──・└──・│の意味
  • 階層がずれないツリー構造の書き方
  • Windows・Linux・macOSで自動生成する方法
  • Markdown・READMEへ崩さず貼り付けるコツ

フォルダツリーで使う基本記号

記号 読み方・役割 使う位置
│ 縦線 上の階層が下へ続いている列
├── 途中の枝 同じ階層に後続項目がある行
└── 最後の枝 同じ階層の最後の行
── 横線 親から項目名へつなぐ線
/ スラッシュ フォルダ名であることを示す任意表記
[ ] 角括弧 注記・任意項目など独自ルール

├──は「まだ兄弟が続く」

同じ親フォルダの中に、次のファイルやフォルダが残っている場合に使います。

枝の左側には縦線が入り、下の兄弟へ接続が続いていることを示します。

└──は「この階層の最後」

同じ親に属する最後の項目へ使います。

下へ続く縦線がなくなるため、見た人はその親フォルダの子要素が終わったと判断できます。

│は上位階層の続きを示す

深い階層へ入っても、上位の兄弟項目がまだ残っている場合は、その列へ縦線を残します。

この縦線を消すと、どの親へ属しているか判断しにくくなります。

最小のフォルダツリー例

project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

projectがルート

最上段のproject/が、図で説明する範囲の起点です。

末尾のスラッシュは必須記号ではありませんが、フォルダとファイルを見分けやすくします。

index.htmlの後に項目が続く

index.htmlの下にcssとjsがあるため、├──を使います。

cssの下では上位階層が続く

css/の後に同じ階層のjs/があるため、style.cssの左側に│を残します。

jsは最後なので縦線を空白へ変える

js/はproject直下の最後の項目です。

その子であるmain.jsの左側には、縦線ではなく空白を入れます。

階層が深いツリーの読み方

app/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   └── hero.jpg
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   └── Footer.js
│   └── index.js
└── README.md

インデント一段を固定する

一般的には、枝の後の項目名と次階層の開始位置をそろえるため、1階層を4文字程度で表現します。

│ または半角スペース4つを一単位として統一してください。

縦線と空白を同じ幅にする

│の後へ半角スペース3つを入れるなら、縦線がない場所も半角スペース4つにします。

全角スペースが混ざると、多くのエディターで列がずれます。

最後の子要素を確認する

各親フォルダごとに、最後の子へ└──を使います。

ツリー全体の最後だけではなく、images内のhero.jpg、components内のFooter.jsも、それぞれの親の最後です。

手書きでフォルダツリーを作る手順

STEP1：ルートフォルダを書く

説明対象の最上位フォルダを一行目へ書きます。

PC全体の絶対パスではなく、プロジェクト名から始めると読みやすくなります。

STEP2：同じ階層の項目を並べる

最初はインデントを付けず、ルート直下のフォルダとファイルを一覧にします。

STEP3：最後以外へ├──を付ける

同じ階層の最後だけ└──へ変えます。

STEP4：子要素を一段下げる

親項目の次の行へ、4文字分のインデントを入れて子要素を書きます。

STEP5：上位階層の縦線を残す

上位の兄弟が続く場所には│ を使います。

上位が終わっている場所は空白4つへ置き換えます。

STEP6：等幅表示で確認する

Markdownのコードブロック、テキストエディター、ターミナルなど、等幅フォントで確認してください。

ASCII記号だけで書く方法

Unicodeの罫線記号が文字化けする環境では、半角英数字だけで近い形を作れます。

project/
|-- index.html
|-- css/
|   `-- style.css
`-- js/
    `-- main.js

|--を途中の枝に使う

├──の代わりとして使います。

`--を最後の枝に使う

バッククォートとハイフンで└──を表します。

互換性を優先する文書へ向く

古い端末、文字コードが不明なログ、プレーンテキストメールではASCII版が崩れにくいでしょう。

Windowsのtreeコマンドで自動生成する

Windows 10・11には、フォルダ構造を表示するtreeコマンドがあります。

Microsoft公式では、構文をtree [drive:][path] [/f] [/a]と案内しています。

フォルダだけを表示する

tree

現在のフォルダを起点に、サブフォルダを表示します。

ファイルも含める

tree /f

/fは各フォルダ内のファイル名も表示します。

ASCII記号で表示する

tree /a

/aは罫線記号の代わりにテキスト文字を使います。

文字化けする文書へ貼る場合に便利です。

対象フォルダを指定する

tree "C:\Users\name\Documents\project" /f

パスに空白がある場合は引用符で囲みます。

テキストファイルへ保存する

tree . /f /a > folder-tree.txt

>で画面出力をファイルへ書き出せます。

同名ファイルがある場合は上書きされるため注意してください。

PowerShellでフォルダ一覧を作る

単純な再帰一覧

Get-ChildItem -Recurse

これはツリー記号付きではありませんが、ファイル情報の確認や条件検索へ向きます。

フォルダだけを取得する

Get-ChildItem -Directory -Recurse

深さを制限する

Get-ChildItem -Recurse -Depth 2

PowerShellのバージョンによって利用できるオプションが異なる場合があります。

README用の見た目をすぐ作るなら標準のtreeが簡単です。

Linuxでtreeコマンドを使う

Linuxのtreeは、ディレクトリを再帰的に調べ、深さに応じてインデントした一覧を出力するコマンドです。

環境によっては標準インストールされていません。

Ubuntu・Debianでインストールする

sudo apt update
sudo apt install tree

RHEL・Rocky・AlmaLinux系

sudo dnf install tree

基本表示

tree

隠しファイルも表示する

tree -a

.gitや環境設定ファイルも表示されるため、公開文書へ貼る前に秘密情報がないか確認してください。

深さを制限する

tree -L 2

2階層までに絞ると、大規模プロジェクトでも読みやすくなります。

フォルダだけを表示する

tree -d

不要な項目を除外する

tree -I "node_modules|.git|vendor"

除外パターンの書式は利用中のtree実装・バージョンを確認してください。

macOSでtreeコマンドを使う

標準ではtreeがない場合が多い

macOSのターミナルでtreeが見つからない場合は、Homebrewなどのパッケージ管理ツールから導入できます。

Homebrewでインストールする

brew install tree

導入後の使い方はLinuxとほぼ同じ

tree -L 3 -I "node_modules|.git"

追加インストールなしならfindを使う

find . -maxdepth 3 -print

macOS標準のfindではオプションがGNU版と異なる場合があります。

ツリー記号付きの見栄えを重視するならtreeを導入するほうが簡単です。

Markdown・READMEへ貼る方法

コードブロックで囲む

```text
project/
├── src/
│   └── index.js
└── README.md
```

コードブロックへ入れると、等幅フォントと改行が保たれやすくなります。

通常の段落へ直接貼らない

Markdownの通常段落では、連続するスペースがまとめられ、インデントが崩れる場合があります。

言語指定はtextでよい

textや指定なしを使うと、不要なシンタックスハイライトを避けられます。

長すぎる構成は折りたたむ

GitHubなど対応環境ではdetails要素で折りたたむ方法があります。

重要なフォルダだけ本文へ載せ、完全版を別ファイルへ置く方法もあります。

Word・Googleドキュメントへ貼る場合

等幅フォントを選ぶ

Consolas、Courier New、Noto Sans Monoなど、各文字の幅がそろうフォントを使います。

自動箇条書きを解除する

先頭の記号が箇条書きへ変換されると、位置がずれます。

プレーンテキストとして貼り付け、段落のインデントを0へ設定してください。

全角日本語名でずれる場合がある

フォントによって半角記号と全角文字の表示幅が完全にはそろわない場合があります。

PDF化前に見た目を確認し、必要ならASCII版や表へ変更します。

フォルダ名の表記ルール

フォルダ末尾へスラッシュを付ける

src/のように書くと、拡張子のないファイルと区別しやすくなります。

省略は記号で明示する

project/
├── src/
│   ├── ...
│   └── index.js
└── README.md

...が「中身を省略」の意味であることを本文へ書いてください。

生成物とソースを区別する

dist/へ「ビルド生成物」、src/へ「ソースコード」のような短い注記を付けると理解しやすくなります。

project/
├── src/          # 編集するソース
├── dist/         # ビルド生成物
└── package.json

機密情報を載せない

.env、秘密鍵、顧客名、ユーザー名、社内サーバー名などを公開READMEへ載せないでください。

記号が文字化け・ずれる原因

文字コードがUTF-8ではない

├や└はUnicodeの罫線記号です。

古い文字コードへ保存すると、疑問符や別文字へ変換される場合があります。

フォントが記号を持っていない

利用フォントにBox Drawing文字がない場合、代替フォントへ切り替わり、線の太さや位置が合わない場合があります。

比例フォントを使っている

文字ごとに幅が異なるフォントでは、インデントがそろいません。

タブとスペースが混在している

タブ幅はエディターごとに2・4・8文字などへ変わります。

公開用ツリーでは半角スペースへ統一すると安定します。

チャット・SNSが空白を削除する

サービスによって連続スペースや改行が整形されます。

コードブロック機能を使うか、ASCII版へ変えてください。

フォルダツリーを読みやすくするコツ

深さを3〜4階層へ絞る

すべての依存パッケージやキャッシュを載せると、重要な構成が埋もれます。

説明対象だけを残す

Web制作の記事ならsrc・public・設定ファイルを中心にし、OS生成ファイルを除外します。

並び順へ意味を持たせる

実際の名前順を保つ、処理順へ並べる、重要順へ並べるなど、ルールを統一します。

自動生成後に手で整理する

コマンド出力をそのまま貼るのではなく、不要項目を削除し、注釈と省略記号を加えます。

よくある質問

├──と└──の違いは？

├──は同じ階層に後続項目があり、└──はその階層の最後の項目であることを示します。

│はどこへ入れますか？

上位階層の兄弟が下へ続いている列へ入れます。

Windowsでファイルまで表示するコマンドは？

tree /fです。

ASCII記号にするならtree /f /aを使います。

Linuxで深さを制限するには？

一般的なtreeコマンドではtree -L 2のように指定します。

Markdownでずれるのはなぜですか？

通常段落で空白がまとめられる、比例フォント、全角スペース、タブ混在などが原因です。

コードブロックと等幅フォントを使ってください。

参考資料

まとめ

この記事のポイントをまとめます。

  • ├──は同じ階層に後続項目がある枝です
  • └──は同じ階層の最後の枝です
  • │は上位階層が下へ続いていることを示します
  • 1階層のインデント幅を統一します
  • 等幅フォントとコードブロックで表示崩れを防ぎます
  • Unicodeが使えない場合は|--と`--で代用できます
  • Windowsはtree /fでファイルも表示できます
  • Linux・Macのtreeでは深さや除外対象を指定できます
  • 自動生成後は不要な階層と秘密情報を削除します
  • 公開前にUTF-8・空白・タブ・フォントを確認します

フォルダツリーは、罫線記号を飾りとして並べるのではなく、兄弟項目が続くか、どの親へ属するかを線で示すテキスト図です。

途中の項目へ├──、最後へ└──を使い、上位階層が続く列へ│を残してください。

Windowsではtree /f、LinuxやmacOSではtreeを使うと自動生成できます。

READMEへ載せるときは、コードブロックへ入れ、深さを絞り、不要な依存フォルダや秘密情報を削除しましょう。

記号の意味、インデント幅、表示フォントの3点を統一することが、誰が見ても親子関係をすぐ理解できるフォルダツリーを作る基本です。

タイトルとURLをコピーしました