最近、firebaseのデータベースサービスであるfirestoreを利用してサービスを作っています。簡単なfirestoreの操作がわかってきたので、アプリをサンプルにメモします。
Firestoreを使用するにあたって
Firestoreは、NoSQLデータベースであり、SQL文のJOIN や GROUP BY などの集計操作などの概念はおそらく存在しません。つまり、Firestore(NoSQLデータベース)では、アプリ要件に応じてクエリ無しか、単純なクエリで済むようなデータ構造として保持しておくことが定石であると思います。
firebaseプロジェクト設定
・index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ChatApp for firebase</title> </head> <body> <div class="main"> <!-- formの候補をなくすために、autocomplete="off"を追加 --> <form autocomplete="off"> <input type="text" id="message" placeholder="Message.."> <input type="submit" name="" value="firestoreへ"> </form> <ul id="messages"></ul> </div> <!-- CDNで使いたいfirebaseのサービスを指定 --> <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-auth.js"></script> <script src="js/main.js"></script> </body> </html>
・js/main.js
使用する、firebaseアカウントの「ウェブアプリに Firebase を追加」のスクリプトを追加
(() => { // エラーチェック 'use strict'; // ウェブアプリに Firebase を追加 const config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config); // ここから、この部分に処理を追記していきます })();
使用するインスタンスなどを定義
js/main.jsに以下のコードを追記します。
// firestoreインスタンスを定義 const db = firebase.firestore(); // dbのtimestampを設定 db.settings({ timestampsInSnapshots: true }); // messageインスタンスを定義 const message = document.getElementById('message'); // formインスタンスを定義 const form = document.querySelector('form'); // messageインスタンスを定義 const messages = document.getElementById('messages'); // firestoreのmessagesコレクションを定義 const collection = db.collection('messages');
formからmessageをfirestoreに保存できるようにする
js/main.jsに以下のコードを追記します。
// submit時イベント form.addEventListener('submit', e => { // ページ遷移をなくす e.preventDefault(); const val = message.value; // 空のmessage.valueの投稿を防止する if (val === "") { return; } // valueリセットする message.value = ''; message.focus(); console.log('valueリセット'); // messagesコレクションに追加 collection.add({ message: val, // timestampをカラムに追加 created: firebase.firestore.FieldValue.serverTimestamp() }) // 追加に成功した時の処理 .then(doc => { console.log(`${doc.id}というdocumentsで保存`); }) // エラー時の処理 .catch(error => { console.log('firestoreからエラー'); console.log(error); }); });
firestoreからデータを取得・表示
collectionで指定した、messageからtimestampで新しい順に取得しています。
// created順に取得してくる collection.orderBy('created').get().then(snapshot => { snapshot.forEach(change => { if (change.type === 'added') { const li = document.createElement('li'); li.textContent = change.doc.data().message; messages.appendChild(li); console.log('messageをliで表示'); } }) });
最終的なjs/main.jsのソースコード
(() => { // エラーチェック 'use strict'; // ウェブアプリに Firebase を追加 const config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config); const db = firebase.firestore(); db.settings({ timestampsInSnapshots: true }); const collection = db.collection('messages'); const message = document.getElementById('message'); const form = document.querySelector('form'); const messages = document.getElementById('messages'); collection.orderBy('created').get().then(snapshot => { snapshot.forEach(doc => { const li = document.createElement('li'); li.textContent = doc.data().message; messages.appendChild(li); }); }); form.addEventListener('submit', e => { e.preventDefault(); const val = message.value.; if (val === "") { return; } const li = document.createElement('li'); li.textContent = val; messages.appendChild(li); message.value = ''; collection.add({ message: val, created: firebase.firestore.FieldValue.serverTimestamp() }) .then(doc => { console.log(`${doc.id} added!`); }) .catch(error => { console.log(error); }); }); })();
以下の記事で、ユーザー認証を実装していきます。

Firebase Firestoreを利用したユーザー認証のあるチャットアプリを実装する(2/2)
前回作った、チャットアプリにユーザー認証を追加していきます。 index.htmlの編集 index.htmlにlogin、logoutボタンの追加とfirebase-authのCDNを読み込みを実装していきます。 &...