バイブコーディングでOSSコントリビュートができた話 (前編)

# 導入

後半記事です👇

https://qiita.com/ryotab22/items/8b14323c0f668a8bcd15

:::note
この記事で伝えたいこと
1. 生成AIの登場でOSSコントリビュートの敷居が下がって楽しくなってきた
2. メンテナーからAIで拾えなかった観点のレビューがもらえる（生成AI時代を生きるジュニアエンジニアにとってはとても貴重）
:::

---

最近「バイブコーディング」という言葉を耳にする機会が増えました。

:::note info
バイブコーディングとは、自然言語だけでAIに指示を出し、基本的には自分でコードを書かずに開発を進めるスタイルのことです。流れに身を任せるという意味もあるようです。
:::

そんな中で、ふと次のようなことを考えていました。
>「エンジニア歴も1年経ったので、敷居が高いと思い避けてきたOSSコントリビュートにもそろそろ挑戦してみたい」
>「AIでバイブコーディングができるなら、バイブOSSコントリビュートもできるんじゃないか？」

つまり、自分ではコードを書かず、OSS探し、issue選び、調査、設計、実装、リポジトリ固有の自動テストやコードチェック、レビュアーとのやりとりといった全ての工程で、AIのサポートを受けてマージまで持っていくことをゴールに据えて挑戦してみることにしました。

結果として、**コードはほぼ一行も書かずにPRがマージされる** という面白い体験ができたので、共有したいというのが本記事のモチベーションです。

こちらが対象のPRです👇

https://github.com/AntennaPod/AntennaPod/pull/7803


# 使ったAIツール

Cursor
o3, 4o, DeepResearch
deepwiki

# いざ参る

## OSS探し

まずは、対象となるOSSを探すところからスタートです。
コツは、deep Research を活用して、自分の技術スタックにマッチし、取り組みやすいOSSを見つけること。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/edcba27d-a0ba-479e-8aae-3fcf223aede4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/f8e090d3-9c5e-423b-b8a5-61444acfbe50.png)

117件検索して、11分も考えてくれましたね。こうして初めにヒットしたものがAntennaPodというOSSアプリでした。

https://github.com/AntennaPod/AntennaPod

AntennaPodはAndroid向けの人気ポッドキャスト管理アプリで、オフライン再生や細かな再生設定、プライバシーへの配慮など、ポッドキャストの包括的な管理・再生機能を提供しています。

さっそくGoogleストアからインストールして使ってみたところ、非常に便利で驚きました。普段からポッドキャストをよく聴くこともあり、気づけばすっかりヘビーユーザーです。

## deepwikiでOSSの構造を素早く把握する

続いて、プロジェクト全体の構造を把握するために、deepwikiを使ってアーキテクチャの概要を調べていきます。やることはシンプルで、リポジトリURLの `github.com` の部分を `deepwiki.com`に書き換えるだけです。すると以下の画面に遷移するので、「アーキテクチャの概要について教えて」というようなプロンプトを入力するだけです。各モジュールの責務や依存関係、レイヤードアーキテクチャの採用状況、データベース設計の概要など、リポジトリ内のコードベースに基づいた情報を網羅的にドキュメント化できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/82af7b1b-693f-4bd7-a0bb-13cf2ececa1f.png)

また、任意の観点で追加質問を投げることも可能で、ドキュメントが整備されていないOSSでも効率的に内部構造を理解できる点が大きな強みです。
コードリーディングの初動を大幅に効率化してくれる優秀なAIツールだと思います。

deepwikiの詳細についてはこちら👇

https://note.com/k1mu/n/n1b1a77ea0f1b


## issue選び
プロジェクトの全体像をざっくり把握したところで取り組む issue 探しを始めていきます

OSS活動初心者のために、`good first issue` というタグが用意されており今回はその中から未着手のものを選んでみることにしました。
選んだ issue がこちらです

https://github.com/AntennaPod/AntennaPod/issues/7547

### 内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/619b8de5-25aa-4284-85ca-c6edc5156d46.png)

👆のような、1年のポッドキャスト聴取傾向をまとめてくれる Echo 機能が対象です。

2024年版の AntennaPod Echo で、こんなメッセージが表示されました

> あなたは今年、購読中のポッドキャストのうちX%を聴いています。
> 久しぶりに〇〇（ポッドキャスト番組名）をチェックしてみませんか？

一見ありがたいレコメンドですが、実はこの〇〇というポッドキャスト、2021年を最後に更新されておらず、すでに全話聴き終わっていたものでした。

この表示を見たユーザーは

> もう聴くものがないのに、なぜこの番組を勧めてくるの？
> 非アクティブさを責められている？

と思ってしまったと。

もちろんこれはバグではなく、「過去に好きだった番組をもう一度聴き直すのもアリだよね？」という趣旨なのかもしれません。
でも、せっかくなら

