3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【2025年最新】Google AI Studioで始める「バイブコーディング」

Last updated at Posted at 2025-12-14

2025年後半、ソフトウェア開発の世界にとんでもない変化がやってきました。
それが「バイブコーディング」です。

バイブコーディングとは、エディタの中でAIと対話しながらコードを書き進めていく新しい開発スタイルのこと。まるで隣に優秀な相棒がいるようにリアルタイムで相談・修正ができ、作業の流れが驚くほどスムーズになります。

バイブコーディングとは

従来の開発状況下では「要件を考える→コードを書く→動かす→直す」といった工程を行き来しながら作業していましたが、バイブコーディングではAIが常にそばにいて、思いついた瞬間に相談し、そのままコード化し、改善まで進められます。

これにより、仕様検討から実装、レビュー、リファクタリングまでの“流れが途切れない”開発が可能になり、スピードは格段に向上します。また、若手エンジニアは安心して試せるし、経験者は高度な設計に集中できるため、チーム全体の生産性と創造性が高まります。

バイブコーディングは、まさに開発のあり方を劇的に変えるゲームチェンジャーなのです。

どんな事ができるのか知りたい、そんな開発環境を試してみたいと思う人もいるでしょう。そんなバイブコーディングを最も強力かつ無料で体験できる環境を提供しているのがGoogle AI Studioです。

1. 手軽に始められるGoogle AI Studio


※サンプルもあるので、動かしてみると面白いです。

これまでGoogle AI Studioといえば、Gemini APIのプロンプトをテストするための実験場という認識でした。しかし、実装された「Build」モードにより、その役割は一変しました。

Buildモードの裏側で、ユーザーからの自然言語による指示を「家計簿アプリを作って」と受け取った瞬間、バックエンド(Gemini 3 Proなどの最新モデル)で、以下の処理が並行して走ります。

  • 意図解析と要件定義:
    自然言語から必要なコンポーネントとロジックを抽出。
  • マルチファイル生成:
    単一スクリプトではなく、ReactやAngularベースの複数ファイル構造を生成。スタイリングにはTailwind CSSなどが自動適用されます。
  • AI機能の自動実装 (geminiService.ts):
    生成されるコードには、Gemini APIを呼び出すためのインターフェース(geminiService.ts)が自動で含まれます。つまり、「画像認識」や「要約」といったAI機能を最初から備えたアプリが爆誕するのです。
  • サンドボックス実行:
    コンパイル不要で、ブラウザ右側のプレビュー画面で即座に動作します。

競合するツールのCursorやLovableと比較しても、Googleの開発環境とGeminiモデルが直結している点、Google AI Studioは頭一つ抜けています。

2. 実践:バイブコーディングで作る「自分専用ツール (Me-Tools)」

「バイブコーディング」の本質は、一発で完璧なコードを書くことではありません。

反復的改善(Iterative Refinement)」にあります。プレビューを見ながら「ボタンをもっと青くして」「データをCSVで吐き出せるようにして」と指示を重ねることで、Geminiの長いコンテキストウィンドウ(100万〜200万トークン)が過去の文脈を理解し、コード全体にパッチを当て続けます。

なお、AI Studioが英語サイトになっているため、開発したアプリも英語で生成されてしまいます。英語でアプリが生成されても、あとから「日本語に修正」と伝えれば修正可能なので慌てずに対応していきましょう。

1. 宇宙人講師による英単語帳

プロンプト
宇宙人講師による英単語帳指示:
「苦手な単語リストを読み込んで4択クイズを出して。解説は宇宙人のような口調でユーモアたっぷりに。」

gemini.tsを経由して、解説文をリアルタイムで生成。市販アプリでは不可能な「ペルソナを持った学習体験」が実現します。
image.png

2. 領収書爆速処理OCR

プロンプト
領収書爆速処理OCR指示:
「アップロードした領収書画像から日付・金額・適用を読み取って表にして。CSVダウンロードもつけて。」

Geminiの強力なマルチモーダル機能を利用。非定型の書類でも柔軟に構造化データ(JSON)へ変換し、フロントエンドでレンダリングします。
image.png

3. 執筆支援エディタ

プロンプト
執筆支援エディタ指示:
「入力テキストをPREP法に再構成し、親しみやすいトーンに書き換えるエディタを作って。」

構造化プロンプト(Structured Prompts)を活用し、Few-shot(入力と出力の例)を与えることで、特定の文体やフォーマットへの変換精度を固定化できます。
image.png

実際に作成してみましたが、待ち時間は1~2分ぐらいでできています。また完成までのやり取りは1~2回で、ほぼ自分が想定した通りの動きをするアプリが完成しました。

3. 「無料」の境界線とデプロイの罠

Google AI Studioは、Googleアカウントさえあれば無料で利用できて、しかもGemini 2.5 Flashなどの軽量モデルから、高性能なGemini 3 Proまでアクセス可能です。

しかし、エンジニアとして押さえておくべき「仕様」と「トレードオフ」があるので、利用時は注意が必要です。

⚠️1 データプライバシーのトレードオフ

無料枠(Free Tier)で入力したプロンプト、アップロード画像、生成コードは、Googleのモデル再学習に使用される可能性があります。

OK: 個人の学習用、公開情報の処理、趣味のツール

NG: 企業の機密データ、個人情報(PII)、未公開の著作物

⚠️2 Cloud Runデプロイと「課金アカウント」の壁

作成したアプリをスマホで使いたい場合、「Deploy to Cloud Run」ボタン一つで公開できます。
しかし、ここに罠が隠れています。

プレビュー画面 (AI Studio内):
クレジットカード登録不要。完全無料。

デプロイ (Cloud Run): 無料枠はあるが、GCPプロジェクトへのクレジットカード(請求先アカウント)紐付けが必須。「クレジットカードを登録したくない」「誤請求が怖い」という学生や個人開発者にとって、これは大きな心理的障壁となります。

  • ここに気をつけて利用してください。どうしてもデプロイして利用したい場合は、課金するか別の方法を試すしかありません。

まとめ:プログラミングの終焉ではなく、創造の民主化

Google AI Studioにおけるバイブコーディングは、プログラミングの専門知識がない人でも、自身のニーズと完全に合致したツールを作れる時代を到来させました。

私たちエンジニアにとっても脅威ではなく、面倒な構築をAIに任せ、より本質的な「どのような課題を解決するか(Vibe)」の設計に注力できる強力な武器です。

まずはGoogle AI Studioを開き、日本語で「こんなツールが欲しい」と話しかけてみてください。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?