Firebase Data Connect を使ってみる

注: Data Connect を Blaze プランの Firebase プロジェクトのいずれかに追加し、Data Connect サービスを作成して、プロトタイピング用に Cloud SQL データベースをプロビジョニングする場合は、このクイックスタート ガイドに沿って操作してください。Spark プランを使用し、エミュレータとローカル データベースを使用してローカルでプロトタイプを作成する場合は、ローカル開発のスタートガイドをご覧ください。

このクイックスタートでは、本番環境の SQL インスタンスを使用してアプリケーションに Firebase Data Connect を構築する方法について説明します。

Firebase コンソールで次の操作を行います。

• Firebase プロジェクトに Firebase Data Connect を追加します。
• Firebase コンソールで AI アシスト スキーマ生成を使用してアプリのスキーマを作成し、デプロイします。
• アプリ用の Cloud SQL インスタンスをプロビジョニングします。
• Gemini in Firebase を使用して、データベースにサンプルデータを入力します。
• AI アシストによるオペレーション生成を使用してクエリとミューテーションを作成し、デプロイしてローカルでクライアント コードの開発に使用できます。

次に、ローカル開発環境で次の操作を行います。

• 本番環境インスタンスで動作する Visual Studio Code 拡張機能などの開発ツールを設定します。
• ローカル環境をコンソールで作成したアセットと同期します。
• 厳密に型指定された SDK を生成して、アプリで使用します。

クイック スタート アプリ リポジトリを調べて、ウェブの Codelab、iOS の Codelab、または Android の Codelab に沿って、フル機能の Data Connect アプリを構築します。

コンソール フロー: AI アシスタンスを使用してスキーマを設計し、データベースにデプロイする

1. まだ作成していない場合は、Firebase プロジェクトを作成します。
   1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。
2. Firebase コンソールの Data Connect セクションに移動します。
3. [Gemini を使ってみる] ボタンをクリックします。
4. 表示された [スキーマ ジェネレータ] ワークフロー パネルで、Gemini が GraphQL スキーマの作成を支援できるように、アプリについて説明します。
5. GraphQL スキーマを確認し、[アップグレードしてデプロイ] をクリックします。

6. プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。

   注: Blaze アップグレードで課金を設定しても、トライアル期間中は Data Connect の使用量やデフォルトの Cloud SQL for PostgreSQL 構成に対して課金されません。

7. [新しい Cloud SQL インスタンスを作成する] を選択します。表示されたダイアログで、Cloud SQL for PostgreSQL データベースのロケーションと名前を選択します。

   アプリのスキーマと、そのスキーマに対応する PostgreSQL データベースがデプロイされます。

   注: 顧客管理の暗号鍵（CMEK）を使用する場合は、[既存の Cloud SQL インスタンスを使用する] を選択し、CMEK を使用する既存の Cloud SQL データベースを選択してください。
   注: Cloud SQL for PostgreSQL インスタンスのプロビジョニングが完了するまでに最大 15 分かかることがあります。Google Cloud コンソールを使用して、データベースのプロビジョニングなどの Data Connect 設定フローが完了したことを確認できます。

コンソールのフロー: AI アシスタンスを使用してクライアントのオペレーションを作成する

スキーマをデプロイしたら、クエリとミューテーションのコネクタを作成してバックエンドにデプロイし、後でクライアントから呼び出すことで、クライアント アプリからこのデータにアクセスできるようにする最初の手順を実行できます。

AI アシスタンス ツールをご活用ください。

注: スキーマを作成してデプロイするまで、オペレーションを作成することはできません。

1. プロンプトが表示されたら、[Gemini でオペレーションを生成] ボタンをクリックします。

2. しばらくすると、[オペレーションを生成] ワークフロー パネルが表示されます。このパネルで、スキーマに基づいて Gemini が提供するクエリとミューテーションのリストを確認します。

3. 各オペレーション行をクリックして、そのオペレーションを定義する GraphQL コードを確認します。必要に応じて、ゴミ箱アイコンを使用して不要なオペレーションを削除します。

4. オペレーションを追加するには、[+ 追加] ボタンをクリックします。次に、以下のリソースをご覧ください。

   1. オペレーションを自然言語で記述します。

      例:

      List all products
      

   2. 生成された GraphQL を確認します。

   3. オペレーションが許容できる場合は、[挿入] をクリックしてオペレーション リストに追加します。

5. オペレーション セットが許容できる状態になるまで、オペレーションの削除と追加を繰り返します。

6. このオペレーションのリストをクライアント呼び出し可能なコネクタ セットとしてデプロイするには、コネクタの名前を選択して [デプロイ] をクリックします。

