前回の記事📒で紹介した、FireStoreのリアルタイム監視を制服アプリ(MorimaTechWare）で実装しましたので、デモ動画とコードの一部を共有します。制服アプリでは注文の追加更新をアプリ間でリアルタイムに共有しています。

---

🚀デモ動画

　林のアカウントとConnectionのアカウントでログインしたアプリ間で、購入履歴画面と発注処理画面での注文情報の入力をリアルタイムに共有しています。

　商品の注文状態の変更と、新たな商品の注文を行っています。商品の注文状態「注文済」、「検収済」等に注目してご覧になってください。

---

🚀コード抜粋

　前回も共有しましたが、制服アプリでの実装の一部を共有します。Reactの場合は、useEffectでリスナーを設定します。クリーンアップ関数で開放するのを忘れないようにします。

useEffect(() => {
    // 監視するコレクションを指定（ルートの "orders" コレクション）
    const ordersRef = collection(db, "orders");

    // リスナーを設定
    const unsubscribe = onSnapshot(
      ordersRef,
      (snapshot) => {
        // データの変更があった場合に fetchOrdersHistory を呼び出す
        const params = {
          fromDate: fromDate,
          toDate: toDate,
          status: status,
          orderDepartment: orderDepartment,
          myOwn: myOwn,
          loginUserEmail: userInfo.email,
          dateKind: dateKind,
        };
        dispatch(fetchOrdersHistory(params));
      },
      (error) => {
        console.error("リスナーの設定に失敗しました:", error);
      }
    );

    // クリーンアップ関数でリスナーを解除
    return () => {
      unsubscribe();
    };
  }, [
    fromDate,
    toDate,
    status,
    orderDepartment,
    myOwn,
    dateKind,
    dispatch,
    userInfo.email,
  ]);

---

🚀リアルタイム更新を使用しない場合

　代替処理を書いておきます。林はボタンによる実装をしてきました。今後はポーリングも実装してみようと思います。

---

🚀リアルタイム監視しているもの

　補足ですが、アプリで監視している項目を記載します。商品情報も追加するかもしれません。

監視はコンポーネント単位で実装しています。パフォーマンス的には必要なコンポーネント単位で実装した方が良いです。

---

🚀まとめ

　FireStoreのリアルタイム更新について、実際の業務における実装例をご紹介しました。

　表示のリアルタイム更新は利用ユーザが多いアプリや更新頻度の高いアプリで使用できるのではないかと思っています。

　例えば、在庫管理アプリや、工程負荷状況などの一覧を表示するアプリに使用できるのではないかと思っています。

　

←ホームに戻る