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()); }); });