コンソール フロー: Gemini in Firebase を使用してミューテーションを作成し、データベースにデータを入力する

前の手順を完了すると、関連するエンティティ タイプで構成される Data Connect スキーマが作成され、本番環境にデプロイされます。つまり、対応するテーブルを含む PostgreSQL データベースも作成され、デプロイされます。

データベースにデータを入力するには、Firebase の Gemini を使用して、自然言語の入力を取得し、GraphQL ミューテーションを定義してテーブルの 1 つを更新し、クエリを定義して更新を確認します。

注: スキーマを作成してデプロイするまで、オペレーションを作成することはできません。

ヒント: スキーマはあらゆる種類のアプリを記述できるため、このガイドで Data Connect を学習するために参照できるエンティティは何でしょうか？スキーマには、Movie（映画レビュー アプリの場合）、Product（e コマース アプリの場合）、Account（決済アプリの場合）などの基本的なエンティティ タイプが含まれている可能性があります。次の手順では、スキーマで 1 つの型を選択します。

警告: データ エディタでミューテーションを実行すると、ミューテーションが実行され、データが変更される可能性があります。

1. [データ] タブを開きます。

2. [GraphQL の作成を支援] pen_spark アイコンをクリックし、表示されたボックスに入力を入力します。

   注: Product や Account などの単純な基本エンティティを選択して、データを入力します。

   例:

   Add data for three sample products to my app.
   

3. [生成] をクリックします。ミューテーションが返されます。

4. 出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。

5. 次に、[挿入] をクリックして、ミューテーションをデータ エディタに挿入します。

6. [実行] をクリックします。

ミューテーションを実行すると、PostgreSQL データベースの該当するテーブルにデータが書き込まれます。コンソールでクエリを作成して、保存されたデータを表示できます。

1. GraphQL の作成を支援 pen_spark を使用してクエリを作成し、上記の手順を繰り返します。

2. 表示されたボックスに入力内容を入力します。

   例:

   Query data for all sample products in my app.
   

3. [生成]、[実行] の順にクリックします。

ローカルフロー: 開発ツールを選択する

デプロイされたデータベースにデータがあり、コネクタをデプロイしたので、ローカル開発環境でスキーマとコネクタの開発を続行できます。

まず、ローカル環境を設定する必要があります。Data Connect では、開発ツールをインストールする方法が 2 つあります。

自動インストール（macOS または Linux） 手動インストール（Windows）

ローカルフロー: 開発環境を設定する

1. ローカル プロジェクト用の新しいディレクトリを作成します。

2. Data Connect 開発環境とブラウザベースの IDE を設定し、クライアント SDK を生成するには、作成した新しいディレクトリで次のコマンドを実行します。

     curl -sL https://firebase.tools/init/dataconnect | editor=true bash

   このスクリプトはインストールを試みます。インストールされた IDE には、スキーマの管理、アプリケーションで使用するクエリとミューテーションの定義、厳密に型指定された SDK の生成に役立つツール（事前バンドルされた VS Code 拡張機能など）が用意されています。

   また、このスクリプトは、Firebase コンソールで作成したアセットをローカル ディレクトリに同期し、プロジェクトに登録したアプリのクライアント SDK を生成します。

注: デスクトップ バージョンの VS Code がすでにインストールされている場合、スクリプトは自動的に開きます。

注: スクリプトが失敗した場合は、手動インストールの手順を使用します。

ローカルフロー: ローカル プロジェクトを設定する

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。IDE ウィンドウの左側のパネルで、Firebase アイコンをクリックして Data Connect VS Code 拡張機能の UI を開きます。

1. [エミュレータを起動] ボタンをクリックします。

   注: 統合されたターミナルで、構成したエミュレータが起動することを確認します。実行されると、エミュレータの詳細で拡張機能の UI が更新されます。

ローカル フロー: ローカル環境でスキーマとコネクタを見つける

既存のプロジェクトにアセットを同期するために使用した macOS または Linux の自動インストール オプションには、次の効果があります。

• デプロイしたスキーマを同期します。
  • スキーマは、Firebase プロジェクト ディレクトリの /dataconnect/schema/schema.gql ファイルにあります。
• デプロイしたコネクタのクエリとミューテーションを同期します。
  • コネクタを見つけます。オペレーションは、Firebase プロジェクト ディレクトリの /dataconnect/connector/ ディレクトリにあります。

注: スキーマは、Gemini で説明し、以前にデプロイしたアプリに固有のもので、そのアプリに適したエンティティ タイプが含まれています。

