ファイル・ディレクトリの位置関係を出力するCLIツールの作成

はじめに

ファイルやディレクトリの位置関係について視覚的に把握したり、他人に共有したりする場合、ツリー図は重宝されます。しかし、プロジェクトの規模が大きくなり、ファイルやディレクトリの数が増えてくると、単純なツリー図でその位置関係を把握することは難しくなります。そこで、tree コマンドのファイル検索機能をラップし、直感的なオプションや引数でファイルやディレクトリの位置関係を視覚的に把握するためのシェルスクリプトを作成しました。

以下のような場面での使用を想定しています。

• 実装方針を書き起こす際
• 前提知識がないメンバー(あるいは chatGPT)にテキストベースで共有する際
• 技術記事等を書く際

特徴

• treeコマンドをラップしており、tree 形式での出力を行います。
• 特定のファイルやディレクトリに焦点を当て、その位置関係を明確に表示します。
• public で公開中の GitHub リポジトリに対しても、 URL の指定によって rel コマンドを実行できます

インストール方法

Homebrew 経由

brew tap Yamayamaaya/homebrew-rel
brew install rel

または、GitHub から直接ダウンロードも可能です。

curl -sSL https://raw.githubusercontent.com/Yamayamaaya/Rel/main/install.sh | zsh

使い方

オプション:

• -all : ディレクトリツリー全体を表示します。
• -dir : ディレクトリに焦点を当て、指定されたファイルとディレクトリのみを表示します。
• <GitHub_Repository_URL> : GitHub リポジトリの URL(public のみ)。指定がない場合は、カレントディレクトリを対象とします。

引数:

• '<target1> <target2>... : ファイルまたはディレクトリの名前。ファイル名とディレクトリ名の両方を指定できます。

使用例と出力例:

React アプリケーションのディレクトリ構造を例に取ります。

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    index.html
    favicon.ico
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js
    setupTests.js

1. 特定のファイルとディレクトリを視覚化:

   rel README.md src
   

   my-app/
   ├── README.md <<-
   └── src/ <<-
   

2. -dir オプションの使用:

   rel -dir index.html src
   

   my-app/
   └── public/
       └── index.html <<-
   └── src/ <<-
   

3. -all オプションと特定のファイルの使用:

   rel -all package.json
   

   my-app/
   ├── README.md
   ├── node_modules/
   ├── package.json <<-
   ├── .gitignore
   ├── public/
   │   ├── index.html
   │   ├── favicon.ico
   │   └── manifest.json
   └── src/
       ├── App.css
       ├── App.js
       ├── App.test.js
       ├── index.css
       ├── index.js
       ├── logo.svg
       ├── serviceWorker.js
       └── setupTests.js
   

github

https://github.com/Yamayamaaya/Rel

開発記録

作成予定