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

Firebase Data Connect をローカルで使ってみる

このクイックスタートでは、本番環境の SQL インスタンスを設定せずに、アプリケーションで Firebase Data Connect をローカルでビルドする方法について説明します。次のことを行います。

Firebase プロジェクトに Firebase Data Connect を追加します。
ローカルインスタンスで動作するように、Visual Studio Code 拡張機能を含む開発環境を設定します。
次に、次の方法について説明します。
- VS Code 拡張機能ツール（Gemini Code Assist）を使用して、次の操作を行います。
  - アプリのスキーマを作成する
  - 管理用のクエリとミューテーションを作成して、ローカルデータベースにデータを入力する
  - デプロイ可能なコネクタでアプリのクエリとミューテーションを実装する
- ローカルエミュレータに対してサンプルデータを使用してクエリとミューテーションをテストする
- 厳密に型指定された SDK を生成してアプリで使用する
- 最終的なスキーマとコネクタをクラウドにデプロイします（省略可。Blaze プランにアップグレードした場合）。

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

Data Connect には、開発ツールをインストールしてローカルで作業する方法が 2 つあります。

前提条件

このクイックスタートを使用するには、次のものが必要です。

Visual Studio Code。
Node.js のインストール。Windows の場合は nvm-windows、macOS または Linux の場合は nvm を使用します。
Firebase プロジェクト。まだ作成していない場合は、Firebase コンソールで作成します。

開発環境を設定する

ローカルプロジェクト用の新しいディレクトリを作成します。
新しいディレクトリで VS Code を開きます。
Visual Studio Code Marketplace から Firebase Data Connect 拡張機能をインストールします。

プロジェクトディレクトリを設定する

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

[Google でログイン] ボタンをクリックします。
[Firebase プロジェクトを接続] ボタンをクリックし、コンソールで作成したプロジェクトを選択します。
[Run firebase init] ボタンをクリックします。
[エミュレータを起動] ボタンをクリックします。

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

スキーマの作成

Firebase プロジェクトディレクトリの /dataconnect/schema/schema.gql ファイルで、映画のレビューなどに関する GraphQL スキーマの定義を開始します。

Gemini Code Assist を使用してスキーマを構築する

Gemini Code Assist を使用して映画レビューアプリのスキーマを作成するには:

Data Connect VS Code 拡張機能のアイコンをクリックして、サイドバーを開きます。
[@FirebaseDataConnect で Gemini を試す] をクリックします。Gemini Code Assist チャットウィンドウが開きます。
チャットインターフェースをクリックし、@FirebaseDataConnect の入力を開始して関連するコマンドをフィルタします。
/generate_schema コマンドを選択し、プロンプトでコマンドを完成させ、開発中のアプリのスキーマを構築するよう Gemini に指示します。

例:
```
@FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
```
しばらくすると、推奨されるスキーマが表示されます。スキーマを確認します。

注: 初期スキーマを変更する場合は、新しい @FirebaseDataConnect /generate_schema コマンドを実行して、スキーマから型を削除したり、特定のフィールドを型に追加したりするよう Gemini に指示できます。
schema.gql にコードを追加するには:
1. [Insert to bottom of file]（ファイルの末尾に挿入）ボタンをクリックします。
2. または、カーソル位置にコードを挿入するには、チャット応答の上部にある [+] ボタンをクリックします。

映画

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

次のスニペットをコピーするか、ファイル内の対応する行のコメントを解除します。

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

次のスニペットをコピーするか、ファイル内の対応する行のコメントを解除します。

# 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 テーブルと MovieMetadata テーブルにレコードを追加するには:

schema.gql で、Movie 型宣言の上にある [データを追加] ボタンをクリックします。
生成された Movie_insert.gql ファイルで、3 つのフィールドのデータをハードコードします。
[Run (Local)] ボタンをクリックします。
前の手順を繰り返して MovieMetadata テーブルにレコードを追加します。生成された MovieMetadata_insert ミューテーションで求められたとおり、movieId フィールドに Movie の id を指定します。

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

schema.gql に戻り、Movie 型宣言の上にある [Read data] ボタンをクリックします。
生成された Movie_read.gql ファイルで、[実行（ローカル）] ボタンをクリックしてクエリを実行します。

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