このガイドの残りの部分では、Gemini に映画レビュー アプリをリクエストした場合に表示される可能性のある Movie 型に焦点を当てた例を示します。このガイドでは、Movie を使用して、あらゆる種類のアプリ スキーマに適用される GraphQL とワークフローのコンセプトを紹介します。

ローカルフロー: スキーマを理解する

スキーマの例: 映画

Data Connect では、GraphQL フィールドが列にマッピングされます。Movie 型には、id、title、imageUrl、genre が含まれる可能性があります。Data Connect は、プリミティブ データ型 String と UUID を認識します。

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

スキーマの例 1:1 テーブル: MovieMetadata

映画では、映画のメタデータをモデル化できます。

たとえば、schema.gql で次のスニペットを追加したり、Gemini によって生成されたコードを確認したりできます。

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

movie フィールドは Movie 型にマッピングされます。Data Connect は、これが Movie と MovieMetadata の間の関係であることを認識し、この関係を管理します。

Data Connect スキーマの詳細については、ドキュメントをご覧ください

ローカル フロー: テーブルにデータを追加する

IDE エディタ パネルで、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。コンソールで行ったように、ミューテーションを作成して本番環境データベースにデータを追加できます。

注: スキーマは、スキーマ アシスタントに説明したアプリに固有のものです。スキーマで、Movie（映画レビュー アプリの場合）、Product、Account（e コマース アプリの場合）など、データを追加する基本タイプを選択します。

ローカルでテーブルにデータを追加するには:

1. schema.gql で、いずれかの型（アプリの性質に応じて Movie、Product、Account など）の宣言の上にある [データを追加] ボタンをクリックします。
   
2. 新しいファイル <type>_insert.qgl が、Movie_insert.gql や Product_insert.gql などの作業ディレクトリに追加されます。そのタイプのフィールドにデータをハードコードします。
3. [実行（本番環境）] ボタンをクリックします。
   
4. 前の手順を繰り返して、他のテーブルにレコードを追加します。

データが追加されたことをすばやく確認するには:

1. schema.gql に戻り、型宣言の上にある [Read data] ボタンをクリックします。
2. 生成された <type>_read.gql ファイル（Product_read.gql など）で、[実行（本番環境）] ボタンをクリックしてクエリを実行します。

Data Connect ミューテーションの詳細については、ドキュメントをご覧ください

ローカルフロー: SDK を生成する

スキーマとコネクタのオペレーションがローカルで同期されます。

これで、VS Code 拡張機能を使用してクライアント SDK を生成し、iOS、Android、ウェブ、Flutter アプリでクエリとミューテーションの呼び出しの実装を開始できます。

1. 拡張機能の UI で、[Add SDK to app] ボタンをクリックします。

2. 表示されたダイアログで、アプリのコードを含むディレクトリを選択します。Data Connect SDK コードが生成され、そこに保存されます。

   注: アプリ ディレクトリがまだない場合は、SDK コード用の新しいディレクトリを作成して選択し、後でアプリにリンクできます。

3. アプリ プラットフォームを選択すると、選択したディレクトリに SDK コードがすぐに生成されます。

ローカルフロー: SDK を使用してアプリからクエリを呼び出す

これまでに、Firebase コンソールでスキーマとオペレーションをデプロイしました。アプリからオペレーションを呼び出すには、Data Connect が生成した SDK を使用して、ListMovies クエリの呼び出しを実装します。

注: 次の例にも、@movie-app/movies などのインポートや ListMovies などのオペレーション（映画レビューアプリのスキーマに含まれている可能性があります）への参照が含まれています。生成された SDK には、アプリに適用可能な ListProducts や ListAccounts などのメソッドが含まれている場合があります。

ウェブ、iOS、Android 向けの Codelab で、フル機能の Data Connect アプリを含むクイック スタート アプリ リポジトリを調べることは、生成された SDK を理解するうえで特に役立ちます。

Web

1. ウェブアプリに Firebase を追加します。

2. React アプリのメインファイルで、次のようにします。

   • 生成された SDK をインポートする
   • Data Connect メソッドを呼び出します。
   注: このサンプルでは、React アプリは Firebase JavaScript SDK を使用してクエリを呼び出します。Data Connect は、React で Data Connect を非同期で操作するための特別なバインディングも提供します。

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   
   // Generated queries.
   // Update as needed with the path to your generated SDK.
   import { listMovies, ListMoviesData } from '@movie-app/movies';
   
   function App() {
     const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
     useEffect(() => {
       listMovies.then(res => setMovies(res.data));
     }, []);
     return (
       movies.map(movie => <h1>{movie.title}</h1>);
     );
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<App />);
   

