【React + Firebase】FirebaseでURL共有できるようにした話

こんにちは！

先日、割り勘アプリを作成しリリースしました。
2人用限定です。
こちら↓
https://split-bill-cloud.web.app

その中で、URLを相手と共有し、同じページを使う仕組みをFirebaseで構築しました。
これについて説明します。

Firebaseとは

Googleが提供するバックエンドサービス(BaaS)です。
https://firebase.google.com/?hl=ja

今回使った機能は以下2つです。

• Cloud Firestore
• Firebase Hosting

Cloud Firestoreは、NoSQLという種類のデータベースで、
コレクションやドキュメントといった階層構造でデータが管理されています。
onSnapshot関数を用いることで、データの変更がリアルタイムで反映されます。

Firebase Hostingはホスティングサービスです。
今回はこれを使ってデプロイしました。

今回やりたかったこと

• ユーザーが1つの部屋に入る（部屋はURLで指定する）
• その部屋で登録されたデータをFirebaseのデータベースに保存する
• 挙動を監視することで、相手の画面にも反映できるようにする

そのために以下の手順で実装を行いました。

実装したこと

以下の3つのステップで構築しました。

1.URLにルームIDを持たせる
2.Firestoreで同期する
3.Firebase Hostingでデプロイする

1つずつ見ていきましょう。

1.URLにルームIDを持たせる

新規作成する場合、URLには部屋を識別するパラメータがありません。
その際、新しくroomIdを付与し、その部屋に飛ばします。

// URLに roomId がない場合（新規作成モード）
const newRoomRef = doc(collection(db, "rooms")); 
const newRoomId = newRoomRef.id; // Firebaseが作ったランダムなIDを取得


const roomSettings = {
        　// Firebaseに保存するフィールド名とstate
          title: title,
          name1: n1,
          name2: n2,
          createdAt: Date.now()
        };

// データを保存して、作られたURL（部屋）へ移動させる
await setDoc(newRoomRef, roomSettings);
navigate(`/room/${newRoomId}`);

2.Firestoreで同期する

先ほど取得した roomId を Firestore のドキュメント ID として使い、 rooms/{roomId}/payments の場所を監視します。
onSnapshotはその場所のデータが変わるたびに呼ばれるので、誰かが追加・更新・削除したらすぐに画面を更新できます。

// 部屋の識別子となるroomIdを取得
const { roomId } = useParams<{ roomId: string }>();

useEffect(() => {
  if (!roomId) return;

  const paymentsCollectionRef = collection(db, "rooms", roomId, "payments");// rooms/{roomId}/payments という場所

  // onSnapshot関数で、この部屋のデータを監視する
  const unsubscribe = onSnapshot(paymentsCollectionRef, (snapshot) => {
    // snapshot.docs から最新のリストを作り、setPayments(...) で画面を更新する
  });

  // useEffectのクリーンアップ(監視の解除)
  return () => unsubscribe();
}, [roomId]);

3.Firebase Hostingでデプロイする

firebase deploy

最初のセットアップを済ませておけば、更新差分は上記のコマンドだけでデプロイすることが出来ます。
（初回は設定が必要です）

終わりに

URLを共有することで別端末でも同じDBのデータが表示できるのは面白いですね！
最後まで読んでいただきありがとうございました！
また次回の記事でお会いしましょう！