Firebase Realtime DatabaseとCloud Firestoreの設定方法と使い方

Realtime Databaseとは

Firebase Realtime DatabaseとはクラウドでホスティングされるJavaScriptで読み書きが可能なデータベース。

データはJSONとして保存され、接続されているすべてのクライアントとリアルタイムで同期可能。

Cloud Firestoreとは

Firebaseの新しいデータベース。Realtime Databaseより簡単に設定が可能。

Cloud FirestoreはRealtime Databaseより機能性、パフォーマンス、スケーラビリティが優れているので特に理由がなければCloud Firestoreのほうを使用したほうが良い。

ちなみにCloud FirestoreもRealtime Databaseと同様にリアルタイムで同期可能だ。

Realtime DatabaseとCloud FirestoreはSQLを使用していないためテーブルや行などのSQLの知識は必要ない。

Realtime Databaseの読み書き設定

まずはFirebaseでログイン認証機能の設定とfirebase deployを使用して読み書きするページを用意しておく。※
※以降は匿名ログイン認証機能を前提として説明。

まずDatabaseのルールのページでログインしている人だけが読み書きできるようルールを設定。

{
  "rules": {
    "chat": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
  }
}

あとはWebページのほうのJavaScriptに以下のようにfirebase.database().ref('chat')のthenまたはsetを使用すればデータベースを読み書きできるようになる。

<p id="uid">Loading...</p>
<button id="login" class="hidden">login</button>
<button id="logout" class="hidden">logout</button>
<form method="post" class="hidden">
  <input type="text" id="t"> <button id="b">送信</button>
</form>
<ul id="chat"></ul>

// Initialize Firebase
const config = {
  // 省略
};
firebase.initializeApp(config);

const auth = firebase.auth()
const login = document.getElementById('login')
const logout = document.getElementById('logout')
const chat = document.getElementById('chat')
const form = document.querySelector('form')
let userData = null
let chatData = []
const t = document.getElementById('t')
const b = document.getElementById('b')
login.addEventListener('click', () => auth.signInAnonymously())
logout.addEventListener('click', () => auth.signOut())
auth.onAuthStateChanged(user => {
  userData = user
  if (userData) {
    login.classList.add('hidden')
    logout.classList.remove('hidden')
    form.classList.remove('hidden')
    uid.textContent = `${userData.uid}でログイン中`

    // database read
    firebase
      .database()
      .ref('chat')
      .once('value')
      .then(result => {
        if (result.val()) {
          chatData = result.val()
          chatData.forEach(v => {
            const li = document.createElement('li')
            const liText = document.createTextNode(`${v.uid} ${v.value}`)
            li.appendChild(liText)
            chat.appendChild(li)
          })
        }
      })

    // database write
    b.addEventListener('click', e => {
      const v = t.value.trim()
      if (v) {
        chatData.push({uid: userData.uid, value: v})
        firebase
          .database()
          .ref('chat')
          .set(chatData)
        const li = document.createElement('li')
        const liText = document.createTextNode(`${userData.uid} ${v}`)
        li.appendChild(liText)
        chat.appendChild(li)
        t.value = ''
      }
      e.preventDefault()
    })
  } else {
    login.classList.remove('hidden')
    logout.classList.add('hidden')
    form.classList.add('hidden')
    uid.textContent = 'ログアウト中'
  }
})

Cloud Firestoreの読み書き設定

まずCloud Firestoreはfirebase-firestore.jsの読み込みが必要なため追記する。(firebase.jsだけでは動作しない)

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>

次に書き込み可能にするためにwrite: if falseをtrueに変更

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

あとはfirebase.firestore()をdb定数に入れてdb.collection('users').addと記述するだけで書き込める。

// database write
const db = firebase.firestore()
db.collection('users').add({
  first: 'Kenji',
  last: 'Iwabe',
  born: 1987
})
.then(ref => console.log('id:', ref.id))
.catch(e => console.error('Error:', e))

逆に読み込みの場合はdb.collection('users').get().thenを使用して以下のように記述するだけだ。

const db = firebase.firestore()
db.collection('users').get().then(snap => {
  snap.forEach(doc => {
    console.log(doc.id);
    console.log(doc.data());
  });
});