Swift

1. Firebase を iOS アプリに追加します。

2. 生成された SDK を使用するには、Xcode で依存関係として構成します。

   Xcode の上部ナビゲーション バーで、[File] > [Add Package Dependencies] > [Add Local] を選択し、生成された Package.swift を含むフォルダを選択します。

3. アプリのメイン デリゲートで:

   • 生成された SDK をインポートする
   • Data Connect メソッドを呼び出します。

   import SwiftUI
   
   import FirebaseDataConnect
   // Generated queries.
   // Update as needed with the package name of your generated SDK.
   import <CONNECTOR-PACKAGE-NAME>
   
   let connector = DataConnect.moviesConnector
   
   struct ListMovieView: View {
   @StateObject private var queryRef = connector.listMovies.ref()
   
       var body: some View {
           VStack {
               Button {
                   Task {
                       do {
                           try await refresh()
                       } catch {
                           print("Failed to refresh: \(error)")
                       }
                   }
               } label: {
                   Text("Refresh")
               }
   
               // use the query results in a view
               ForEach(queryRef.data?.movies ?? []) { movie in
                       Text(movie.title)
                   }
               }
       }
       @MainActor
       func refresh() async throws {
           _ = try await queryRef.execute()
       }
   
       struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ListMovieView()
       }
   }
   

Kotlin Android

1. Android アプリに Firebase を追加します。

2. 生成された SDK を使用するには、Gradle で Data Connect を依存関係として構成します。

   app/build.gradle.kts の plugins と dependencies を更新します。

   plugins {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest as of March 14, 2025.
     // Note, however, that the version of kotlin("plugin.serialization") must,
     // in general, match the version of kotlin("android").
     id("com.android.application") version "8.9.0"
     id("com.google.gms.google-services") version "4.4.2"
     val kotlinVersion = "2.1.10"
     kotlin("android") version kotlinVersion
     kotlin("plugin.serialization") version kotlinVersion
   }
   
   dependencies {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest versions as of March 14, 2025.
     implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")
   
     // These dependencies are not strictly required, but will very likely be used
     // when writing modern Android applications.
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
     implementation("androidx.appcompat:appcompat:1.7.0")
     implementation("androidx.activity:activity-ktx:1.10.1")
     implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
     implementation("com.google.android.material:material:1.12.0")
   }
   

3. アプリのメイン アクティビティで、次の処理を行います。

   • 生成された SDK をインポートする
   • Data Connect メソッドを呼び出します。

   import android.os.Bundle
   import android.widget.TextView
   import androidx.appcompat.app.AppCompatActivity
   import androidx.lifecycle.Lifecycle
   import androidx.lifecycle.lifecycleScope
   import androidx.lifecycle.repeatOnLifecycle
   import kotlinx.coroutines.launch
   
   
   private val connector = com.myapplication.MoviesConnector.instance
   
   class MainActivity : AppCompatActivity() {
   
     override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       val textView: TextView = findViewById(R.id.text_view)
   
       lifecycleScope.launch {
         lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
           
           val result = connector.listMovies.runCatching { execute { } }
           
           val newTextViewText = result.fold(
             onSuccess = {
               val titles = it.data.movies.map { it.title }
               "${titles.size} movies: " + titles.joinToString(", ")
             },
             onFailure = { "ERROR: ${it.message}" }
           )
           textView.text = newTextViewText
         }
       }
     }
   }
   

Flutter

1. Flutter アプリに Firebase を追加します。
2. flutterfire CLI dart pub global activate flutterfire_cli をインストールします。
3. flutterfire configure を実行します。
4. アプリのメイン関数で、次の操作を行います。
   • 生成された SDK をインポートする
   • Data Connect メソッドを呼び出します。

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

次のステップ

デプロイされたプロジェクトを確認し、他のツールを見つけます。

• データベースにデータを追加し、スキーマを検査して変更し、Firebase コンソールで Data Connect サービスをモニタリングします。

詳細については、ドキュメントをご覧ください。たとえば、クイックスタートを完了したため、次のようになります。

• スキーマ、クエリ、ミューテーションの生成に役立つ AI アシスタンス ツールとガイダンスの詳細をご覧ください。AI アシスタンス ガイドでは、IDE で MCP サーバーを設定して使用する方法と、プロンプトを作成するためのベスト プラクティスについて説明します。
• 詳しくは、スキーマ、クエリ、ミューテーションの開発をご覧ください。
• ウェブ、Android、iOS、Flutter のクライアント SDK の生成と、クライアント コードからのクエリとミューテーションの呼び出しについて学習する。