Firebase SQL Connect: PostgreSQLでリアルタイムアプリケーションを構築する新常識

導入：リアルタイムデータとSQLの新たな融合

Firebaseは、リアルタイム同期の分野で長年にわたる歴史を持っています。特にFirestoreや初代Realtime Databaseは、10年以上にわたりシームレスなリアルタイムデータ同期を提供してきました。これらのサービスはNoSQLデータベースであり、その柔軟性と高い許容性は多くのユースケースで素晴らしい力を発揮します。しかし、アプリケーションのデータモデルによっては、SQLデータベースが提供する厳密な整合性やリレーショナルな構造がより適している場合があります。

このようなニーズに応えるため、私たちはCloud SQLを基盤としたFirebaseのリレーショナルソリューション、「SQL Connect」を開発しました。SQL Connectの目標は、PostgreSQLの強力な機能とFirebaseが提供する高速かつ優れた開発者体験を組み合わせることです。この記事では、SQL Connectを利用してSQLベースのリアルタイムアプリケーションをいかに簡単に構築できるかをご紹介します。

今回のデモはWebアプリケーションを使用しますが、SQL Connectはモバイル（Android、iOS、Flutter）およびサーバーサイド環境向けに型安全なSDKを生成します。これにより、スタック全体で一貫した開発体験を実現できることをご留意ください。

サンプルアプリケーションの概要：絵文字取引所

今回ご紹介するサンプルアプリは、株ではなく「絵文字」を取引する金融取引所です。このアプリは、そのリレーショナルな構造（ユーザーはリーダーボードに属し、絵文字はポートフォリオに属し、市場トレンドがすべてを連携させる）から、SQLデータベースに最適な候補と言えます。また、このような金融アプリケーションは、ユーザーが常に最新の価格や市場活動を把握する必要があるため、リアルタイム同期の典型的なユースケースでもあります。例えば、「パーティポッパー絵文字」が今日いくらで取引を終えたか、といった情報が即座に表示されることが重要です。

従来の課題とSQL Connectによる解決

伝統的に、このようなアプリケーションを構築するには、サーバーの立ち上げ、データベースへのクエリ、APIレイヤーの維持など、多くのボイラープレートコード（定型的な繰り返しコード）を記述する必要がありました。さらに、セキュリティ対策も考慮しなければなりません。これらの作業は以前よりは容易になっていますが、依然としてスタックの各レイヤー間の連携が必要であり、特にシステムが進化するにつれてその調整は複雑になります。

もし、バックエンドをたった2つのファイルでスキャフォールド（骨組みを自動生成）できるとしたらどうでしょうか？ SQL Connectは、皆さんが既にご存知であろう「スキーマ定義」と「アプリケーションに必要なクエリ」という2つの情報を活用し、以下のものを自動生成します。

PostgreSQLデータベーススキーマ: データを格納するためのスキーマ。
セキュアなAPIエンドポイント: 各クエリがデータベースと通信するためのセキュアなエンドポイント。
型安全なSDK: APIを呼び出すための型安全なSDK。

それでは、SQL Connectがどのように動作するのかを見ていきましょう。

ステップ1：データモデルの定義

リレーショナルデータベースを扱う上で最初のステップは、データモデルの定義です。伝統的には、DDL（データ定義言語）やモデリングツールを使用してスキーマを定義していました。しかし、SQL Connectでは、シンプルなGraphQLオブジェクトでデータモデルを定義します。

GraphQLに馴染みのない方でも心配はいりません。SQL Connectは生成AIを活用しており、適切な構文をガイドしてくれるツールを提供しています。Firebaseコンソールでは、SQL Connectエージェントが自然言語の指示に基づいて要件に合ったスキーマを生成できます。初期作成後も、エージェントやビジュアルエディタ、コードを直接使ってスキーマを調整することが可能です。スキーマが完成したら、すぐにデプロイできます。

ステップ2：データのシード（初期データ投入）

スキーマが設定されたら、次は実際に操作できるデータを投入します。これもAIを使って生成することも可能ですが、デモでは事前に用意されたミューテーション（データの変更操作）を使用します。これはFirebaseエミュレータを使ったローカル開発に非常に役立ちますが、コンソールから直接実行することも可能です。ミューテーションの実行後、テーブルビューでデータを参照したり、クエリパネルでアドホックなクエリを実行したりできます。

ステップ3：クエリの作成

スキーマとデータが揃ったので、アプリケーションに必要なクエリを考えていきましょう。コンソールはデータを視覚化するのに最適ですが、クエリ作成のフェーズではローカル開発環境に切り替えます。

アプリのリポジトリをエディタで開き、SQL Connect用のFirebase MCPサーバーとエージェントスキルを事前に設定しておきます。アプリのデザインに基づき、「価格の降順ですべての絵文字を取得する」クエリが必要だと仮定し、このクエリを生成します。

