Firebase のイベント機能

Firebase のイベント機能

Firebase にはイベントを検出して処理する機能がサポートされています。上手く利用すると便利です。 よく利用されるのは、Cloud Firestore の「onSnapshot()」などがあります。ユーザー認証機能（Authentication）の「onAuthStateChange()」などもよく利用されます。

この記事では、簡単にイベント検出機能の利用例を紹介します。

イベントの検出機能

Firebase の「onXXX」機能は基本的にイベントを検出する機能です。 この機能をどう使うかというと、簡単に説明すると「イベントの検出」と「イベントの処理」をペアで実装します。

＊　Firebase はイベントを検出

＊　そのイベントに対応した処理を行う

という感じで利用します。 イベントの処理の多くはアプリケーションの機能によって実装します。

例えば、Cloud Firestore の「onSnapshot()」の場合は、指定したデータベースのデータが更新されると、この処理が呼ばれる仕組みです。Web サイトのあるページで Firebase のデータのリストを表示している場合、データが更新された場合、表示するデータも更新するような用途で利用します。こうすることで、表示しているデータは常に最新のデータにすることができます。

onSnapShot の利用

具体的な実装例です。Cloud Firestore の「users」のドキュメントのデータが更新されると Firebase のデータベースからデータを読み込んで React のステートのデータを更新します。データが更新されると、表示している一覧を更新する仕組みです。

import * as React from "react";

import firebase from "./firebase";

interface User {

  email: string;

  name: string;

}

interface IState {

  data: Array<User>;

}

interface IProps {}

class Test extends React.Component<IProps, IState> {

  constructor(props: IProps) {

    super(props);

    this.state = {

      data: [],

    };

  }

  componentDidMount(): void {

    firebase

      .firestore()

      .collection("users")

      .onSnapshot(

        (

          querySnapshot: firebase.firestore.QuerySnapshot<firebase.firestore.DocumentData>

        ) => {

          const list = [];

          for (let i = 0; i < querySnapshot.size; i++) {

            list.push(querySnapshot.docs[i].data() as User);

          }

          this.setState({ data: list });

        }

      );

  }

  render(): JSX.Element {

    return (

      <React.Fragment>

        <div className="App">

          <table>

            <thead>

              <tr>

                <th>Name</th>

                <th>E-Mail</th>

              </tr>

            </thead>

            <tbody>

              {this.state.data.map((item: User) => (

                <tr key={item.email}>

                  <td>{item.name}</td>

                  <td>{item.email}</td>

                </tr>

              ))}

            </tbody>

          </table>

        </div>

      </React.Fragment>

    );

  }

}

export default Test;

onAuthStateChange()の利用

ユーザー認証で利用される、onAuthStateChange()を利用する場合もコンセプトは同じです。 これは、ログインの状態が変化した場合に呼び出されます。

一般的な利用方法は、ログインしている場合とログインしていない場合で表示する内容を変えたりするのに利用されます。 よく利用される例としては、会員専用サイトの実装などで利用します。

ログインしていない状態では、会員専用のページは見られないようにして、ログイン画面を表示する場合などに利用できます。 ログインした時やログアウトした時に、このイベントが発生します。その際に、必要な処理、この場合は、画面の切り替えを行う処理などを行います。

こうしたイベントの検出を自分で作成するのは意外に面倒ですが、Firebase 側でこうしたイベントを検出してくれるので、簡単に画面の切り替え処理を行う事が可能になります。

Firebase のイベントを検出しない場合はどうするか？

では、Firebase のイベント検出機能を使わないとどうなるか？

定期的に、データベースのデータやログインの情報を自分で取得して、画面を切り替える処理を作る必要があります。 処理自体はそれほど難しくありませんが、チェックする頻度や他の処理との兼ね合いを考えて実装するのは意外に手間もかかります。

Firebase の機能を使えば、イベントを検出して、必要な処理を呼び出すだけで済むので実装はとてもシンプルになります。

さらに便利な点は、Firebase のイベント検出はほぼリアルタイムでできる点です。

まとめ

Firebase のイベント検出機能はとても便利です。 これを利用すると、バランスの良いイベント検出ができるので、アプリやサービスをバランスよく実装できます。

イベントは、プログラムを書く側からはいつ起きるか予想しにくい物が多いので、バランスよく検出するのが難しくなります。 そうし処理を Firebase が引き受けてくれて、開発側は、その処理に集中することが可能になるので、より機能に集中できるのでより良いものを開発できます。