【tree】macでコマンド一発でディレクトリ構造をテキストで出力

ディレクトリ構造をテキストで説明する場合手打ちしていませんか? 私も手打ちしていてすごく面倒だなと思っていました。treeコマンドで一発で出力できることを知りすごく楽になりました。 その方法をこの記事では紹介します!

macでコマンド一発でディレクトリ構造をテキストで出力する方法

Homebrewを使用するのでインストールしていない場合は下記のリンクのページの指示に従ってインストールしてください。

Homebrew macOS 用パッケージマネージャー

Treeをインストール

brew install tree

使い方

cdコマンドでディレクトリを移動し下記のコマンドを実行

tree

するとこのように出力されます。

.
├── assets
│   ├── css
│   │   ├── admin.css
│   │   ├── dev.css
│   │   └── style.css
│   ├── fonts
│   │   ├── myfont.eot
│   │   ├── myfont.svg
│   │   ├── myfont.ttf
│   │   └── myfont.woff
│   ├── img
│   │   ├── base
│   │   │   ├── apple-touch-icon.png
│   │   │   └── favicon.ico
│   │   └── common
│   │       └── logo.png
│   ├── inc
│   │   ├── css.html
│   │   ├── footer.html
│   │   ├── header.html
│   │   ├── js.html
│   │   ├── meta.html
│   │   ├── other.html
│   │   └── sub.html
│   ├── js
│   │   ├── main.js
│   │   ├── main.js.map
│   │   ├── vendor.js
│   │   └── vendor.js.map
│   ├── pdf
│   └── svg
│       └── sprite.svg
├── gulpfile.js
├── index.php
├── package-lock.json
├── package.json
├── pages.html
├── sample
│   ├── highlightjs.php
│   └── megamenu.php
├── src
│   ├── iconfont
│   │   ├── myfont.css
│   │   ├── sample.html
│   │   ├── svg
│   │   │   ├── 001-sns_facebook.svg
│   │   │   ├── 002-sns_facebook2.svg
│   │   │   ├── 003-sns_twitter.svg
│   │   │   ├── 004-sns_line.svg
│   │   │   ├── 005-sns_line2.svg
│   │   │   ├── 006-sns_line3.svg
│   │   │   ├── 007-sns_line4.svg
│   │   │   └── 008-sns-instagram.svg
│   │   └── templates
│   │       ├── myfont.css
│   │       ├── myfont.html
│   │       └── myfont.scss
│   ├── js
│   │   ├── app.js
│   │   ├── modules
│   │   │   └── common
│   │   │       ├── datepicker.js
│   │   │       ├── highlight.js
│   │   │       ├── is-mobile.js
│   │   │       ├── lazyload.js
│   │   │       ├── megamenu.js
│   │   │       ├── scroll.js
│   │   │       ├── smoothScroll.js
│   │   │       ├── sp-menu.js
│   │   │       ├── tablefix.js
│   │   │       └── userAgent.js
│   │   └── plugins
│   │       ├── jquery.fullscreenmenu.js
│   │       ├── jquery.tablefix_1.0.1.js
│   │       └── smooth-scroll.js
│   ├── sass
│   │   ├── admin.scss
│   │   ├── dev.scss
│   │   ├── foundation
│   │   │   ├── base
│   │   │   │   ├── _base.scss
│   │   │   │   ├── _myfont.scss
│   │   │   │   └── _reset.scss
│   │   │   ├── mixin
│   │   │   │   ├── _col.scss
│   │   │   │   ├── _display.scss
│   │   │   │   ├── _mediaQueries.scss
│   │   │   │   ├── _mixin.scss
│   │   │   │   ├── _object-fit.scss
│   │   │   │   ├── _replace.scss
│   │   │   │   └── standard-el
│   │   │   │       ├── _dl.scss
│   │   │   │       ├── _figure.scss
│   │   │   │       ├── _h.scss
│   │   │   │       ├── _img.scss
│   │   │   │       ├── _ol.scss
│   │   │   │       ├── _p.scss
│   │   │   │       ├── _spacer.scss
│   │   │   │       ├── _table.scss
│   │   │   │       └── _ul.scss
│   │   │   └── variable
│   │   │       ├── _break_points.scss
│   │   │       ├── _color.scss
│   │   │       └── _keyframes.scss
│   │   ├── layout
│   │   │   ├── _breadcrumb.scss
│   │   │   ├── _col.scss
│   │   │   ├── _content.scss
│   │   │   ├── _contents.scss
│   │   │   ├── _footer.scss
│   │   │   ├── _header.scss
│   │   │   └── _section.scss
│   │   ├── object
│   │   │   ├── component
│   │   │   │   └── _common-el.scss
│   │   │   ├── project
│   │   │   │   ├── _content.scss
│   │   │   │   └── _standard.scss
│   │   │   └── utility
│   │   │       ├── _autoSpacer.scss
│   │   │       ├── _highlighter.scss
│   │   │       ├── _show.scss
│   │   │       └── _utility.scss
│   │   ├── pages
│   │   │   └── top
│   │   │       └── _hero.scss
│   │   ├── structure
│   │   │   ├── _js_datepicker.scss
│   │   │   ├── _js_fit-sidebar.scss
│   │   │   ├── _js_fullscreenmenu.scss
│   │   │   ├── _js_highlightjs-theme.scss
│   │   │   ├── _js_highlightjs.scss
│   │   │   ├── _js_megamenu.scss
│   │   │   ├── _js_smartphoto.scss
│   │   │   ├── _js_swiper.scss
│   │   │   └── _js_tablefix.scss
│   │   └── style.scss
│   └── sprite_svg
│       ├── _sample.html
│       ├── sample.css
│       ├── svg
│       │   └── svg-arrow01_left.svg
│       └── templates
│           ├── _base.html
│           ├── myfont.css
│           └── myfont.scss
├── webpack.config.js
└── yarn.lock

36 directories, 112 files