SIMPLE

Google技術スタックで爆速化!Jules, Gemini, Firebase App Hostingで実現する未来のNext.js開発

GoogleのAI(Jules, Gemini)とFirebaseを組み合わせ、実装からデプロイまでを自動化する革新的な開発フローを解説。

#Firebase #アプリ開発 #AI

個人開発、楽しいですよね。自分のアイデアが形になっていく感覚は、何物にも代えがたいものです。

しかし、時間は有限です。

「ブログにあの機能を追加したいな…」

「このUI、もっと良くしたいな…」

頭の中にアイデアは次々と浮かぶのに、実装する時間がない。あるいは、単純にコーディングが手間で、つい後回しにしてしまう…。個人開発者なら、誰しもが一度は経験する悩みではないでしょうか。

何を隠そう、私もその一人でした。しかし最近、開発の常識を根底から覆す、新しいワークフローを手に入れました。

その主役は、AIです。

この記事では、AIコーディングエージェント「Jules」に実装を任せ、GoogleのGemini Code Assistantに微修正を手伝ってもらい、GoogleのFirebase App Hostingで全自動デプロイするという、まさにGoogleの技術スタックが可能にした、未来の個人開発の姿をご紹介します。

開発フローの全体像:AIと人間の理想的な分業体制

私が実践している開発フローのコンセプトは、非常にシンプルです。

「AIは凄腕プログラマー、私は敏腕プロジェクトマネージャー」

AIに具体的な実装作業を任せ、人間である私は、仕様を伝え、レビューし、最終的な意思決定を下すことに集中する。この役割分担が、驚くほどの生産性を生み出します。

実際の流れは、以下の通りです。

[1. 指示出し (PM/私)]
.
└──> [2. 実装 (プログラマー/Jules)]
     .
     └──> [3. レビュー (PM/私)]
          .
          └──> [4. 承認 & デプロイ (PM/私)]

このサイクルを回すことで、アイデアが驚くべきスピードでプロダクトに反映されていくのです。

なぜこの開発スタイルは「最高」なのか?3つのメリット

メリット1:圧倒的なスピード感と思考の加速

「こんな機能が欲しい」というアイデアが、数分から数十分で動くコードになります。昨日思いついたブログの新機能が、今日にはもう動いている。このスピード感は、一度体験するとやめられません。アイデアを即座に形にできるため、試行錯誤のサイクルが劇的に速くなり、プロダクトの成長が加速します。

メリット2:面倒な作業からの解放

コンポーネントの雛形作成、API連携の定型コード、テストコードの記述…。開発には、創造的とは言えないけれど必要な作業が数多く存在します。このフローでは、そうした「退屈な作業」をAIに一任できます。人間は「どう作るか」という手段の悩みから解放され、**「何を作るか」「この体験はユーザーにとって本当に良いものか」**といった、より本質的で創造的な部分に思考のリソースを集中させることができます。

メリッ3:「AIに任せきり」ではない安心感

AIは強力ですが、完璧ではありません。だからこそ、人間によるレビューのステップが不可欠です。AIが生成したコードをローカル環境で実際に動かし、自分の目で品質を確かめる。この工程を挟むことで、「AIに丸投げ」する不安を感じることなく、品質をコントロール下に置くことができます。AIの提案をレビューすることは、自分自身の学びや新しい発見にも繋がります。

【具体例で解説】私のAI開発ルーティン

このフローをより具体的にイメージしてもらうために、先日実際に行った機能追加を例にご紹介します。

Step 1: Julesへの「お願い」は具体的に、でも自然に

まず、ブログの各記事ページの下に、前後の記事へ移動できるナビゲーションリンクが欲しいと考えました。そこで、Julesに以下のような指示をGitHubのIssueで出しました。

【実際の指示】

各記事ページの終わりに、前後の記事へのリンクを作成してください。

「←次の記事:(次の記事のタイトル)」と「前の記事:(前の記事のタイトル)→」のイメージです。

ポイントは「こんなイメージ」と、具体的な表示形式を伝えることです。これでJulesが完成形を想像しやすくなります。

