Zennの記事で紹介されていた個人開発アプリにコントリビュートをしてみた話
2024.09.30こんにちは、リテールアプリ共創部の戸田です。
今回は、Zennで見つけた興味深いアプリ「Dir Maker」に機能を追加し、プルリクエストを送った経験について共有します。
Dir Makerについて
このアプリは簡単に説明すると「ディレクトリツリーを2秒で書けるアプリ」です。
Dir Makerは、テキスト入力からディレクトリ構造を視覚化することができます。プロジェクトの構造を簡単に説明したり、ドキュメントを作成する際に非常に便利なツールだと思います。
製作者様のZennの記事でもわかりやすく解説しているのでそちらもよければ読んでみてください。
Dir MakerのURL
Zennの記事
Dir Makerとの出会い
このアプリの第一印象は「これいいな！」でした。シンプルなUIで手軽にディレクトリツリーを作成できるので、〇〇アプリを作ってみた系のブログの執筆に便利だ！と思いました。
ブログでコードを解説する際、特定のファイルのパスを正確に示すことが重要です。そのため、ディレクトリツリーからファイルパスを直接コピーできるようになれば、作業効率が大幅に向上し、ミスを減らせると考えました。
今までは↓のようにディレクトリツリーのテキストをコピーできる機能があった
/
├─ src
│ ├─ components
│ │ └─ Textarea.tsx
│ └─ pages
│ └─ index.astro
├─ .gitignore
├─ astro.config.mjs
├─ package.json
├─ package.lock.json
└─ tsconfig.json
既存のツリーを簡単に作る機能を使って、ファイルのパスをコピーして解説がしたい！
const foo = "test"
行動
最初は自分でアプリを新規作成して自分が使えるようにしようと思いました。Dir MakerにGitHubのリンクがあったので、リポジトリをクローンして機能追加することもできましたが、人の作品を無断で改変する罪悪感があるので今回はプルリクエストを送ることにしました。
コーディング
コーディング自体はそこまで難しくなく、2時間ほどで完成することができました。内部のデータ構造と表示形式を変える必要がありましたが、元のコードが綺麗だったためサクッと実装できました。具体的には、各ファイルノードにクリックイベントを追加し、クリック時にファイルパスをクリップボードにコピーする機能を実装しました。
プルリクエスト
機能追加ができたのでプルリクエストを送る段階です。
初めてのオープンソースプロジェクトへのプルリクエストだったし、全く知らない人に機能提案と追加をしてプルリクエストを送るのは正直怖かったし、何を言われるか分からずドキドキでした。それでも本当にこのアプリがいいと感じた想いと自分の考えた機能がどのようなメリットをもたらすのかを全力で伝える文章を書きプルリクエストを送りました。
実際のプルリクエストの内容
製作者様の反応
自分の想いが伝わり（たぶん）、機能について「便利そう」と言って頂きました。ですが、コードについては課題がたくさんあり修正点について丁寧なレビューとコメントして頂きました。具体的にはカスタムフックやロジックのコードの管理方法などのレビューを頂き、自分の実力不足で製作者様の意図を感じ取れなかった部分や設計を崩してしまったことなど、まだまだ後悔がたくさんあります。そんなコードでも丁寧なレビューをして対応いただき本当に感謝しています。
修正
製作者様のご厚意をすごく感じたこともあり、本当にいいものを作るため製作者様のアドバイスに基づき、自分の実力で最大限の修正をしました。製作者様の修正が入りましたが、最終的にmainブランチにマージすることができました。
最後に
今回プルリクエストを送ってみて本当にやってよかったと思っています。会社の人以外と会話することも少ないし、レビューなんてほとんどないと思います。そもそも新卒1年目で業務経験がほとんどありません。そんな中、社外の人にプルリクエストを送るという経験をできたこと、他社で最前線の開発をしているエンジニアの方にレビューして頂けたこと、有効活用できるアプリを世の中に残す手伝いができたこと、全部がいい経験になりました。対応していただいた製作者の近藤さんありがとうございました！！
備考: treeからDir Makerにインポートする方法
Dir Makerを使う際に現在のディレクトリツリーをDir Makerにインポートしたいことがあるのではないでしょうか？そんな時にはtreeコマンドと生成AIを使ってうまくインポートすることができます。
実際のディレクトリツリーをコピーする
cd 対象のディレクトリのパス
tree //treeで出力されたツリーをコピーする
//Macの場合は"tree | pbcopy"を実行すると出力が自動でコピーされる
コピーしたテキストの例
.
├── components
│ ├── ClickableLine.tsx
│ ├── CodeMirrorEditor.tsx
│ ├── CopyButton.tsx
│ ├── FormattedTextDisplayArea.tsx
│ ├── Header.astro
│ ├── PageHead.astro
│ └── hooks
│ ├── directories
以下略
コピーしたテキストを生成AIでインデント形式にする
生成AIへのプロンプト
以下のテキストを参考にディレクトリツリーの構造をインデントで表現したテキストに変更してください。
/
src
components
Textarea.tsx
pages
index.astro
.gitignore
astro.config.mjs
package.json
package.lock.json
tsconfig.json
変更するテキスト
.
├── components
│ ├── ClickableLine.tsx
│ ├── CodeMirrorEditor.tsx
│ ├── CopyButton.tsx
│ ├── FormattedTextDisplayArea.tsx
│ ├── Header.astro
│ ├── PageHead.astro
│ └── hooks
│ ├── directories
│ │ ├── generateDirectoryLineData.test.ts
│ │ ├── generateDirectoryLineData.ts
│ │ ├── parseTextToDirectories.test.ts
│ │ ├── parseTextToDirectories.ts
│ │ ├── resolveFullDirectoryPath.test.ts
│ │ └── resolveFullDirectoryPath.ts
│ ├── formatTextAsDirectoryTree
│ │ ├── calculateDepth.test.ts
│ │ ├── formatTextAsDirectoryTree.ts
│ │ ├── generatePrefix.test.ts
│ │ ├── getLines.ts
│ │ ├── isLast.test.ts
│ │ └── separateLinses.test.ts
│ ├── index.ts
│ ├── useDirectories.ts
│ └── useFormat.ts
├── env.d.ts
├── pages
│ └── index.astro
└── types
└── directory.ts
7 directories, 24 files
生成AIの解答
以下のように、インデントを使用してディレクトリツリーの構造を表現したテキストに変更しました：
.
components
ClickableLine.tsx
CodeMirrorEditor.tsx
CopyButton.tsx
FormattedTextDisplayArea.tsx
Header.astro
PageHead.astro
hooks
directories
generateDirectoryLineData.test.ts
generateDirectoryLineData.ts
parseTextToDirectories.test.ts
parseTextToDirectories.ts
resolveFullDirectoryPath.test.ts
resolveFullDirectoryPath.ts
formatTextAsDirectoryTree
calculateDepth.test.ts
formatTextAsDirectoryTree.ts
generatePrefix.test.ts
getLines.ts
isLast.test.ts
separateLinses.test.ts
index.ts
useDirectories.ts
useFormat.ts
env.d.ts
pages
index.astro
types
directory.ts
この表現方法は、スペースによるインデントを使用してディレクトリの階層構造を表現しています。各レベルの深さは、スペースの数で示されています。この方法は、シンプルで読みやすく、多くのテキストエディタやターミナルでも問題なく表示できるという利点があります。
ただし、この表現方法にはいくつかの注意点があります：
- ファイル数や総ディレクトリ数の情報が失われています。
- 空のディレクトリと、単一のファイルを含むディレクトリの区別がつきにくくなる可能性があります。
- 非常に深い階層構造の場合、右側に長くなりすぎる可能性があります。
これらの点を考慮し、必要に応じて追加の情報（例：ファイル数、ディレクトリ数）を別途提供したり、表示方法を調整したりすることをお勧めします。
インデント形式に変更されたテキストをコピーしてDir Makerの左のエディタに入力することで以下の画像のようになります。
この記事を参考に皆さんもコントリビューターとして活躍してみてはいかがでしょうか。
