「Firebase Data Connectを使ってみる」をやってみる！

# はじめに

こんにちは、もんすんです。

今回は、やっと使えるようになった`Firebase Data Connect`を使ってみました。

https://firebase.google.com/docs/data-connect?hl=ja&authuser=0

`Firebase Data Connect`は、Firebaseが提供する初のリレーショナルデータベースソリューションです。

モバイルやWebアプリ向けに、**Cloud SQL for PostgreSQL**を基盤としたフルマネージドなデータベースを提供します。GraphQLを利用してデータスキーマやクエリ・ミューテーションを管理してくれます。また、`Firebase Authentication`と統合することで、安全なアプリケーションを構築してくれます。また、複数プラットフォーム(Kotlin Android、iOS、Flutter、Web)向けの型安全なSDKも生成され、クライアントコードの簡易化を実現してくれます。

<font color="red">**ワックワクしますね！**</font>

さて、早速触っていきます。

:::note warn
2024年11月現在、Firebase Data Connect は公開プレビュー版です。
:::

# 「Firebase Data Connectを使ってみる」

以下のページを基に`Firebase Data Connect`を触っていきます。

https://firebase.google.com/docs/data-connect/quickstart?authuser=0&hl=ja

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

まず、通常通り、Firebaseプロジェクトをコンソールから作成していきます。
Data Connect特有の作業ではない部分の詳細は割愛します。

プロジェクト名は`nuxt3-fb-trial`としました。

### Data Connectの設定

こちらが、Data Connectの設定前の画面です。
「始める」を押して設定していきます。
![スクリーンショット 2024-11-15 22.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/2964c82f-4aa5-df1a-6d97-2d67d6a48d2e.png)

DBは、ローカルか`Cloud SQL`から選択できます。
ローカルは無料で使えますが、今回は`Cloud SQL`を使用することにしました。
こちらを利用する場合は、有料設定に切り替える必要があるので、クレジットカードの準備をしておきましょう。
![スクリーンショット 2024-11-15 22.09.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/72449bfc-d65c-31fa-5d9f-d956d8985c75.png)

あとは、ぽちぽちと画面の指示に従って、進めていくと、
![スクリーンショット 2024-11-14 23.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/cb9f43ff-f821-aec6-1f90-006242da9c08.png)

こんな感じで設定が完了しました。
Firebaseは初めての機能であっても、比較的設定の操作が容易に感じます。
ありがたい...:smile:
![スクリーンショット 2024-11-14 23.38.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/70f26a60-f3d0-6c3e-30b5-a615869161f8.png)

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

今回はNuxt.jsの環境を整備しました。
基本的にVSCodeであれば、対応言語のいずれでも同じような設定になるかと思います。
プロジェクト作成の詳細は割愛します。

### VSCode拡張機能追加

こちらが必須の拡張機能なので、「Install」からインストールしていきます。
もちろんVSCode上から追加することも可能です。

https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.firebase-dataconnect-vscode

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

手順と同様に以下のコマンド実行。
これで環境(もしくはローカルPC)に`Firebase CLI`がインストールされます。
既にインストールされていた場合は、最新バージョンを利用することが推奨されています。

```bash
npm install -g firebase-tools
```

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

:::note info
このステップでは、そのまま操作しても、うまくいかなかったので、以下のような手順で進めました。
:::

## firebaseログイン

以下のコマンドを実行して、firebaseにログインしました。

```bash
firebase login
```

## 拡張機能からGoogleログイン

VSCodeの左側の`Firebase Data Connect`拡張機能のボタンをクリックし、「Sign in with Google」を押します。
その後、VSCodeを再起動すると、接続が完了しました。

![スクリーンショット 2024-11-15 22.27.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/eb75447f-caf0-81f9-be86-cb4477879566.png)

その後、さらに「Connect a Firebase project」を選択し、「1. Firebase プロジェクトに接続する」で作成したFirebaseプロジェクトを選択しました。

さらに「Run firebase init」をクリックし、ターミナルの指示に従い、設定していきました。

![スクリーンショット 2024-11-15 9.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/db806f68-97e0-2126-9615-57b6703d7a75.png)

設定は完了し、`dataconnect.yaml`ファイルが生成されていましたが、拡張機能のところの「No dataconnect.yaml detected in this project」と表示されたままだったので、VSCodeを再起動したところ、以下のように正しく、接続できました。

![スクリーンショット 2024-11-15 11.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/4b3d6c83-aab9-cda7-1138-99d9725f0932.png)

### Start emulators

公式ドキュメントには、**[Start emulators] ボタンをクリックします。** とありますが、基本的にこのままではエラーになってしまいます。
エミュレータを起動するには`Java`の環境が必要とのことでした。