Step 2: ローカルでの「お出迎え」と一次レビュー

しばらくすると、Julesがfeatureブランチを作成し、実装完了を知らせてくれます。早速、そのコードをローカルに持ってきて動作確認します。

Bash

git fetch origin
git checkout <Julesが作ったブランチ名>
npm run dev

ブラウザで確認すると、驚きました。指示通り、前後の記事へのリンクが完璧に実装されているのです。機能的には100点満点。この間、私が書いたコードは一行もありません。

Step 2.5: AIとAIで連携?仕上げはGoogleのGeminiと

機能は完璧。ただ、実際に表示された画面を見て、私はこう思いました。

「矢印の『←』『→』よりも、『<<』『>>』の方がデザイン的に好みだな…」

これは、最初に指示しなかった私の感性の問題です。でも、大丈夫。こんな時こそ、コーディングアシスタントの出番です。

VS Codeを開き、GoogleのGemini Code Assistantを起動。チャットでこうお願いしました。

「このリンクの矢印を<<>>に変更して」

すると、Geminiはすぐにコードを修正してくれました。まるでSF映画のワンシーンです。Julesが作った土台に、Geminiの助けを借りて自分のこだわりを反映させる。このAI同士の連携プレーが、非常にスムーズで快適でした。

この修正を、自分の手でブランチにコミットします。

Bash

git add .
git commit -m "refactor: change link arrow style"

Step 3: 承認、そして全自動デプロイへ

微修正したコードで再度動作確認し、すべてがOKであることを確認。これで安心してmainブランチにマージできます。

Bash

git checkout main
git merge <Julesが作ったブランチ名>

そして、仕上げは魔法の呪文を唱えるだけです。

Bash

git push origin main

私のブログはFirebase App Hosting上で動いているため、このmainブランチへのプッシュをトリガーに、Googleのインフラが自動でビルドとデプロイを開始してくれます。firebase deployのようなコマンドを打つ必要さえありません。GitHubにプッシュすれば、数分後には本番環境に反映されているのです。

このフローをうまく回すための「小さなコツ」

  • 指示は具体的に、タスクは小さく。

    一度に壮大な夢を語るのではなく、「まずこの記事一覧コンポーネントを作って」のように、AIが消化しやすい単位でお願いするのが成功の秘訣です。

  • AIのコードを鵜呑みにしない。

    AIは優秀なアシスタントですが、最終的な品質責任は自分にあります。必ずレビューし、テストする姿勢が重要です。

  • 時には手直しも楽しむ。

    完璧なコードが出てくるとは限りません。ローカルで微修正することも厭わず、AIとの共同作業を楽しみましょう。

まとめ:Google技術スタックがもたらす、最高の開発体験

振り返ってみましょう。

  1. 実装: コーディングエージェント「Jules」が担当。
  2. 微修正: Googleの「Gemini Code Assistant」がサポート。
  3. 本番反映: Googleの「Firebase App Hosting」が全自動で実行。

アイデアの指示出しから、AIによる実装、AIの補助による手直し、そして全自動の本番デプロイまで、すべてのプロセスが驚くほどスムーズな一本の線で繋がりました。

私がやったことは、「何をしたいか」を伝え、AIが生み出したものを「レビュー」し、最後に「承認」することだけ。退屈な定型作業から解放され、開発者はより創造的で楽しい「考える」部分に集中できます。

これぞまさに、Googleの技術スタックがもたらす開発体験の未来です。AIは開発者の仕事を奪うのではなく、最高の「相棒」として、私たちの可能性を大きく広げてくれる存在だと確信しています。

この感動的な体験を、ぜひ皆さんも試してみてください。

りょう

いろいろなことを考えるエンジニア

<< 次の記事
予定をコロコロ変えてしまう私が気づいた、“柔軟すぎる人”の落とし穴
前の記事 >>
ぜんぶGoogleじゃん!FirebaseとGeminiでペアプロしたら、まさかの"すれ違い漫才"が始まった話