> 今も配信が続いていて、まだ聴いていないエピソードがある番組 をおすすめしてくれたら、もっと嬉しい。

この体験を通じて、ユーザーは

> この番組おすすめアルゴリズム、もう少し工夫できるのでは？

と提案してくれました。

以上が issues の概要です。

## ブランチ準備

まずはブランチを切るところからやってもらいましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/9c4e93b1-e6f2-4b4b-b6e4-a4b7ec6e0264.png)

Cursorくんがブランチを作ってチェックアウトしてくれました。ブランチの命名をよしなに決めてくれるのが地味に便利です。

## 調査 - 実装方針の検討

次に関連ファイルの調査へと進んでいきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/53ecb046-a0c0-4079-83ec-4bc08f5abb02.png)

下記のように対応すべき箇所と次の実装方針を出力してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/498099d8-324c-4605-bb12-d80a46cae949.png)

ここで、AIの提案通りにそのまま実装へ進むこともできますが、AIの出力を十分に理解しないまま進めてしまうと、意図しない方向にミスリードされて遠回りになることがあります。
そのため、僕は必ずAIの調査内容と実装方針がコードベースで正しいかどうかを確認するようにしています。AIの出力を完全に理解できない場合は、不明点を洗い出して切り分け、自分で調べたり、ChatGPTに質問したりして、理解を深めるようにしています。

> なお、本筋から少し外れた内容を確認したい場合には、Cursorでスレッドを切り替えることで、これまでのやりとりの文脈を保ちつつ、スムーズに質問できるので便利です。

調査内容と実装方針を精査し、対応箇所の洗い出しと処理の流れを整理したものが、以下のプロンプトです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/364ab5ba-cb94-4900-a271-e85bb4f45153.png)

このように、能動的かつ具体的なプロンプトを与えた方が、AIからの回答精度が高くなると感じています。

## 実装 - 理想の挙動を伝える
調査と実装方針が定まったので実装に取り掛かっていきます。
> 下記プロンプトは、実装指示 + Debug方法も聞いちゃってますが、本当は分けた方がよかったです...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/efb14c62-c225-495b-a803-6fa91b4b76ae.png)

AIに実装指示を与えるときに意識したこととしては
まず、変更後の状態、すなわち**理想の挙動、理想のロジック**を指示する

> XXXというロジックに改善したい

続いて現状の状態を指示する

> 現状のロジックは以下のようにXXXとなっている
> 該当のコードを抜粋

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/1006916a-99ef-45fa-a883-b9f9d8792e5f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/e99370ab-785a-461c-9551-82c01bcafb33.png)

実装してくれました✨
問題なさそうなので動作確認を行ったところ、バグが見つかりました。
この不具合についても、AIに調査させて原因を特定していきます。

## バグ調査 - デバッグはバイブでOK

思い返すと、バグ解決は本当の意味でバイブコーディングしていたと思います。
流れに身を任せてCursorに言われるがままに原因を調査しました。

> 個人的にはバグ解決は、頭使わずにバイブコーディングしても大きな問題はないのかなと思います。
> あらぬ方向にミスリードされたとしてもなんだかんだ全件デバッグプリントして読み込ませれば大体のバグは解決できるんじゃないかと思ってます。まあ時間はかかりますが。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/05753658-4c8d-4c41-8420-6a56dcd03ee6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/79c85a93-a696-4abc-a6df-4f86ed68059b.png)

回答を得ましたがちょっと的外れな気がして再度イシューを読ませて考え直させています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/c00d796c-c47d-4237-af78-6ed604536aa3.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/61fcfafb-918e-4834-bdc8-c7d3901042a2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/c9fffac0-b610-4f7d-9319-27b4a71ce80b.png)

バグが解消されれば問題ないので、AIの提案に身を任せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/40ad7c43-6b00-4e19-a5f0-e6272d865fc5.png)

動作確認してもバグが解消されていなかったため、バグの内容をそのまま伝えていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/f171f703-ff29-41db-a80a-8a57d56dc545.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/5673f51a-0f0e-442e-a955-d7b900b0f8b9.png)

デバッグログを追加してもらいました。が、Logcatにデバッグログが出力されませんでした。なのでそのまま伝えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/e229a4f0-3a71-42e5-8c44-4688b84e5772.png)

なんか追加してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/8bea02b4-7908-49d4-92d0-3ae5974e20b1.png)

無事、デバッグログが出力されました！ログをそのまま貼り付けて報告します！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/27931184-d546-4524-a102-5295ffb88bc1.png)

ログを読み取って考えられるバグの原因を考えてくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/7280a316-ae23-4787-8e42-338e2ab6e909.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/9c20e9b4-82e3-4a06-b691-a8d388a51b96.png)

全件出力用のデバッグコードを追加する提案に乗ります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/910285b0-921f-4466-ad11-6b9efdff96eb.png)

全件出力デバッグの結果得られたログを貼り付けて考えさせます。

