[Firestore]チュートリアルを試してみた（Web編） #Firebase

概要

Firebase公式サイトにあるCloud Firestore データベースを作成するを試してみた記録です
WebからFirestoreへの書き込み/読み取りを実装してみます
チュートリアルの内容に加えてFirestoreの更新をリアルタイムに検知する手順まで紹介します

Firestoreのデータベースを作成する

Firebaseのコンソールで操作していきます
ログインしたら「プロジェクトを追加」からプロジェクトを作成します
プロジェクトの作成には少し時間がかかります
作成できたらサイドメニューの「データベース」を選択し「データベースを作成」から作成していきます
WebでFirestoreにアクセスする場合はテストモードを選択します

作成が完了したら準備OKです

APIキーの取得

FirestoreにアクセスするためのAPIキーの情報を控えておく
- 歯車から「プロジェクトの設定」->「全般」

この記事で載せているAPIキーはすでに無効化されているものです
本来は他者に漏らすことがないように管理すべきものです
不用意にGitHubなどにあげてしまわないよう注意してください

WebからFirestoreにアクセスする

適当なディレクトリを作成しセットアップ

mkdir firestore-sample-web
cd firestore-sample-web

index.htmlを作成する

index.html

<h1>Hello</h1>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-firestore.js"></script>
<script>
  firebase.initializeApp({
    // 控えておいたapiキーとプロジェクトIDを設定する
    apiKey: 'AIzaSyDzPsKbL8V_wDI5FIeqIhE4t6RN25cjgCs',
    projectId: 'firestore-sample-1bd28',
  });

  const db = firebase.firestore();
</script>

ブラウザで表示しコンソールにエラーがでていなければひとまずOK
データ登録処理を追加
- ボタンをクリックしたら追加処理をを実行するようにする

index.html

<h1>Hello</h1>
<button id="add">追加</button>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-firestore.js"></script>
<script>
  firebase.initializeApp({
    apiKey: 'AIzaSyDzPsKbL8V_wDI5FIeqIhE4t6RN25cjgCs',
    projectId: 'firestore-sample-1bd28',
  });

  const db = firebase.firestore();

  document.querySelector('#add').addEventListener('click', function() {
    db.collection('users')
      .add({
        first: 'Ada',
        last: 'Lovelace',
        born: 1815,
      })
      .then(function(docRef) {
        console.log('Document written with ID: ', docRef.id);
      })
      .catch(function(error) {
        console.error('Error adding document: ', error);
      });
  });
</script>

成功すればconsoleにログが出る
Firestoreにデータが追加されたことも確認できる
さらに追加してみる

index.html

<!-- 省略 -->
<script>
  // 省略
  document.querySelector('#add').addEventListener('click', function() {
    db.collection('users')
      .add({
        first: 'Ada',
        last: 'Lovelace',
        born: 1815,
      })
      .then(function(docRef) {
        console.log('Document written with ID: ', docRef.id);
      })
      .catch(function(error) {
        console.error('Error adding document: ', error);
      });

    // Add a second document with a generated ID.
    db.collection('users')
      .add({
        first: 'Alan',
        middle: 'Mathison',
        last: 'Turing',
        born: 1912,
      })
      .then(function(docRef) {
        console.log('Document written with ID: ', docRef.id);
      })
      .catch(function(error) {
        console.error('Error adding document: ', error);
      });
  });
</script>

追加ボタンを押すとデータが追加される
次にデータを取得する処理を追加する
- 取得ボタンを押すとデータ一覧が表示されるようにする

index.html

<h1>Hello</h1>
<button id="add">追加</button>
<button id="get">取得</button>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-firestore.js"></script>
<script><script>
  // 省略
  document.querySelector('#get').addEventListener('click', function() {
    db.collection('users')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          const p = document.createElement('p');
          const result = document.createTextNode(
            `${doc.id} => ${JSON.stringify(doc.data())}`,
          );
          p.appendChild(result);
          document.body.appendChild(p);
        });
      });
  });
</script>

取得ボタンを押すとFirestoreに保存されている情報を表示できる

データの追加をリアルタイムで検知する

Firestoreへデータが追加されたらリアルタイムに最新データを取得するサンプル
新しくreceive.htmlを作成する

receive.html

<div id="result"></div>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-firestore.js"></script>
<script>
  firebase.initializeApp({
    apiKey: 'AIzaSyDzPsKbL8V_wDI5FIeqIhE4t6RN25cjgCs',
    projectId: 'firestore-sample-1bd28',
  });

  const db = firebase.firestore();

  // FirestoreをSubscribeし更新があると処理が実行される
  db.collection('users').onSnapshot(querySnapshot => {
    // 表示内容を全て削除
    document.querySelector('#result').innerHTML = '';

    // デフォルトではコレクションの内容が全件渡される
    querySnapshot.forEach(doc => {
      const p = document.createElement('p');
      const result = document.createTextNode(
        `${doc.id} => ${JSON.stringify(doc.data())}`,
      );
      p.appendChild(result);
      document.querySelector('#result').appendChild(p);
    });
  });
</script>

これまで作成したきたindex.htmlの画面で追加ボタンを押すと、receive.htmlの画面は何もさわっていないのにリアルタイムにデータが表示されていく
このようなリアルタイムに情報を取得できるのはFirestoreの特徴的なところでもあるのでうまく活用すると実装の幅が広がりそう