Firebase is back at Cloud Next on April 9 - 11. Register now.

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

Firebase Data Connect を使ってみる

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

Firebase プロジェクトに Firebase Data Connect を追加します。
アプリ用に Cloud SQL インスタンスをプロビジョニングします。
本番環境インスタンスで動作する Visual Studio Code 拡張機能を含む開発環境を設定します。
次に、次のことを行う方法を説明します。
- 映画アプリのスキーマを作成する
- アプリで使用するクエリとミューテーションを定義する
- サンプルデータを使用してクエリとミューテーションをテストする
- 厳密な型指定された SDK を生成し、アプリで使用する
- 最終的なスキーマ、クエリ、データをクラウドにデプロイします。

Firebase プロジェクトと Cloud SQL データベースを作成する

まだ作成していない場合は、Firebase プロジェクトを作成します。
1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。
Firebase コンソールの [Data Connect] セクションに移動し、プロダクトの設定ワークフローに沿って操作します。
プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。

注: Blaze のアップグレードで課金設定を行っても、プレビュー期間中は Data Connect またはデフォルトの Cloud SQL for PostgreSQL 構成の使用料は発生しません。
Cloud SQL for PostgreSQL データベースのロケーションを選択します。

注: 顧客管理の暗号鍵（CMEK）を使用する場合は、[既存の Cloud SQL インスタンスを使用する] を選択し、CMEK を使用する既存の Cloud SQL データベースを選択してください。
プロジェクト、サービス、データベースの名前と ID をメモして、後で確認できるようにします。
残りの設定フローに沿って、[完了] をクリックします。

注: Cloud SQL for PostgreSQL インスタンスのプロビジョニングが完了するまでに、最大で 15 分かかることがあります。データベースのプロビジョニングを含む Data Connect 設定フローが完了したことは、Google Cloud コンソールで確認できます。

開発フローを選択する

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] ボタンをクリックして、フローを完了します。
[Start emulators] ボタンをクリックします。

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

スキーマの作成

Firebase プロジェクトディレクトリの /dataconnect/schema/schema.gql ファイルで、映画を含む 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
}

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 スキーマの詳細については、ドキュメントをご覧ください

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

続行する前にスキーマをデプロイする必要があります。

拡張機能の UI の Firebase Data Connect パネルで、[本番環境にデプロイ] をクリックします。

スキーマを本番環境データベースにデプロイすると、Firebase コンソールでスキーマを表示できるようになります。

テーブルにデータを追加する

IDE エディタパネルでは、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。スキーマを本番環境にデプロイしたので、[データを追加] ボタンと [実行（本番環境）] ボタンを使用して、バックエンドのデータベースにデータを追加できます。

Movie テーブルにレコードを追加するには:

schema.gql で、Movie 型宣言の上にある [データを追加] ボタンをクリックします。
生成された Movie_insert.gql ファイルで、4 つのフィールドのデータをハードコードします。
[実行（本番環境）] ボタンをクリックします。
前の手順を繰り返して MovieMetadata テーブルにレコードを追加し、生成された MovieMetadata_insert ミューテーションのプロンプトが表示されたら、movieId フィールドに Movie の id を指定します。

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

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

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

クエリを定義する

次はクエリです。デベロッパーは GraphQL クエリではなく SQL クエリの作成に慣れているため、最初は少し違和感があるかもしれません。ただし、GraphQL は、未加工の SQL よりもはるかに簡潔で型安全です。VS Code 拡張機能により、開発が容易になります。

/dataconnect/connector/queries.gql ファイルを編集します。すべての映画を取得するには、次のようなクエリを使用します。

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

Data Connect クエリの詳細については、ドキュメントをご覧ください

SDK を生成する

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

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

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

開発の反復処理を完了しました。これで、スキーマの場合と同様に、Firebase 拡張機能の UI または Firebase CLI を使用して、スキーマ、データ、クエリをサーバーにデプロイできます。

IDE ウィンドウの VS Code 拡張機能 UI で、[Deploy to production] ボタンをクリックします。

デプロイしたら、Firebase コンソールに移動して、スキーマ、オペレーション、データがクラウドにアップロードされていることを確認します。スキーマを表示し、コンソールでオペレーションを実行できるはずです。Cloud SQL for PostgreSQL インスタンスは、最終的にデプロイされた生成されたスキーマとデータで更新されます。

Data Connect エミュレータの使用方法については、ドキュメントをご覧ください

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

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

Web Swift Kotlin Android Flutter

ウェブアプリに 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 />);

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()
    }
}

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 アプリに 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 サービスをモニタリングしたりします。詳しくは、ドキュメントをご覧ください。たとえば、クイックスタートを完了したので、次のようにします。
詳しくは、スキーマ、クエリ、ミューテーションの開発をご覧ください。
ウェブ、Android、iOS、Flutter のクライアント SDK の生成と、クライアントコードからのクエリとミューテーションの呼び出しについて学びます。