Firebase Web クライアントのイベントを処理する（RxFire, ReactFire）
本記事では Firebase Web クライアントの通知を処理しやすくなるかもしれない RxFire と ReactFile をみていきます。 【目次】 ［１］はじめに ［２］Firebase Web SDK をそのまま使う （１）Authentication 通知例 （２）Firestore 通知例 （３）Storage 通知例 ［３］RxFire を利用する （１）RxJS と RxFire （２）RxFire のインストール （３）RxFire の利用例 ［４］ReactFire を利用する （１）ReactFire （２）ReactFire のインストール （３）ReactFire の利用例 ［１］はじめに 私が Firebase は面白いと感じることの一つに、様々な通知が得られることがあります。 例えば、Firebase Authentication であれば、ログイン、ログアウト状態の変化の通知を受け取ることができます。Firestore であれば、データベースの変更等の通知を受けることができます。 このような通知をうまく利用すれば、面白い動きをするアプリが作れそうな気になります。 一方で、アプリの規模が大きくなるにつれ、ユーザからのアクションとシステム等からの通知に対して一貫性を保って動作する設計や実装を行うことは難しいものです。 そこで本記事では手始めとして、Firebase Web クライアントの通知を処理しやすくなるかもしれない枠組みやライブラリを少しだけ見ておきます。 ［２］Firebase Web SDK をそのまま使う Firebase クライアントライブラリから受けられる通知は沢山ありますが、ここではよくありそうな例を３つだけみておきます。 （１）Authentication 通知例 以下のようなコードで、ユーザのログイン状態（ログインした、ログアウトした）の変化の通知を受けることができます。 import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); const unsubscribe = onAuthStateChanged(auth, (user) =&g