:::note info
Javaのバージョンは11以上必要とのこと
:::

私は、DevContainerを利用していたので、以下のコマンドを実行して`Java`をインストールしておきました。

```bash
sudo mkdir /opt/java
cd /opt/java/
wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz
tar zxvf jdk-21_linux-x64_bin.tar.gz 

export JAVA_HOME=/opt/java/jdk-21.0.5
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/jre/lib:$JAVA_HOME/lib
```

さて、Javaをインストールし終えたら、[Start emulators] ボタンをクリックします。
このように様々なFirebaseのサービスのエミュレータを起動することができました。

![スクリーンショット 2024-11-15 22.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/094a1ab6-a620-aa0b-29e9-6fec84eefea2.png)

## 5. スキーマの作成

さて、やっとここから`Firebase Data Connect`が触れる状態になりました。
長い道のりでした。

今回は、お試しなので、公式ドキュメントにあるように`Movie`テーブルと`MovieMetadata`テーブルを作成していきます。

指示に従って、プロジェクトの`/dataconnect/schema/schema.gql`の`Movie`テーブルと`MovieMetadata`テーブルのクエリのコメントアウトを除去しました。

![スクリーンショット 2024-11-15 22.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/f9599ee9-236e-9086-9ad1-2dd92ce08d74.png)

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

拡張機能から「Deploy to production」を押します。

![スクリーンショット 2024-11-15 11.01.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/59d796d5-7a6d-9c57-d974-114e0cec8b83.png)

:::note warn
Cloud SQL for PostgreSQL インスタンスのプロビジョニングには、最大 15 分かかることがあるらしいです。インスタンスの準備が整うまでデプロイすることはできません。
私もそれに気づかず、デプロイに失敗し、焦りました。
:::

デプロイが完了すると、Firebaseのコンソールでも生成したテーブルが確認できます。
![スクリーンショット 2024-11-15 23.29.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/923cf522-9cb5-fd20-8323-7b90619d8675.png)

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

`/dataconnect/schema/schema.gql`の`Movie`テーブルの上に表示されている**Add data**からデータをインサートします。
これをクリックすると、`Movie_insert.gql`ファイルが生成されます。

![スクリーンショット 2024-11-15 23.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/3889094c-cc16-7742-0d74-71ce4c89900d.png)

`mutation`の上の「Run (Production)」をクリックすると、`Firebase Data Connect`にデータが追加されます。
コンソールにも表示されました。

![スクリーンショット 2024-11-15 21.36.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/1256278d-cb67-9c30-cfa6-f1e6d25e050d.png)

## 8. クエリを定義する

公式ドキュメントに従って、クエリの定義をしました。
`/dataconnect/connector/queries.gql` ファイルを以下のように編集しました。
![スクリーンショット 2024-11-15 23.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/12d3c761-9305-7665-1a8e-c4f5037ea538.png)
こちらも「Run (Production)」をクリックすると、クエリが実行されます。
実行結果はVSCodeの下の方に正しくデータが取得されました。

![スクリーンショット 2024-11-15 23.50.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/bd25ae3b-1c87-675c-e8d9-78bccd5d297d.png)

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

拡張機能の「Add SDK to app」ボタンをクリックし、SDKを生成します。
SDKは、Web、Android、iOS、Flutterから選択できます。
今回は、Nuxt.js用でしたので、Web(JavaScript)を選択しました。

![スクリーンショット 2024-11-15 21.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/9d63a208-b884-f7f0-6222-f0f73deb1f41.png)

実行後、`/dataconnect/connector/dataconnect-generated/js/default-connector`にSDKが生成されました。
![スクリーンショット 2024-11-16 0.00.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/2a6fa7f1-d654-b418-58b4-39ce76f242fa.png)

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

これは、「6. スキーマを本番環境にデプロイする」とやることは同じなので、割愛します。

# 終わりに

今回は、Firebase初のリレーショナルデータベースソリューションである「Firebase Data Connect」を実際に触りながら、その設定手順からクエリ実行までの流れを体験しました。

触ってみて、Firebaseの特徴である「簡単に始められる」部分と、最新のデータベース技術の融合が印象的でした。
一方で、GraphQLの記法をもう少し理解する必要があるように感じました。
また、初期設定やエミュレータの動作環境整備など、事前準備に時間がかかる部分もありました。
ただ、そこを乗り越えればスムーズに操作できると感じました。

まだ公開プレビュー版ということで今後のアップデートが期待されますが、現段階でも試す価値は十分にあります。これからも引き続き利用しながら、その可能性を探っていきたいと思います。