treeを実行してディレクトリ構成が見たい【Mac】

動機

記事を書くようになって、ディレクトリ構成を共有したい場面が増えた。
手書きだと面倒なのでコマンドで出力できないかと考えた。

結論

Homebrew をインストールして tree を実行するだけ

実行環境

• macOS Ventura 13.6
• シェル：zsh
• tree バージョン：2.2.1

やり方

Homebrew のインストール

Homebrew の公式ページにアクセスする。

「インストール」下の /bin/bash -c "$(curl ... コマンドをコピーして、自身のターミナルに貼り付けて実行。

パスワードを聞かれるので、Mac のログインパスワードを入力する

==> Checking for `sudo` access (which may request your password)...
Password:

==> This script will install: ... のように出て、最後に ==> Next steps: ... のように出る（場合がある）

==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
    echo >> /Users/user_name/.zprofile
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/user_name/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

指示通り echo >> /Users/user_name... 以下３行を実行する

✅ 完了！

tree のインストール

以下を実行

brew install tree

実行

Node.js プロジェクト下で実行してみる

tree

実行結果
※ node_modules以下は省略

.
├── node_modules/ // 省略
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
└── tsconfig.jso

実行してテキストファイルに出力

以下を実行すると .txt で出力できる

tree > output.txt

感想

これで、README作成 や 記事作成がちょっと楽になる！と歓喜。
開発はリモートのみで、Homebrew を使ったことがなかったのでこの機に調べられて良かった。