ディレクトリツリーを2秒で書けるアプリを作りました。
アプリ開発のきっかけ
PRに説明をつけるとき、自分はよくディレクトリツリーを使います。
👇 こんなのです。
/
└─ src
└─ components
├─ button.tsx
├─ button.css.ts
└─ button.stories.tsx
一から自分でディレクトリツリーを書くのはなかなかの手間なので、👇のようにしていました。
- 既存のディレクトリツリーをコピーしてファイル名の部分だけを変える
- 足りない部分は他の部分をコピーしたり「けいせん」を変換して補完する
が、それすら面倒になってしまいサラッと書けるようなアプリを作ってしまおうと思い作成しました。
アプリの概要
入力したインデントに応じて自動的にディレクトリツリーの罫線部分を挿入してくれます。
左のテキストエリアにスペースやタブを入れるとスペースやタブの数がそのままディレクトリの深さとなり、右のテキストエリアにディレクトリツリーが描画されます。
[2024/8/31追記]
この記事投稿後に@ShuntaTodaさんから機能追加のPRをいただきました。
右のテキストエリアの行をクリックするとそのファイルのフルパスをコピーできるという便利な機能が追加されましたので、お試しください😃
技術スタック
- フレームワーク： Astro
- スタイリング： tailwindcss
- テキストエディタ： CodeMirror
- インフラ： Netlify
Astro
実務ではNext.jsを使用することが多いのですが、今回のアプリは1ページだけ + バックエンドとの通信が不要であったためデフォルト全部盛りフレームワークのNext.jsは少しオーバーかなと思いました。
そこで今回は以前から使ってみたかったAstroを使用してみることにしました。
AstroはHTMLとCSSだけでWebアプリケーションを作ることができると謳っており、複雑な機能が必要になったときにその機能だけを追加していけるようになっています。
このアプリでもベースを大まかにHTMLとCSSで作ったあとに、状態管理が必要なテキストエリアの部分だけにReactを使用するような流れで簡単に実装できました。
またAstroを使えば遅いウェブサイトを作るのはほぼ不可能になることを目標として掲げています。
可能な限りサーバーでのレンダリングを活用するように設計されており、クライアントサイドに送るJavaScriptの量が少なくなるようになっています。
👇 Astroがどんなケースで適しているかはこのページが大変わかりやすいので、ぜひ読んでみてください。
ただ、今回のような1枚ペラのHTMLで動作するアプリではこれでも少しオーバーだったかもしれません（そもそもフレームワーク要らなかったかも？）。
tailwindcss
普段はCSS or CSSのプロパティがそのまま使用できるAPIが提供されているライブラリを使うことが多いのですが、いまだにあまり使ったことがなかったため採用してみました。
良かったところ
- shadcn-uiなどtailwindcssでスタイリング済の公開されたコンポーネントをそのままコピーすればそれっぽい見た目になるため早く作ることができた
- ブランディングなどを気にせずにとにかく動くものをすぐに作りたい！という今回のようなケースでは、デフォルトのカラーパレットが含まれておりすぐに書き始めることができて良かった
気になったところ
- プロパティ名がCSSと異なるので「CSSでこう書くものをtailwindcssだとどう書くのかな？」という対応を調べるのが面倒だった
- 普段は別ファイルにCSSを分けて書いているのでclassに大量のクラス名が並ぶのが見辛く感じてしまった（特にメディアクエリ）
- 静的解析にbiomeを使用していたが、このアプリの開発をしていたときにはtailwindcssのプロパティ名をソートするプラグインがなく、箇所によってプロパティの順番がバラバラになってしまうのが見辛く感じてしまった
自分はスタイルのマージにclsxを使用することが多いのですが、以下のようにスタイルをジャンルごとに配列として分けてみやすくする流派もあるようです。
<button className={clsx(
["text-white", "dark:text-black"],
["bg-blue-500", "dark:bg-blue-900"],
["border", "border-blue-500", "dark:border-blue-900"],
["rounded"],
["px-4", "py-2"],
["text-sm", "font-medium"],
["hover:bg-opacity-80"],
["focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:ring-offset-2"],
)}>
👇 参考にさせていただいた記事
これはなるほど！と思ってすぐに自分も一部コードで試してみましたが、どう分けるかを静的解析で強制できない + 毎回分けていくのが面倒だったので結局配列形式で書くのはやめてしまいました...。
単純に慣れていないための不満が多いので、もっと使っていけば見づらく感じる系の不満は無くなっていくかも？
CodeMirror
元々はディレクトリツリーを書く部分はただのtextareaタグにしていたのですが、ある日同僚から機能追加のリクエストをいただきました。
エンハンスの予定はなかったのですが、自分しか使っていないと思っていたため嬉しくて機能追加することにしました。
ちょうど実務でHTMLを編集するエディタを作るタスクがあり、使用感が良かったCodeMirrorを採用しました。
CodeMirrorは👇のような機能をサポートしており、より編集しやすいテキストエディタを提供することができます。
- 言語ごとのシンタックスハイライト
- 複数のテーマ
- キーバインディング
- マルチカーソル
このアプリではプレーンテキストを編集するためシンタックスハイライトは必要ないのですが、タブによるインデントやマルチカーソルでの編集ができるようになったため使いやすくなったと思います。
Netlify
AstroのチュートリアルがNetlifyにデプロイを行う内容だったのでそのまま採用しました。
Netlifyは「日本にCDNを持っていないので遅い」という話を何度か耳にしましたが、現時点で遅いと感じない + Lighthouseの点数も良いのでそのままにしています。
まとめ
実は作ったのは半年以上前だったりします。
自分では毎日のように使っており、他の人にも使ってみてもらいたくなったため記事にしました。
現状自分が使う上であまり困っていないので特にエンハンスの予定はありませんが、とりあえずはこのまま使っていこうと思っています！!!!!!!!!
＼ PR ／
事業拡大に伴い、エンジニアが足りてなくて困っています！
優しくて強いエンジニアが集まっている会社です！
興味のある方はこちらから！👇
Discussion
ツリー書くとき、コピペ繰り返してやってたんでとても楽になりました。ありがとうございます。
treeコマンドをよく使うんですがダメなんでしょうか？
treeコマンドも便利だと思います！
👇この辺りがtreeコマンドではできない + このアプリならできることかなと思います。
なるほど、ご自身でやりたい用途があってそれを実現した形なんですね！
素敵なプロダクトだと思いました！
ご詳説ありがとうございました。
大変便利なアプリですね。
今後記事を書く際などに活用させていただこうと思っています。
機能追加の要望になってしまって恐縮なのですが、右側の出力結果の罫線を含むツリーを左側にペーストした際、インデントに戻してくれる機能があると、再編集する際により便利になりそうですね。
ありがとうございます！
自分で使っていても思うところなので、時間がある時に追加できればと思っております...
僕も、以前、vueを使って似たようなものを作っていました。
え、めっちゃええですやん。。。
ぜひ使わせていただきます！
ありがとうございます、使わせていただきます！
自分はすでにあるディレクトリをD&Dすることでディレクトリツリーを表示するのを作ってました 自分で構造を書くのも必要だったので助かりました