AI エージェントを使用して Firebase SQL Connect を使ってみる

このクイックスタートでは、Firebase SQL Connect を AI コーディング ツールで使用して、フルスタックのリレーショナル アプリケーションを迅速に構築する方法について説明します。エージェントに Firebase エージェント スキルを装備することで、ボイラープレートのデータベース コードを記述したり、エンドポイントを手動で構成したりする必要がなくなります。ローカル プロジェクトの設定、AI アシスタントの構成、単一のプロンプトを使用して安全な PostgreSQL スキーマ、GraphQL オペレーション、完全な React フロントエンドを生成する方法について説明します。 ここで学習した内容は、Firebase SQL Connect がサポートする任意のプラットフォームのフロントエンドを構築するために使用できます。

始める前に

このクイックスタートを完了するには、環境が次のように設定されていることを確認してください。特定のオペレーティングシステムの手順については、 標準設定ガイドをご覧ください。

  • Node.js: Node.js をインストールして Firebase CLI を実行し、生成された React フロントエンドを強化します。

  • Firebase CLI: Firebase CLI をグローバルにインストールします。

    npm install -g firebase-tools

  • AI コーディング ツール: 最新の AI 搭載エディタ（ Antigravity、 Android Studio、Cursor、 Windsurf など）をインストールします。

ワークスペースを設定する

まず、任意の AI コーディング ツールを開き、新しいプロジェクト ディレクトリを作成します。 ツールの統合ターミナルを開き、初期化コマンドを実行します。

firebase init dataconnect

このコマンドは、プロジェクトの初期化の手順を説明します。プロンプトが表示されたら、次のオプションを選択します。

  • 新しい Firebase プロジェクトを作成する
  • Gemini スキーマの生成をスキップする
  • 新しい Cloud SQL インスタンスを作成する
  • React テンプレートを作成する
  • [はい] を選択して Firebase 用エージェント スキルをインストールする

AI でアプリを生成する

Firebase エージェント スキルがインストールされている場合、AI アシスタントは、高度なプロンプトから SQL Connect スキーマ、オペレーション、フロントエンド コードを直接生成できます。

次のいずれかのプロンプトを AI アシスタントにコピーして貼り付け、バックエンド、データベース関係、React フロントエンドを生成します。

例 1: 映画レビュー アプリ

プロンプト:

Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.

例 2: e コマース ストアフロント

プロンプト:

Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.

例 3: 複数作成者によるブログ

プロンプト:

Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.

AI アシスタントが作成するもの

これらのプロンプトを実行すると、AI アシスタントが技術的な作業を自動的に処理します。

  • データベース スキーマ（dataconnect/schema/schema.gql）: @table ディレクティブを使用して要件をリレーショナル テーブルに変換し、外部キーと主キーを自動的に管理します。
  • GraphQL オペレーション（dataconnect/[connector_name]/*.gql）: アプリに必要なクエリとミューテーションを正確に生成し、@auth ディレクティブで保護します。
  • 生成された SDK（src/dataconnect/）: Firebase CLI を使用して、スキーマとオペレーションに基づいて厳密に型付けされたクライアント SDK を即座に生成します。
  • React フロントエンド（src/）: 生成された SDK を使用して新しいバックエンドと通信する、完全で美しいスタイルの React アプリケーションを接続します。

本番環境にデプロイする

スキーマ、クエリ、ミューテーションを本番環境にデプロイするには、ターミナルで次のコマンドを実行します。

firebase deploy --only dataconnect

デプロイしたら、Firebase コンソールにアクセスしてライブ スキーマを表示し、Cloud SQL インスタンスに対してオペレーションを直接実行します。

次のステップ

クイックスタートが完了したので、次のステップに進みましょう。