クエリが生成されたら、それが正しく動作するかテストすることが重要です。このために、SQL ConnectのVS Code拡張機能を利用します。この拡張機能には、クエリ実行機能以外にも多くの機能が組み込まれています。ローカルエミュレータや本番環境に対してクエリを実行できる機能は、迅速なイテレーション（繰り返し改善）に非常に役立ちます。最終結果を確認し、アプリケーションで使いやすい形でデータが返ってくることを確認できます。残りのクエリも同様の方法で生成するか、手動で記述することも可能です。

RAW SQLの活用

必要に応じて、RAW SQLでクエリを記述することも可能です。より複雑な操作を実行したり、PostgreSQLの拡張機能を利用したり、単にSQLを好む場合に便利です。ただし、RAW SQLを使用する場合、GraphQLが提供する型安全性は得られない点に注意してください。

ステップ4：アプリケーションの接続

スキーマと初期のクエリセットが完成したら、いよいよアプリケーションを接続する段階です。SQL Connectは、定義されたスキーマとクエリから、フロントエンドでデータをクエリするためのカスタムクライアントSDKを生成します。これにより、クライアント側でGraphQLを手書きする必要はありません。生成されたコードには、事前定義されたクエリ参照が既に含まれており、それらをインポートしてexecuteメソッドを呼び出すだけでデータを取得できます。

ステップ5：リアルタイム機能の実装

フロントエンドをデータベースに接続しましたが、何かが足りません。絵文字の価格が更新されません。株を売却した際に価格が変動し、利用可能な通貨が更新されるように、リアルタイム機能を実装する必要があります。幸い、これはわずか数ステップで実現できます。

クライアント側での購読

まず、クライアント側でデータの更新を購読する必要があります。FirestoreやRealtime DatabaseのSDKに慣れている方なら、更新の購読がいかにシンプルかご存知でしょう。SQL Connect SDKでも同様の考え方で、メソッドをインポートし、アプリケーションのコードに統合するだけです。ReactのuseEffectフックを使用した例が挙げられます。

// 概念的なコード例: 実際のコードは生成されたSDKに依存します
import { subscribeToEmojis } from './generated-sdk';
import React, { useEffect, useState } from 'react';

function EmojiDashboard() {
  const [emojis, setEmojis] = useState([]);

  useEffect(() => {
    const unsubscribe = subscribeToEmojis((data) => {
      setEmojis(data);
    });
    return () => unsubscribe();
  }, []);

  // ... UI レンダリング ...
}

これで変更を購読できるようになりますが、クエリ自体も修正する必要があります。リアルタイムの仕組みについて少し説明しましょう。

バックエンドでのリアルタイム同期の仕組みと`@refresh`ディレクティブ

リアルタイム機能に関して、SQL Connectは舞台裏で多くの重労働を処理します。もし複数のユーザーが全く同じクエリを購読している場合や、IDで単一のエンティティを検索している場合、バックエンドは変更が発生するたびに新しいデータをクライアントに自動的にプッシュします。

しかし、ダッシュボードのようなクエリでは、より明示的なコントロールが必要になる場合があります。そこで、@refreshディレクティブを追加します。このディレクティブを使用することで、どのミューテーション（データの変更操作）がデータのリフレッシュをトリガーすべきかをSQL Connectに正確に指示できます。この方法の大きな利点は、精度です。アプリケーションが反応すべき正確なデータ変更を完全にコントロールできます。このデモの場合、「誰かが絵文字を売買するたびにデータをリフレッシュしたい」という要件があります。

@refreshディレクティブは以下のように機能します。buyStockとsellStockのミューテーションに対してそれぞれリフレッシュディレクティブを設定します。必要な数だけ設定可能ですが、この例ではこれだけで十分です。

# 概念的なスキーマ定義の例
type Query {
  emojis(orderBy: OrderBy!): [Emoji!]!
    @refresh(mutations: ["buyStock", "sellStock"])
}

アプリケーションが本番バックエンドに対して実行されているため、変更を反映するには再デプロイが必要です。VS Code拡張機能を使用することもできますが、他のFirebase製品と同様にCLIからfirebase deployコマンドを使用することも可能です。

デプロイが完了すると、フロントエンドに購読設定を加え、バックエンドに@refreshディレクティブを追加したことで、アプリケーションは完全にリアクティブになります。これにより、誰かが絵文字を売買するたびに、リストビューはすべてのユーザーに対してリアルタイムで更新され、まるで魔法のようにデータがリフレッシュされます。

まとめ

本記事では、Firebase SQL Connectを活用して、PostgreSQLベースのリアルタイムアプリケーションを効率的に構築する方法をご紹介しました。SQL Connectは、PostgreSQLの堅牢な整合性とFirebaseの卓越した開発者体験を融合させ、スキーマ定義からクエリ作成、そしてリアルタイム同期の実装までを、シンプルかつ型安全な方法で実現します。

従来の複雑なバックエンド開発から解放され、より本質的なアプリケーションロジックに集中できるようになることは、開発者にとって大きなメリットとなるでしょう。SQL Connectに関するフィードバックやご質問がございましたら、ぜひお聞かせください。さらに詳しく学びたい方は、以下のコードラボでサンプルアプリを試すことができます。

参考動画

Firebase SQL Connect: Build real-time apps on SQL

ポイント