クエリを定義する

次に、アプリケーションで必要なクエリを定義します。デベロッパーは GraphQL クエリではなく SQL クエリの作成に慣れているため、最初は少し違和感があるかもしれません。

ただし、GraphQL は生の SQL よりもはるかに簡潔で、型安全です。また、VS Code 拡張機能により、クエリとミューテーションの両方で開発エクスペリエンスが容易になります。

Gemini Code Assist を使用してクエリを作成するには:

Data Connect VS Code 拡張機能のアイコンをクリックして、サイドバーを開きます。
[@FirebaseDataConnect で Gemini を試す] をクリックします。Gemini Code Assist チャットウィンドウが開きます。
チャットインターフェースをクリックし、@FirebaseDataConnect の入力を開始して関連するコマンドをフィルタします。
/generate_operation コマンドを選択し、プロンプトでコマンドを完成させて、Gemini にクエリの作成をリクエストします。

例:
```
@FirebaseDataConnect /generate_operation List all movies with titles start with "A".
```
しばらくすると、おすすめのクエリが表示されます。クエリを確認します。

注: 最初のクエリを変更する場合は、新しい @FirebaseDataConnect /generate_operation コマンドを実行して、たとえば、数字で始まるタイトルをフィルタするよう Gemini にリクエストできます。また、「スキーマのすべての型に対してミューテーションを生成して」などの指示で、複数のミューテーションを作成するようにリクエストすることもできます。
queries.gql にコードを追加するには:
1. [Insert to bottom of file]（ファイルの末尾に挿入）ボタンをクリックします。
2. または、カーソル位置にコードを挿入するには、チャット応答の上部にある [+] ボタンをクリックします。

近くにある CodeLens ボタンを使用してクエリを実行します。

ドキュメントで Data Connect クエリの詳細を確認する

SDK を生成してアプリで使用する

IDE の左側のパネルで Firebase アイコンをクリックして、Data Connect VS Code 拡張機能の UI を開きます。

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

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

SDK を使用してアプリからクエリを呼び出す

Data Connect で生成された SDK を使用して、ListMovies クエリへの呼び出しを実装できます。このクエリは、Data Connect エミュレータを使用してローカルで実行できます。

Web

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

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

生成された SDK をインポートする
Data Connect エミュレータに接続するようにアプリを計測可能にする
Data Connect メソッドを呼び出します。

import React from 'react';
import ReactDOM from 'react-dom/client';

import { connectDataConnectEmulator } from 'firebase/data-connect';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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 エミュレータに接続するようにアプリを計測可能にする
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

// Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

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

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

生成された 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 エミュレータに接続するようにアプリを計測可能にする
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
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }


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 エミュレータに接続するようにアプリを計測可能にする
- 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

スキーマとクエリを本番環境にデプロイする

アプリでローカル設定が完了したら、スキーマとコネクタをクラウドにデプロイできます。Cloud SQL インスタンスを設定するには、Blaze プランのプロジェクトが必要です。

Firebase コンソールの [データ接続] セクションに移動し、無料トライアルの Cloud SQL インスタンスを作成します。

注: Cloud SQL for PostgreSQL インスタンスのプロビジョニングには、最大 15 分かかることがあります。インスタンスの準備が整うまでデプロイできません。
注: 顧客管理の暗号鍵（CMEK）を使用する場合は、[既存の Cloud SQL インスタンスを使用する] を選択し、CMEK を使用する既存の Cloud SQL データベースを選択してください。
IDE に統合された [ターミナル] で firebase init dataconnect を実行し、コンソールで作成した [リージョン/サービス ID] を選択します。
「File dataconnect/dataconnect.yaml already exists, Overwrite?」というプロンプトが表示されたら、「Y」を選択します。
IDE ウィンドウの VS Code 拡張機能 UI で、[Deploy to production] ボタンをクリックします。
デプロイが完了したら、Firebase コンソールに移動して、スキーマ、オペレーション、データがクラウドにアップロードされたことを確認します。スキーマを表示し、コンソールでオペレーションを実行することもできます。Cloud SQL for PostgreSQL インスタンスは、最終的にデプロイされた生成スキーマとデータで更新されます。

次のステップ

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

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

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

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