個人開発でディレクトリツリーをサクッと書けるサイト『Dirivine』を作った話

概要

dirivine は、インデントに合わせて自動でディレクトリツリーの罫線を生成するシンプルな Web サイトです。
左側のテキストエリアにスペースやタブで階層を表現したテキストを入力すると、右側に見やすいツリー形式のテキストが自動生成されます。
架空のディレクトリ構成やドキュメントの例示を手早く作成したいときに便利です。

開発のきっかけ

架空のディレクトリツリーを書く機会が多く、tree コマンドの出力をそのまま使えないケースがよくありました。既存のツリーをコピーしてファイル名だけ書き換える方法で対処していましたが、それでも手間が残ります。

そこで 「テキストでインデントを書くと自動でツリーの罫線を整形してくれる」 ツールを作れば、ドキュメント執筆やサンプル作成の手間が大幅に減ると考え、dirivine を開発しました。

特徴

• スペースやタブのインデントを階層として解釈し、罫線を自動挿入
• 入力を変えるだけで即時にプレビューが更新されるライブ動作
• 出力はテキストなので他のドキュメントに貼り付け可能
• ブラウザ上で完結する、ライブラリに依存しない軽量実装

使い方

1. 左のテキストエリアに階層付きリストを入力します。スペースまたはタブでインデントしてください。
2. 右側に自動でツリー表示が生成されます。
3. 出力をコピーしてドキュメントや README に貼り付けてください。

入力例

/
 src
   index.js
   lib
     util.js
     dom.js
   styles
     main.css
 README.md

出力例

/
├─ src
│  ├─ index.js
│  ├─ lib
│  │  ├─ util.js
│  │  └─ dom.js
│  └─ styles
│     └─ main.css
└─ README.md

左の入力のインデントがそのまま深さになり、親子関係が罫線でわかりやすく表示されます。

デザインと実装スタック

• フロントエンド: 純粋な HTML / CSS / JavaScript
• デプロイ: GitHub Pages にて公開

ライセンス・クレジット

このプロジェクトは個人制作です。ソースコードは GitHub で公開しています。

開発にあたって参考にした記事やアイデアは多くあります。オープンな知見に感謝します。