Geminiから始まった小さなAI開発【Codex / Zencoder / Devin / CodeRabbit 使用感まとめ】

## はじめに

最近触っていたいくつかのAIエージェント（Codex / Zencoder / Devin / CodeRabbit）を、小さなプロジェクトの中で軽く使い分けてみた記録です。

対象は、HTML＋JavaScriptの2ファイルだけで動くミニアプリ。  
アプリ自体は簡単なものですが、その分ツールごとの「ちょっとした違い」が見えてきた気がします。

## 使用したAIエージェント一覧

| ツール名     | 主な役割           | 補足                                   |
|--------------|--------------------|----------------------------------------|
| Gemini       | 初期生成           | Gemini Canvasで作成。APIキーは自動付与 |
| Zencoder     | 初期修正           | GitHub Pages対応などの調整を担当       |
| Codex        | コード改善         | ChatGPT Plus内のファイルタブから利用   |
| CodeRabbit   | レビュー支援       | GitHub PRに自動でレビューコメント     |

## Codexの使用感

https://openai.com/index/introducing-codex/
- ChatGPT Plusのファイルタブ内に登場
- UIはDevinやJulesに近く、チャットで自然にタスクを依頼できる
- PRは専用のUIで安定して作成できるのが好印象

他のエージェント（JulesやFine.devなど）では、GitHubリモートへの `push` に失敗することが多かったのですが、CodexはPR作成専用のボタンを別で用意していて、スムーズに作成できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559587/f9082bd9-ecac-47a4-a794-67f9cc2ebd7c.png)

PRは自分のアカウント名義で作成されるため、CodeRabbitで指摘をもらったあとにCodexへフィードバックを渡す必要がありますが、CodeRabbit側で「エージェントに渡す用の文」を自動で生成してくれるので、そこまで手間ではありません。

## Devinとの比較

- Devinは自分名義ではなく、AI自身のアカウント名義でPRを作成
- GitHub上のレビューコメントにも自動で反応してくれる
- フィードバックのループが完全にAI主導で回るのが強み

ただし、Devinは設計からレビュー対応まで全部を巻き取る前提の作りなので、  
今回のような軽量な修正には少しオーバースペックにも感じました。

## Zencoderの印象

https://zencoder.ai/

- コンテキスト保持が比較的しっかりしていて、Roo Codeに近い感触
- 小さなタスクを安心して任せられる安定感あり
- Gemini Canvasで作られたアプリのGitHub Pages対応修正を依頼しました

Gemini Canvasでは、APIキーが裏で自動付与されているため、  
1ファイル完結で動くアプリが簡単に作れます。  
ただし、そのコードをGitHub Pagesに貼り付けても動かず、  
Zencoderにお願いして、明示的にAPIキーを扱えるよう調整してもらいました。

## ⚠ Gemini APIキーとセキュリティ上の注意点

Gemini APIの公式ドキュメントでは、あくまでAPIキーをテストする目的で、クエリパラメータにAPIキーを含めてアクセスする例が紹介されていますが、実装する場合にはAPIキーの取り扱いに注意が必要だと注記されていて、実装時には[Google GenAI SDKを使用するように記載](https://ai.google.dev/gemini-api/docs/quickstart?hl=ja&_gl=1*1qkuw1j*_up*MQ..*_ga*MTM2NzY2Njg3My4xNzQ5MDE5ODU2*_ga_P1DBVKWT6V*czE3NDkwMTk4NTUkbzEkZzAkdDE3NDkwMTk4NTUkajYwJGwwJGgxMTEzMzIwMTY5#install-gemini-library)されています。しかし、Geminiで生成されたコードはAPIキーをクエリパラメータに含める形で書かれていて、このまま公開するのは危険だと思いました。

```js
// Geminiが実際に生成したコード
const apiKey = ""; // Gemini APIキー (Canvas環境では自動的に提供される想定)
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
```
この方法には以下のようなリスクがあります：

- URLにキーが含まれるため、リファラやアクセスログに残る可能性
- GitHub Pagesのような静的ホスティング環境ではキーが丸見え
- 結果として、APIキーの漏洩・不正利用につながる危険性

Gemini Canvasのように、キーを裏側で付与してくれる仕組みはとても便利でしたが、  
自分でホスティングする場合にはAPIキーの扱いに注意が必要だと改めて感じました。

## CodeRabbitの便利さ

https://www.coderabbit.ai/

- GitHub PRに自動でレビューコメントを投稿
- Codexのような「人間名義のPR」に対しても、AIエージェントに渡す用のフィードバック文を自動生成してくれる

CodexとCodeRabbitを組み合わせることで、  
「コード修正 → PR作成 → レビュー → 再修正」の流れをスムーズに回せたのは大きな収穫でした。

## 試してみたまとめ

| シーン               | 向いていたツール         |
|----------------------|--------------------------|
| 最初のコード生成       | Gemini                   |
| 簡単な修正・適用       | Zencoder                 |
| PRを安定して出したい   | Codex                    |
| レビュー・コメント支援 | CodeRabbit               |
| PR起点の自動開発       | Devin（やや重めだけど強力） |

## おわりに

今回は小さなアプリを使って、複数のAIエージェントを軽く試してみました。  
ツールによってできること・得意なことが違っていて、「どのタイミングで誰にお願いするか」を考えるのが意外と楽しかったです。

Codexの登場でChatGPT Plusユーザーの選択肢が増えたこと、そしてGemini Canvasのような手軽な開発環境の便利さと落とし穴——ちょっとした検証のつもりでしたが、学びが多い時間になりました。

成果物はしばらく以下で見られるようにしておきます。

https://kaisumi.github.io/

https://github.com/kaisumi/kaisumi.github.io