I/O is live! Tune in for livestreamed keynotes and sessions May 20-21 starting at 10 AM PT. Watch now.

このページは Cloud Translation API によって翻訳されました。

Firebase Data Connect を使ってみる

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

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

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

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

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

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

まだ作成していない場合は、Firebase プロジェクトを作成します。
1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。
Firebase コンソールの Data Connect セクションに移動します。
[Gemini を使ってみる] ボタンをクリックします。
表示された [スキーマ生成ツール] ワークフローパネルで、アプリを記述して、Gemini が GraphQL スキーマの作成をサポートできるようにします。
GraphQL スキーマを確認し、[アップグレードしてデプロイ] をクリックします。
プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。

注: Blaze のアップグレードで課金設定を行っても、トライアル期間中は Data Connect またはデフォルトの Cloud SQL for PostgreSQL 構成の使用料は発生しません。
[新しい Cloud SQL インスタンスを作成] を選択します。表示されたダイアログで、Cloud SQL for PostgreSQL データベースのロケーションと命名を選択します。

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

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

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

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

AI 支援ツールをご利用ください。

プロンプトが表示されたら、[Gemini でオペレーションを生成] ボタンをクリックします。
しばらくすると、表示された [オペレーションを生成] ワークフローパネルで、スキーマに基づいて Gemini から提供されたクエリとミューテーションのリストを調べます。
各オペレーション行をクリックして、そのオペレーションを定義する GraphQL コードを確認します。必要に応じて、ゴミ箱コントロールを使用して不要なオペレーションを削除します。
オペレーションを追加するには、[+ 追加] ボタンをクリックします。次に、以下のリソースをご覧ください。
1. オペレーションを自然言語で記述します。
  
  例:
```
List all products
```
2. 生成された GraphQL を確認します。
3. オペレーションが許容される場合は、[挿入] をクリックしてオペレーションリストに追加します。
オペレーションセットが許容されるまで、オペレーションの削除と追加を続けます。
このオペレーションのリストをクライアント呼び出し可能なコネクタ セットとしてデプロイするには、コネクタ名を選択して [デプロイ] をクリックします。

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

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

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

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

注: Product や Account などのシンプルで基本的なエンティティを選択してデータを入力します。
例:
```
Add data for three sample products to my app.
```
[生成] をクリックします。ミューテーションが返されます。
出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。
次に、[挿入] をクリックして、データエディタにミューテーションを挿入します。
[実行] をクリックします。

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

前の手順を繰り返して、[GraphQL の作成を支援] pen_spark を使用してクエリを作成します。
表示されたボックスに入力します。

例:
```
Query data for all sample products in my app.
```
[生成]、[実行] の順にクリックします。

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

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

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

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

ローカルプロジェクト用の新しいディレクトリを作成します。
作成した新しいディレクトリで次のコマンドを実行します。
```
  curl -sL https://firebase.tools/dataconnect | bash
```
このスクリプトは、開発環境をセットアップし、ブラウザベースの IDE を起動しようとします。この IDE には、事前バンドルの VS Code 拡張機能などのツールが用意されており、スキーマの管理、アプリケーションで使用するクエリとミューテーションの定義、強力な型付けの SDK の生成に役立ちます。

注: デスクトップ版の VS Code がすでにインストールされている場合は、スクリプトによって自動的に開きます。
注: スクリプトが失敗した場合は、手動インストールの手順を使用します。

  alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

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

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

[Google でログイン] ボタンをクリックします。
[Firebase プロジェクトを接続] ボタンをクリックし、コンソールで前に作成したプロジェクトを選択します。
[Run firebase init] ボタンをクリックして、フローを完了します。

注: firebase init は、ローカルプロジェクトを Firebase コンソールにデプロイされたリソースと同期します。重要なのは、GraphQL スキーマとコネクタコード（クエリとミューテーション）がローカルプロジェクトにダウンロードされるため、開発を続行できることです。
[Start emulators] ボタンをクリックします。

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

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

前のセクションの firebase init の手順では、ローカル開発環境にアセットを同期します。

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

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

スキーマの例: 映画

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 ボタンが表示されます。コンソールの場合と同様に、ミューテーションを作成して本番環境データベースにデータを追加できます。

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

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

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

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

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

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

スキーマとコネクタのオペレーションはローカルで同期されます。これで、ローカルツールを使用してクライアント SDK を生成して、iOS、Android、ウェブ、Flutter アプリでクエリとミューテーションの呼び出しを実装できるようになりました。

[Add SDK to app] ボタンをクリックします。
表示されたダイアログで、アプリのコードを含むディレクトリを選択します。Data Connect SDK コードが生成され、そこに保存されます。

注: アプリディレクトリがまだない場合は、今のところ SDK コード用の新しいディレクトリを作成して選択し、後でアプリにリンクできます。
アプリプラットフォームを選択し、選択したディレクトリに SDK コードがすぐに生成されることを確認します。

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

更新されたスキーマ（該当する場合）とクエリが本番環境にデプロイされたので、Data Connect が生成した SDK を使用して、ListMovies クエリの呼び出しを実装できます。

Web

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

React アプリのメインファイルで、次のコードを追加します。

生成された SDK をインポートします。
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

Firebase を iOS アプリに追加します。
生成された SDK を使用するには、Xcode で依存関係として構成します。

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

アプリのメインデリゲートで、次のコードを追加します。

生成された 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

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

生成された 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")
}

アプリのメインアクティビティで、次の操作を行います。

生成された 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

Flutter アプリに Firebase を追加します。
flutterfire CLI dart pub global activate flutterfire_cli をインストールします。
flutterfire configure を実行します。
アプリのメイン関数で、次の操作を行います。
- 生成された 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 アシスタントガイドでは、プロンプトの作成に関するベストプラクティスについて説明しています。
詳しくは、スキーマ、クエリ、ミューテーションの開発をご覧ください。
ウェブ、Android、iOS、Flutter のクライアント SDK の生成と、クライアントコードからのクエリとミューテーションの呼び出しについて学びます。