Zennの記事で紹介されていた個人開発アプリにコントリビュートをしてみた話

こんにちは、リテールアプリ共創部の戸田です。
今回は、Zennで見つけた興味深いアプリ「Dir Maker」に機能を追加し、プルリクエストを送った経験について共有します。

Dir Makerについて

このアプリは簡単に説明すると「ディレクトリツリーを2秒で書けるアプリ」です。
Dir Makerは、テキスト入力からディレクトリ構造を視覚化することができます。プロジェクトの構造を簡単に説明したり、ドキュメントを作成する際に非常に便利なツールだと思います。
製作者様のZennの記事でもわかりやすく解説しているのでそちらもよければ読んでみてください。

Dir MakerのURL
https://dir-maker.netlify.app/

Zennの記事
https://zenn.dev/praha/articles/b2e225ae091ae3

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時間ほどで完成することができました。内部のデータ構造と表示形式を変える必要がありましたが、元のコードが綺麗だったためサクッと実装できました。具体的には、各ファイルノードにクリックイベントを追加し、クリック時にファイルパスをクリップボードにコピーする機能を実装しました。

プルリクエスト

機能追加ができたのでプルリクエストを送る段階です。
初めてのオープンソースプロジェクトへのプルリクエストだったし、全く知らない人に機能提案と追加をしてプルリクエストを送るのは正直怖かったし、何を言われるか分からずドキドキでした。それでも本当にこのアプリがいいと感じた想いと自分の考えた機能がどのようなメリットをもたらすのかを全力で伝える文章を書きプルリクエストを送りました。

実際のプルリクエストの内容
https://github.com/kondo0602/dir-maker/pull/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でインデント形式にする

/
 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

.
 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の左のエディタに入力することで以下の画像のようになります。

この記事を参考に皆さんもコントリビューターとして活躍してみてはいかがでしょうか。