AIコーディングツールを使用してオープンソースプロジェクトに貢献する

## Intro

オープンソースプロジェクトへの貢献経験があまりない志望のプロダクトマネージャーとして、技術スキルを学び成長させることに意欲的です。

オープンソースプロジェクトは、私のような初心者が経験豊富な開発者と協力し、ソフトウェア開発の実践的な経験を積むための素晴らしい機会を提供します。

この記事では、AIコーディングツールを活用してIntuitのPlayer UIプロジェクトに貢献する方法を探ります。

オープンソースソフトウェアの概念に慣れていない方のために、オープンソースソフトウェアは誰でも使用、修正、共有できる公開ソフトウェアであることを説明します。GitHubのようなプラットフォームはこれらのプロジェクトのハブとして機能し、世界中の開発者がシームレスに協力できるようにします。皆さんが同じ理解を持てるように、オープンソースへの貢献や取り上げるツールに関連する主要な用語の用語集を含めました。

**用語集（GitHubやオープンソースが初めての方へ）:**

- **オープンソース**: 誰でも使用、修正、共有できるソフトウェア。
- **GitHub**: 開発者がプロジェクトで協力し、変更を追跡するための主要なプラットフォーム。
- **リポジトリ（Repo）**: プロジェクトのホームベースであり、すべてのファイルと履歴が保存されている場所。
- **プルリクエスト（PR）**: プロジェクトに変更を提案し、マージ前に議論を促す方法。
- **TypeScript**: JavaScriptの強力なバージョンで、より安全なコーディングのために型を追加するプログラミング言語。
- **Player UI**: Intuitのクロスプラットフォームの洗練されたユーザーインターフェースを作成するためのツールキット。
- **フロー型アーキテクチャ**: アプリ内でデータがどのように移動するかに重点を置いた設計スタイル。
- **AIコーディングツール**: コードの作成と改善を容易にするスマートなソフトウェア。
- **貢献**: バグ修正や新機能追加を通じてオープンソースプロジェクトを強化する機会。

## プロセス

Intuitのオープンソースリポジトリは139個あり、一つ一つを確認するのは難しいと感じました。そこで、Perplexity.aiとDevv.aiに助けを求めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/f30f5a37-fdee-c823-ca5d-b85b897531a9.png)


### 最初のプロンプト

「Intuitのオープンソースプロジェクト（https://github.com/intuit）を見てください。私はプロダクトマネージャーを目指しており、技術的なことも学びたいです。TypeScriptの経験もあり、シンプルな貢献から始めるにはどのプロジェクトを選ぶべきでしょうか？」

これをDevv.aiのGemini 1.5 Proに尋ねたところ、非常に消極的な回答が返ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/ceadd614-82e8-5f52-8e83-a0902b2562e0.png)

 :(

そこで、信頼できる友人のClaude Sonnet 3.5に尋ねたところ、IntuitのPlayer UIを推奨され、その理由についても詳しく説明してもらいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/3064c99c-f06f-8cb8-c2c3-1b22ad6e79d0.png)

#### 積極的でとても役立つ回答 :)

さらに、Perplexity.aiにもどのリポジトリを選ぶべきか尋ねたところ、APIテストオートメーション、モック、パフォーマンステスト、UIオートメーションの統一フレームワークであるKarate Labsを推奨されました。しかし、最後のプルリクエストが1ヶ月前だったため、Player UIを試すことにしました。

次のステップとして、Player UIのGitHubページを確認し、学習とプロンプトのためにメモを取ることにしました。リポジトリにはいくつかのサブカテゴリーがあるため、Devvに質問しました。


### Devvの反応

「Player UIにはいくつかのサブリポジトリがあります。それぞれを確認して説明し、どれか1つを選んでください。」

しかし、Devvは存在しないリポジトリについて回答してきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/879e11d2-b0b9-e279-9b2a-9cd7e327712f.png)

#### 想像上のリポジトリ :(

そこで、Devvに実際のリポジトリを教えてもらうよう丁寧に促しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/dfc66035-8fbc-d47c-624e-c0d9abc7915e.png)

最終的に、メインのPlayerリポジトリを推奨されました。これは積極的にメンテナンスされており、コミュニティも大きいためです。最近（5日前）に更新されたばかりだったので、良い選択だと思いました。

そのため、新しいスレッドを開始し、contextとしてplayer-ui/playerリポジトリを選択しました。Devvはこのリポジトリを確認し、会話のコンテキストとして使用します。


## Devvが公開リポジトリをコンテキストとして使用する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/23aeafab-ef70-4ac2-e256-d887e664f29b.png)


Gen AIからの幻覚を識別できない自分を防ぐために、Player UIをじっくり見てその内容をしっかり理解しました。

読み進めたドキュメントに基づいて、リポジトリについてDevvにさらに質問しました。そこで以下のことを学びました：


- **Player UI**は、Intuitの開発者がクロスプラットフォームのインターフェースを構築するのを助けるフレームワークで、React/React NativeやFlutterに似ています。
- **Player UI**はTypeScriptを使用しており、TypeScriptのすべての利点を活用しています。（TypeScriptの利点は？）
- **フロー型アーキテクチャ**: Player UIはフロー型アーキテクチャを採用しており、ReactのコンポーネントベースアーキテクチャやFlutterのウィジェットベースアーキテクチャとは異なります。Player UIでは、画面のフローとその間の遷移を定義します。例えば：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3884704/4bae6a88-4c47-ac69-53a2-d36e4984d815.png)

  データバインディングやプラグインシステムなど、他にもさまざまな機能があります。

## 貢献する時が来た、いや来ていない？

以下の質問をしました：

「このリポジトリにとって良い最初の貢献は何ですか？貢献のインパクトと実装の容易さのバランスを考慮してください。過去のプルリクエストの例を参考に…」

ドキュメントの理解を深めるために最初にドキュメントの改善に取り組むことを勧められました。

しかし、チャットを行き来しプロジェクトを詳しく調べた結果、貢献前にプロジェクトについてもっと学びたくなり、貢献者に余計な負担をかけるような不完全なプルリクエストを避けることにしました。

## 次のステップの計画

1. 過去のプルリクエストをさらに読み、イシューを確認する。
2. ユーザーとしてPlayer UIを試し、エクスペリエンスにギャップがないか確認する。
3. 自分のスキルレベルとインパクトの完璧な交差点にある貢献を決定する。

この計画を実行し、ここで更新することを願っています！

最後までお読みいただきありがとうございました！皆さん自身もオープンソースプロジェクトに貢献することに挑戦してみてください :) 学ぶための素晴らしい方法です。