## バグ解消

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/44a476cf-3813-4196-9025-b58865c7d89a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/fb486c35-73d9-4222-99ee-4e9717865a88.png)

なるほど！ここにきてバグの原因が完璧にわかりました！
Feed（つまりポッドキャストの番組）のタイトルとIDは取得できている。しかし、Feedに各エピソードが紐づいていない。そのため、Feedに紐づくエピソードリストを明示的にロードしてあげる必要があるということでした。
原因がわかったところで（Cursorもわかってる）そのまま修正を適用させていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/d94566eb-0bb8-4ff8-ae86-6e7ead40a4a0.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/cd37692c-cd89-4ae1-a973-4e49e761e8a6.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/2697e7f2-f8d1-4346-9aec-66db25b2799e.png)

修正が完了し、動作確認をしたところ問題なくタイトルが表示され、バグが解消されました！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/8bd6974c-d23e-4db6-804f-3a36e4c93564.png)

## お掃除 - デバッグコードの後始末

無事バグを解決できたので、デバッグコードのお掃除をしてもらいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/b254a042-fb0d-4aef-bab9-4888ba40a20a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/c32b9466-7ca7-4c54-ba6c-ffecf9cbf6fe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/4d7563ec-278f-4ddc-8bd3-587293330cbb.png)

## Pull Request に向けた準備

一通り修正が完了したのでプルリクエストに向けて準備をしていきます。
PRにあたって必要なことを聞いてます。リポジトリ固有のルールでテストコードなど書かないといけないのかなと疑問に思ったので、issueのリンクとともにそれをそのまま聞いています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/605020b5-2fe3-4316-93f1-ce8ec982639e.png)

今回は実装内容が、UIの一部ロジックの修正であり、ユニットテストが必要という雰囲気ではありません。レビュアーに指摘された時、対応すればいいと思う、と答えてくれました。特にユニットテストのテストは必要ないみたいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/18b1a00e-d4ad-4536-8c57-123e0160e550.png)

加えてPR本文も考えてくれました。
チェックしてみたところ、今回の実装内容、詳細、動作確認テストについて書かれており、このまま貼り付けられるレベルの文章だと思いました。

> 実際、このPR後レビュアーの方とのやりとりがスムーズに行えたので、過不足なく変更内容を伝えられているのだと思いました

## commit & push - Git操作もAIで

続いて、commitとpushもやってもらいましょう。ステージングには自分で挙げていたので、コミットからお願いしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/eff5d6b1-3895-4987-8db5-143bfd055e74.png)

pushがうまくいかなかったようです。
OSSを自分のリポジトリにForkせず、直接OSSのリポジトリに向けてpushしていたのが原因でした、本来はForkした自分のリポジトリを経由して、OSSのブランチにPRが送信されるようでした。

> 初めてのOSS活動でこの辺のやり方がよくわかっていなかったのですが、AIが丁寧に教えてくれたおかげて詰まることなく対処できました。
> こういう細かいところで詰まって時間が溶けるという出来事が、AIとともに開発することで簡単に回避できるのは大変ありがたいと感じています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/86590486-5f7d-4767-886f-999390c79259.png)

無事、Forkした自分のリポジトリへのpushが完了してPRのボタン（あの緑のボタン）が出てきました👏

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/63f8752d-3c96-4387-8842-9ff79dfd8311.png)

ということで再度、commitとpushもやってもらいます。
> しれっとコミットメッセージもよしなな英語で書いてくれるのがありがたい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/e0739b0d-3660-490e-b794-4f1b59d22102.png)

これでプルリクエストが作成できました⭐️

## 自動テスト実行 - CIを通して最終チェック

あとはチェックリストに従ってテストコード、文法チェックを行っていきます。
テストコードは問題なく通り、リントで引っかかった箇所は改行や空白も修正しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572559/729720b3-88e0-4efc-b6b6-132b40ed0ad0.png)

**全てチェックし終わり、PR完了 !!!**

# まとめ

- 英語でのやりとりやコミュニケーションのノリが分からなくても、AIが補完してくれるため、言語の壁を超えたOSS活動に取り組みやすくなっている
- 調査・設計フェーズでは、AIの出力をうのみにせず、自分で検証・判断する力が求められる
- 実装フェーズでは、AIに「ゴール（理想の状態）」をはっきり提示することが精度の高い出力につながると実感
- バグのトラブルシューティングにおいては、ある程度流れに任せてバイブコーディングしても意外となんとかなると感じた

少し長くなってしまいましたが、この後の「レビュアーとのやりとり」や「修正プロセス」については、後半の記事で紹介します。
AIと協働して作成したコードにレビューを受けることで、**現状のAIではカバーしきれない観点や判断軸**が見えてきて、とても勉強になりました。

---

後半記事です

https://qiita.com/ryotab22/items/8b14323c0f668a8bcd15