最近、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を読み込みを実装していきます。 &...
kapi-travel.com
2018.09.18