Firebase Data Connect を使ってみる

注: Firebase Data Connect は公開プレビュー版です。Data Connect には、Google Cloud Platform 利用規約のサービス固有の規約セクションの「一般提供前のサービス規約」が適用されます。pre-GA の機能は「現状のまま」で提供されるものであり、サポートが制限されることがあります。詳細については、リリース ステージの説明をご覧ください。

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

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

• Firebase プロジェクトに Firebase Data Connect を追加します。
• 本番環境インスタンスで動作する Visual Studio Code 拡張機能を含む開発環境を設定します。
• 次に、次のことを行う方法を説明します。
  • 映画レビュー アプリのスキーマを作成し、本番環境にデプロイします。
  • スキーマのクエリとミューテーションを定義します。
  • 強力な型付けの SDK を生成し、アプリで使用する
  • 最終的なスキーマ、クエリ、データを本番環境にデプロイします。

ウェブ向けの Codelab に沿って、クイックスタート アプリ リポジトリを見つけ、フル機能の Data Connect アプリを構築します。Android と iOS 用の Codelab は近日提供予定です。

前提条件

このクイックスタートをローカル環境で使用するには、以下が必要です。

• Linux、macOS、Windows
• Visual Studio Code

Firebase プロジェクトに接続する

1. まだ作成していない場合は、Firebase プロジェクトを作成します。
   1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。
2. Firebase コンソールの Data Connect セクションに移動し、プロダクトの設定ワークフローに沿って操作します。

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

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

4. CloudSQL for PostgreSQL データベースのロケーションを選択します。

5. プロジェクト、サービス、データベースの名前と ID をメモして、後で確認できるようにします。

6. 残りの設定フローに沿って、[完了] をクリックします。

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

開発環境を選択して設定する

Data Connect は、開発に 2 つの開発エクスペリエンスをサポートしています。

• Kotlin Android、iOS、Flutter、ウェブ デベロッパーは、VS Code 開発を使用して、Cloud SQL for PostgreSQL インスタンスに接続しながら、ローカルでスキーマとオペレーションを設計してテストできます。
• ウェブ デベロッパーは、IDX 開発を使用して、事前構成された IDX テンプレート（PostgreSQL、Data Connect エミュレータを含む VS Code 拡張機能、クイックスタート クライアント コードが設定されている）を使用して、IDX ワークスペースでプロトタイプを作成できます。詳しくは、Project IDX のサイトをご覧ください。

このクイックスタートでは、VS Code 拡張機能の開発フローに焦点を当てます。続行するには:

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

3. Visual Studio Code Marketplace から Firebase Data Connect 拡張機能をインストールします。

   注: この拡張機能には、マーケットプレイスの GraphQL 構文ハイライト拡張機能が含まれています。インストールした他の GraphQL 拡張機能が、Firebase Data Connect 拡張機能にバンドルされている GraphQL サポートと競合する可能性があります。

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

注: IDX を使用していない場合は、このセクションの手順に沿って操作してください。

通常の手順に沿って CLI をインストールします。npm がすでにインストールされている場合は、次のコマンドを実行します。

npm install -g firebase-tools

注: 既存の CLI インストールを使用している場合は、最新バージョンに更新してください。

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

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。

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

1. [Google でログイン] ボタンをクリックします。
2. [Firebase プロジェクトを接続] ボタンをクリックし、コンソールで前に作成したプロジェクトを選択します。
3. [Run firebase init] ボタンをクリックします。
4. プロジェクトが Blaze プランを使用している場合は、[バックエンド リソースを今すぐ構成しますか？] プロンプトに [はい] と回答します。

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

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

Firebase VS Code 拡張機能を使用して本番環境データベースを操作している場合は、続行する前にスキーマをデプロイする必要があります。スキーマを本番環境データベースにデプロイすると、コンソールでスキーマを表示できるようになります。

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

1. Data Connect VS Code 拡張機能を使用してデプロイできます。
   • 拡張機能の UI の Firebase Data Connect パネルで、[本番環境にデプロイ] をクリックします。
2. スキーマの変更を確認し、破壊的な変更を承認する必要がある場合があります。次の手順を行います。
   • firebase dataconnect:sql:diff を使用してスキーマの変更を確認する
   • 変更に問題がなければ、firebase dataconnect:sql:migrate で開始したフローを使用して変更を適用します。

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

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

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

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

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

1. schema.gql に戻り、Movie 型宣言の上にある [データの読み取り] ボタンをクリックします。
2. 生成された 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 ボタンを使用してクエリを実行します。

ヒント: Firebase の Gemini を使用すると、Firebase コンソールで GraphQL クエリを作成してテストできます。詳しくは、クエリとミューテーションに AI アシスタントを使用するをご覧ください。

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

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

1. [Add SDK to app] ボタンをクリックします。

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

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

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

生成された SDK を使用して、クライアント アプリ（ウェブ、Android、iOS、Flutter）からクエリとミューテーションを呼び出す方法を学びます。

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

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

Firebase VS Code 拡張機能を使用してデプロイする場合は、[本番環境にデプロイ] ボタンをクリックします。

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

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

次のステップ

デプロイされたプロジェクトを確認し、その他のツールを確認する。

• Firebase コンソールで、データベースにデータを追加したり、スキーマを検査、変更したり、Data Connect サービスをモニタリングしたりします。詳しくは、ドキュメントをご覧ください。たとえば、クイックスタートを完了したので、次のようにします。

• 詳しくは、スキーマ、クエリ、ミューテーションの開発をご覧ください。

• ウェブ、Android、iOS、Flutter のクライアント SDK の生成と、クライアント コードからのクエリとミューテーションの呼び出しについて学びます。