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

オープンソースプロジェクト「Dir Maker」への機能追加とプルリクエスト経験を記事にしました。新卒エンジニアが初めて外部プロジェクトに貢献し、コードレビューを受けた過程と学びを詳細に解説しています。オープンソースコントリビューションの魅力と重要性を伝える実践的な体験談です。

#Zenn

#プルリクエスト

戸田駿太

2024.09.30

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

Dir Makerについて

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

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

Zennの記事

Dir Makerとの出会い

このアプリの第一印象は「これいいな！」でした。シンプルなUIで手軽にディレクトリツリーを作成できるので、〇〇アプリを作ってみた系のブログの執筆に便利だ！と思いました。
ブログでコードを解説する際、特定のファイルのパスを正確に示すことが重要です。そのため、ディレクトリツリーからファイルパスを直接コピーできるようになれば、作業効率が大幅に向上し、ミスを減らせると考えました。

今までは↓のようにディレクトリツリーのテキストをコピーできる機能があった

/
├─ src
│  ├─ components
│  │  └─ Textarea.tsx
│  └─ pages
│     └─ index.astro
├─ .gitignore
├─ astro.config.mjs
├─ package.json
├─ package.lock.json
└─ tsconfig.json

既存のツリーを簡単に作る機能を使って、ファイルのパスをコピーして解説がしたい！

/src/components/Textarea.tsx

const foo = "test"

スクリーンショット 2024-09-29 15.29.26.png

行動

最初は自分でアプリを新規作成して自分が使えるようにしようと思いました。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

この表現方法は、スペースによるインデントを使用してディレクトリの階層構造を表現しています。各レベルの深さは、スペースの数で示されています。この方法は、シンプルで読みやすく、多くのテキストエディタやターミナルでも問題なく表示できるという利点があります。

ただし、この表現方法にはいくつかの注意点があります：