注意: 本記事はAIエージェント（Antigravity）によって執筆を補助・生成されたものです。
はじめに
最近、CursorやGitHub Copilotなど、AIを活用した開発ツールが話題を集めています。今回は「AIコーディングエージェントとペアプログラミングをしたら、現代のフロントエンド開発はどこまで楽になるのか？」を検証すべく、実際にWebアプリをゼロから作ってみました。
題材として作成したのは「Growth Zoom」という、React Three Fiberを利用したInfinite Zoom（無限ズーム）動画生成アプリです。
もともと私は、毎年子どもの誕生日に「前年の写真を持たせた写真」を撮影し、1枚で全ての成長過程が見られる作品を作りたいと考えていました。しかし実際に作ってみると、過去の写真がすぐに小さくなってしまい、よく見えなくなってしまうという問題に直面しました。そこで「プログラムの力で画像を無限にズームし続ければ、過去の成長記録もすべて同時に楽しめるのではないか？」と思い立ち、このアプリの開発に至りました。
完成したアプリでは、成長記録の写真が次々と吸い込まれていくような不思議なズーム動画を生成し、MP4形式で書き出すことができます。
- デモサイト: http://www.totetero.com/ai_zoom/
- GitHubリポジトリ: https://github.com/totetero/ai_zoom
本記事では、ただの「アプリの作り方」にとどまらず、開発を通して得られた**「AIを使った新しい開発体験」**に焦点を当ててご紹介します。
AI主導の開発体験：要件定義から実装まで
今回の開発において、人間（私）の役割はコードを書くことではなく、「プロンプト（指示）」を出し、AIが書いたコードを「レビュー」することに完全にシフトしました。
プロンプトから始まったスムーズな初期実装
開発のスタートは、Antigravity（AIエージェント）に作りたいアプリのイメージを伝え、要件定義と設計を丸投げすることから始まりました。実際に私が入力した最初のプロンプトは以下の通りです。
imgには誕生日毎に撮影した娘の写真が複数あり、それぞれ前の年の写真を額縁に入れて持たせています。生まれた時の写真から始まり、画面が縮小や回転をすることで次の年の写真に切り替わる演出を楽しめるtypescriptを使ったwebアプリの要件定義書と設計図を作成してください
このプロンプトによって出力された要件定義とアーキテクチャ設計をベースに、AIエージェントへ実装の指示を続けていきました。すると、驚くほどスムーズにコード生成が進み、開発の初期段階であっという間にアプリのベースが完成してしまいました。最初の一歩（設計）をしっかりAIと固めることで、その後の実装が信じられないほど高速になることを実感しました。
ニッチな技術要素もスムーズに実装
今回採用した React Three Fiber（Three.jsのReactラッパー）や、MediaRecorder API を使ったブラウザ上でのMP4動画書き出し機能などは、少しニッチで細かいAPIの仕様確認が必要な技術です。
しかし、AIエージェントに「Three.jsでカメラを操作して画像を無限ズームさせて」「WebMではなくMP4で動画を出力できるようにして」と指示するだけで、適切なライブラリの選定から実装までをスムーズに行ってくれました。
テストコード作成も丸投げ
品質担保のためにVitestを導入しましたが、テストコードの作成やメンテナンスもAIにお任せです。「この機能のテストを追加して」と言うだけで、コンポーネントの挙動からエッジケースの検証まで網羅したテストファイルを自動生成してくれます。
開発ワークフローの自動化
単なる「コード生成」にとどまらないのが、自律型AIエージェントの面白いところです。
今回の開発では、コード生成だけでなく、カスタムワークフローを用いたGit操作の自動化も試してみました。
開発を進める中で、AIに以下のような独自の「ワークフロー」を読み込ませました。
- 変更の確認: ステージングされたファイルを確認する
-
ブランチ作成:
mainブランチから新しい作業用ブランチを切る - コミット: 変更内容を解析し、適切な日本語のコミットメッセージを自動生成してコミット
- PR作成: GitHub上にPull Requestを作成し、タイトルと本文を自動生成
- セルフレビュー: 作成したPRの差分をAI自身が読み込み、改善点やコメントをGitHubに投稿する
これらを一つのコマンド（例：/quick_fix）で一気通貫で実行できるようにしました。
開発者は「これコミットしといて」と一言指示するだけ。数分後には、GitHub上に美しいコミット履歴と丁寧な解説付きのPRが出来上がり、さらにはAIによるコードレビューのコメントまで付いている状態になります。
トラブルシューティングもAIにお任せ
開発中にはいくつかの壁にぶつかりましたが、トラブルシューティングもAIが強力にサポートしてくれました。
複雑なバグの特定
「ブラウザのウィンドウをリサイズすると、Three.jsのキャンバスが真っ暗になる」という特有のバグが発生しました。人間が調べると行列計算やリサイズイベントのハンドリングなど原因特定に時間がかかりますが、AIは「リサイズ時のゼロ除算や行列の同期ズレ」とすぐに原因を特定し、即座に修正コードを提案してくれました。
インフラ・環境構築のサポート
アプリケーションのコードだけでなく、周辺環境のエラーも解決してくれます。
- GitHub Actionsのデプロイが落ちた際のエラーログ解析と復旧
- Vite環境下で
.viteなどのキャッシュディレクトリがGitに含まれないようにするための適切な.gitignoreの設定
これらも「エラーが出たから直して」と指示するだけで完了します。
AIペアプログラミングを通して感じたコツと今後の課題
AIエージェントとの開発を成功させるためには、いくつか人間側の工夫も必要だと感じました。
-
プロンプトのコツ
「どう実装するか」ではなく「何を達成したいか（What）」と「なぜそれが必要か（Why）」を明確に伝えると、AIはより適切なアーキテクチャを選んでくれます。 -
人間によるルールの設定（ガードレール）
AIが暴走して不要なファイルを消したりしないよう、「勝手にgit addしない」「実装時は必ずテストを書く」といったユーザー定義のグローバルルールを事前に設定しておくことが非常に重要です。
おまけ：この記事自体もAIと一緒に執筆しました
実は、今あなたが読んでいるこの記事自体も、AIエージェントに手伝ってもらいながら作成しました。記事執筆にあたって、私が最初にAIに投げたプロンプトは以下の通りです。
このプロジェクトの作成過程をqiitaに投稿したい。qiitaというディレクトリを作成し、そこに投稿用のマークダウン形式を作成する方法で記事の作成を進めたい。
コードの開発だけでなく、その後のドキュメント作成や知見のアウトプットまで一貫してAIエージェントと協力できるのも、これからの開発スタイルの大きな魅力だと感じています。
おわりに
AIエージェントを活用することで、開発のボトルネックが「コーディング（タイピング）」から「アイデア出し」や「意思決定」へと完全にシフトしたのを感じました。
「ちょっとした修正をして、ブランチを切って、コミットメッセージを考えて、PRを作って…」という開発の"面倒な部分"をすべてAIが巻き取ってくれる体験は、一度味わうともう元の開発スタイルには戻れません。
皆さんもぜひ、AIエージェントを活用した新しい開発スタイルを体験してみてはいかがでしょうか。
