Google AntigravityでAIに任せてWebアプリを作る — AI主導開発

はじめに

Google が公開した AI ネイティブ IDE Google Antigravity を使って、
今回は AI にほぼ任せて Web アプリを作ってみることにしました。

本記事では、

• 仕様は最小限だけ伝える
• 実装方法や構成は指定しない
• まずは AI の判断に任せる

という方針で、実際に手を動かします。

完成度の高いアプリを作ることよりも、

• どれくらい少ない指示で形になるのか
• AI はどこまで考えて実装するのか
• 人はどこで介入すべきか

といった AI 主導開発の感触を確かめるのが目的です。

今回作るもの

今回は、ビンゴの数字抽選だけを行う Web アプリを作成します。

市販のビンゴカードを使う前提のため、

• ビンゴカードの生成
• ビンゴ判定ロジック

といった処理は行いません。

アプリの役割はあくまで
「次に引く数字を、重複なく表示すること」 に限定します。

想定する機能

今回のアプリでは、次の機能を持たせます。

• 1〜75 の数字をランダムに抽選
• 同じ数字は二度と出ない
• 抽選された数字を大きく表示
• 抽選済みの数字を一覧で確認できる
• すべて引き終わったら終了状態になる
• リセットして最初からやり直せる

仕様はこの程度にとどめ、
実装方法・UI・構成は Antigravity の AI に任せます。

今回の方針

本記事では、次の点を意識して進めます。

• 技術スタックを指定しない
• フレームワークを縛らない
• 見た目の要件も細かく決めない
• まずは AI の提案をそのまま受け取る

「どう作るか」を人が決めすぎないことで、
AI がどこまで考えて実装するのかを観察します。

Antigravity への最初の指示

Webブラウザで動くビンゴの数字抽選アプリを作りたい。

市販のビンゴカードを使う前提なので、
カード生成やビンゴ判定は不要。

1〜75 の数字をランダムに、重複なしで1つずつ抽選したい。

UIや実装方法、ディレクトリ構成は任せたい。

指定したのは「何を作りたいか」だけで、

• 使用言語
• フレームワーク
• ファイル構成
• UI の見た目

といった点は一切決めていません。

実装の判断はすべて AI に任せる、という前提で進めます。

AI が生成した初期実装

ここからは、Antigravity がどのような流れで
初期実装を組み立てていったのかを、順を追って見ていきます。

プロジェクトを作成する

まずは Antigravity 上で、新しいプロジェクトを作成します。

この時点では、
プロジェクトフォルダが作られただけで、中身はまだ何もありません。

最初の指示を出す

次に、Antigravity に最初の指示を投げます。

実装方法や構成については触れず、「何を作りたいか」だけを伝えています。

Implementation Plan が提示される

指示を受け取ると、Antigravity はすぐに Implementation Plan を提示してきました。

この Implementation Plan には、例えば次のような内容が含まれています。

• 作るアプリの目的
• ディレクトリ構成案
• 各ファイルの役割
• 実装の進め方

Implementation Plan に従って作成を指示する

内容を確認したうえで、
Implementation Plan に従って実装を進めるよう指示します。

さきほどの Implementation Plan に沿って、プロジェクトを実装してください。
次のファイルを作成し、内容をすべて出力してください。

- index.html
- css/style.css
- js/bingo.js
- js/app.js

条件：
- 依存ライブラリなし（Vanilla HTML/CSS/JS）
- 1〜75を重複なしで抽選
- DRAW/RESETボタン
- 現在の数字を大きく表示
- 1〜75の履歴グリッド（出た数字はハイライト）
- 75回引いたらDRAWを無効化し、「終了」表示
- RESETで初期化

まずは「確実に動く」ことを優先し、アニメーションは簡易で構いません。

実際に作成された構成

実装が完了すると、
プロジェクト内には以下のような構成が作成されていました。

• HTML / CSS / JavaScript の Vanilla 構成
• 抽選ロジックをまとめたファイル
• UI 操作用のスクリプト
• スタイル定義用の CSS

実装後に表示される walkthrough

実装が完了すると、Antigravity は
walkthrough（確認用の手順） を表示してきました。

ここでは、

• どのファイルが作成されたか
• どのように動作確認すればよいか

といった内容が簡単にまとめられています。

「AI 自身が用意したセルフレビュー結果」 のようなもので、
人が逐一説明しなくても、
次に何をすればよいかが分かるようになっていました。

実際に HTML を表示してみる

生成されたファイルをそのままブラウザで開くと、
ビンゴの数字抽選アプリが表示されました。

この時点では、

• 表示される
• 操作できる
• 想定した最低限の仕様は満たしている

という状態になっており、
「一通り動く初期実装が自動で用意された」 ことが確認できます。

初期実装を見て気づいた改善点

AI が生成した初期実装は、そのままでも十分に動作し、
今回想定していた仕様も満たしていました。

一方で、コードを一通り読んでみると、
人の目線で見ると気になる点もいくつか見えてきます。

初期実装を見て気づいた改善点は、主に次の 3 点です。

• rolling 演出中に表示される数字の扱い
• UI とロジックの責務分離
• アニメーション時間を表す定数の扱い

rolling 演出中に表示される数字について

初期実装では、数字を抽選する際の rolling 演出中に
1〜75 の乱数をそのまま表示していました。

最終的に確定する数字は重複しないため、
仕様上は問題ありませんが、

• すでに抽選済みの数字が表示される
• 体験として少し違和感がある

という点が気になりました。
そこで AI に対して、

• 抽選ロジック自体は変更しない
• 表示される数字だけを改善する

という意図を伝え、
rolling 中は「未抽選の数字のみ」を表示するよう修正を依頼しました。

UI とロジックの責務分離について

改善指示を出す際に、もうひとつ意識したのが
UI 側がロジックの内部状態を直接参照しないことです。

最初の修正案では、

• UI 側からロジック内部の配列を直接参照する

という状態でした。
そこで、

• ロジック側に参照用のメソッドを用意する
• 配列はコピーを返す

とし、UI はそのインタフェースだけを見る構成にしました。

アニメーション時間を表す定数の扱い（今回は未対応）

この部分も修正自体は可能ですが、今回の記事では対応見送っています。

まとめ

今回は Google Antigravity を使い、
AI にほぼ任せる形でビンゴの数字抽選アプリを作成しました。

最小限の指示でも、

• Implementation Plan を提示し
• それに沿って実装を進め
• 実装後の walkthrough まで確認できる

という一連の流れがあり、
開発の進行自体を AI がリードする構成になっていることが確認できました。

一方で、初期実装をそのまま使うのではなく、

• 気になる点を見つけ
• 直す／直さないを判断し
• 意図だけを伝えて修正させる

といった部分は、人が担う役割です。

「AI に任せる」と「人がレビューする」の境界を考えるうえで、
ちょうどよい題材でした。