【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