非エンジニアでもAIプログラミングで爆速開発！Google AntigravityでWebアプリを作る全工程

本ブログはアフィリエイト広告を利用しています

WEB / アプリ
WEB / アプリ
googleGoogle Antigravityバイブコーディング
この記事は約9分で読めます。

とっちゃん@nyanco! です。

「こんなアプリがあったらいいな」をAIの力で自分ですぐに形にする時代が来ています！

今回は、時間管理アプリ「TimeLog」の実開発を例に、Google AI Studio でプロトタイプを作り、Google Antigravity (グーグル・アンチグラビティ) でブラッシュアップし、Firebase で世界に公開するまでの全フローを解説します。

肉玉にゃんこ

非エンジニアでも、このフローをなぞればあなただけのアプリが作れますにゃ〜！

スポンサーリンク

1. Google AI Studio でプロトタイプを作成

まずは「動くもの」を爆速で作ります。Google AI StudioのBuild 機能を使えば、言葉で伝えるだけでアプリのたたき台が手に入ります。

手順

  1. Google AI Studio にアクセス: https://aistudio.google.com/
  2. Build with Gemini: プロンプトエリアに作りたいアプリの仕様を入力します。

プロンプト例：

「シンプルな時間計測アプリを作って。機能はスタート、ストップ、リセット、作業内容のメモ入力。履歴をローカルストレージに保存したい。デザインはモダンで清潔感のある感じで。」

  1. プレビューと調整: 生成されたコードをプレビューし、チャットで微調整します。「ダークモードを追加して」「履歴をCSVでダウンロードさせて」など。
  2. コードのエクスポート: 納得いくものができたら、プロジェクト一式をダウンロードします（StackBlitz等を経由する場合も、最終的にはローカルに落とします）。
肉玉にゃんこ

サクッと個人用で使うのであればここで完了！もアリですにゃ〜

2. Antigravity (ローカルWebエディタ) で開発環境を構築

ダウンロードしたコードを、より堅牢で開発しやすい環境に移します。ここで本記事のメインとなるAIエディタ「Google Antigravity」を使用します。

セットアップ

  1. プロジェクトフォルダの配置: ダウンロードしたファイルを任意のフォルダに解凍。
  2. 依存関係のインストール:
npm install
  1. ローカルサーバー起動:
npm run dev

ブラウザで http://localhost:5173 (または3000) を開き、アプリが動くことを確認します。

npmとは？
npmは、世界中の開発者が作った便利なプログラム（部品）を自由にダウンロードして使えるいわば「プロ向けの巨大なホームセンター」です。

localhostとは？
・localhost： 例えるならネットには繋がない「自分のパソコン専用」の作業部屋のこと。
・ポート番号： 部屋にある「ドアの番号」。3000番や5173番など、ツールごとにドアが決まっている。
・番号の調べ方： プログラムを動かした黒い画面（ターミナル）に必ず http://localhost:○○○ と答えが書いてある。

3. GitHub 連携とセキュリティ対策 (.env)

GitとGitHubでソースコードを管理しつつ、APIキーなどの秘密情報を守るための設定を行います。

Git（ギット）とは？
・役割： 自分のパソコン内で「いつ、誰が、どこを変えたか」を記録する履歴管理ツール。
・メリット： ミスしても過去の状態にすぐ戻せ、複数の機能を同時に開発してもコードが混ざらない。
・GitHubとの違い： Gitは「手元の記録帳」、GitHubは「その記録帳をネットで共有する棚」という関係。
・Antigravityに内蔵：AntigravityにGit機能が内蔵されてるので特に意識しなくてOK

GitHub（ギットハブ）とは？
・役割： プログラムの「バックアップ」と「変更履歴」をネット上に保存できる場所。
・メリット： 「昨日の状態に戻したい！」がいつでも可能で、世界中の人とコードを共有できる。
・例え： ゲームの「セーブポイント」をネット上に作って（＝コミット）、仲間と共有しているようなもの。
※コミット時、どういった変更内容かをコメントで入力する必要があるが、Antigravityはそのコメントも考えてコマンドを出してくれるので便利♪

APIキーとは？
特定のWebサービスを利用するための「専用の合鍵（パスワード）」です。本記事ではGoogle AI StudioのAPIキーとなり、Gemini（AI）の知能を自分のアプリに組み込むための「認証バッジ」となります。GitHubなどで公開してしまうと他人に勝手に使われ、利用制限（クォータ）を使い果たされたり、有料枠のAPIキーだととんでもない支払いの請求がくるリスクがあります。無料枠APIキーでも、悪意を持ってスパム的な使われ方をすると最悪、APIキーの持ち主である自分のGoogleアカウントが凍結させられるリスクも！

Git の初期化

git init
git add .
git commit -m "Initial commit"
肉玉にゃんこ

commit -m “xxx”のxxxが今回の変更箇所メモとなりますにゃ〜

gitを初期化（git init）するとは？
そのフォルダを「タイムマシン（履歴管理）が使える特別なフォルダ」に変えること

