Firebase Firestoreを利用したユーザー認証のあるチャットアプリを実装する(1/2)

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