環境変数の設定 (.env)

Google AI Studio の API キーなどをコードに直接書くのは危険です（例え無料枠であっても！）。

この辺もAntiGravityにお願いしたらコードの中身を調べて以下の作業を自動でしてくれ、ユーザーがやるべきことを教えてくれます。

.env ファイルを使って管理します。

  • ルートディレクトリに .env (または .env.local) を作成。
  • .gitignore に .env や .DS_Store など、共有すべきでないファイルを追加して除外設定。

.gitignore（ギット・イグノア）とは？
Gitに対して「このファイルは記録しなくていいよ」と指示するメモ。パスワードが書かれた秘密のメモや、容量が大きすぎる不要なファイルを、間違えてネット上に公開しないようガードする役割を持っています。

環境変数とは？
プログラムに直接書かずに、PCやサーバー側に設定しておく「設定値」や「秘密のメモ」のこと。今回でいうと、APIキーなどの「隠したい情報」や、開発用・本番用で「切り替えたい設定」をコードの外に切り離して安全に管理する仕組みとなります。

4. Firebase プロジェクトの作成と連携 (Auth & Firestore)

アプリをクラウドに接続し、ログイン機能とデータ保存機能を持たせます。

Firebase（ファイアベース）とは？
Googleが提供する「Webアプリの裏側をまるごと引き受けてくれる超便利なサービスセット」です。個人利用なら無料アカウントでも十分使えます。

Firebase コンソールでの作業

  1. Firebase Console で新規プロジェクトを作成（例: timelog-app）。
  2. Authentication (認証):
  • 「始める」→「Google」を有効化。
  1. Firestore Database (データベース):
  • 「データベースの作成」→ リージョン選択（日本なら asia-northeast1）。
  • セキュリティルール: 最初はテストモードでも良いですが、本番用に「ログインユーザーのみ読み書き可能」に設定推奨。
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

ローカルでの連携設定

  1. Firebase SDK のインストール:
npm install firebase
  1. 初期化コードの作成: src/services/firebase.ts などを作り、コンソールから取得した設定値（Config）を貼り付けます。この際、APIキーは import.meta.env.VITE_API_KEY のように環境変数から読み込むように記述します。

Firebase SDKとは？
自分のアプリとFirebaseの機能を「つなぐための専用ツールセット（道具箱）」。これをアプリに組み込むだけで、複雑な通信コードを書かずに「ログイン」や「データの保存」などの機能を、まるで魔法のように簡単に呼び出せるようになります。

5. アプリのブラッシュアップとデバッグ (Antigravity の活用)

ここからが AI アシスタントの真骨頂です。機能追加やバグ修正を対話形式で進めます。

実際にやったこと例：

  • 「アラーム機能を追加して。時間になったら音を鳴らしたい」
  • 「アラーム音を可愛い猫の声に変えて」
  • 「アラームを止めるボタンが効かないから直して」
  • 「設定をトグルスイッチ一つで完結させたい」などなど

Antigravity はファイルの編集からコマンド実行、ブラウザでの動作テストまで自律的に行ってくれるので、開発者は「監督」として指示を出すだけで高度な修正が可能です。

6. デプロイ (Firebase Hosting)

完成したアプリを世界中に公開（デプロイ）します。

デプロイ（Deploy）とは？
自分のPCで作ったプログラムをサーバーにアップロードし、「世界中の人がブラウザから見られる状態にする」最終作業のこと。

手順

1. Firebase Tools のインストール:

npm install -g firebase-tools

Firebase Toolsとは？
自分のPCでFirebaseを操作・管理するための「コマンド専用ツール」です。先程のFirebase SDKはアプリの中に組み込んで、ログインなどの「機能」を動かすものであることに対して、Firebase Toolsは自分のPCにインストールして、アプリを「公開・管理」するものとなります。

2. ログインと初期化:

firebase login
firebase init
  • Features: Hosting を選択。
  • Project: 作成したプロジェクトを選択。
  • Public directory: dist (Viteの場合) を指定。
  • Configure as a single-page app: Yes (SPAとして設定)。

ビルドとデプロイ:

npm run build
firebase deploy

コマンドが完了すると、https://your-project-id.web.app という公開 URL が発行されます。これであなたのアプリはオンラインになりました！

まとめ

  1. Google AI Studio で0→1のひな形を作る。
  2. Antigravity でローカル環境に移し、Git管理下で詳細を作り込む。
  3. Firebase (Auth/Firestore) でユーザー管理とデータをクラウド化。
  4. Hosting でデプロイして公開。

このフローを使えば、個人開発でも驚くべきスピードで高機能なWebアプリをリリースできます。ぜひトライしてみてください！

▼今回作成したタイムログアプリはこちら！

TimeLog
timelog.nyanco.me

自身のGoogleアカウントでログインして使うとどのデバイスでもログが同期されて便利です！

▼最後にオマケとして本記事で登場した主要ツールの役割と関係を家造りで表した図解を置いておきます。

画像

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧

スポンサーリンク

コメント