VueとFirebaseの公式ドキュメントを読みながらアプリをつくる（データベースの利用） #Firebase

前回のつづき。
https://firebase.google.com/docs/firestore/quickstartを見ながら。

データベースは"Realtime Database"と"Cloud Firestore"があって、後者が最新なのだろう。
よってCloud Firestoreを利用する。

Firestoreデータベースの作成、初期化

Firebaseコンソールより、DatabaseからCloud Firestoreの「データベースの作成」を選択。
セキュリティルールは「テストモードで開始」を選んだ。

この時点では「コレクションを追加」とあるだけで、とくにテーブルやデータのようなものは作成されていない。

Firestoreのインスタンスを生成（初期化）するには、apiKey, authDomain, projectIdが必要なよう。
これらはすでにconfigに定義しているので、下記のソースをpublic/index.htmlにするだけで初期化はOK。

var db = firebase.firestore();

データの追加

スタートガイドによると、Firestoreの仕様は次の通り。NoSQLに明るい人であれば簡単なのかな。
RDB脳の自分にはサッパリだけれど、まずは「コレクション」が「ドキュメント」たちを持ち、「ドキュメント」がデータたちを持つ、と考えればよさそう。

Cloud Firestore はデータをドキュメントに保存します。ドキュメントはコレクションに保存されます。データを初めてドキュメントに追加すると、Cloud Firestore によってコレクションとドキュメントが暗黙的に作成されます。コレクションやドキュメントを明示的に作成する必要はありません。

なおドキュメントはコレクション（サブコレクション）を持つことができて、サブコレクション内のドキュメントがまたサブコレクションを持つことができる。

応用はさておき、まずは使ってみよう。
サンプルコードをさきほどのソースの下に挿入する。

db.collection("users").add({
    first: "Ada",
    last: "Lovelace",
    born: 1815
})
.then(function(docRef) {
    console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
    console.error("Error adding document: ", error);
});

この時点でfirebase serveしてアクセスすると、上記の処理がはたらく。
つまりusersコレクションにドキュメントが生成される。
実際にFirebaseコンソールのDatabaseを見てみると、usersコレクションとドキュメントが（暗黙的に）作成されていることがわかる。

同じように、もう一方のサンプルコードを挿入する。

db.collection("users").add({
    first: "Alan",
    middle: "Mathison",
    last: "Turing",
    born: 1912
})
.then(function(docRef) {
    console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
    console.error("Error adding document: ", error);
});

これでindex.htmlにアクセスすると、今度は上記のデータの入ったドキュメントがusersコレクションに追加される。

※
なお一つ前に登録されたデータ（ドキュメント）も新規追加されているはず。
これはドキュメント自体の名前（ドキュメントID）を指定していないので、同じデータでも別のドキュメントIDが採番されているため。

データの読み込み

同様にサンプルコードを更に挿入してみる。

db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

これを確認してブラウザの開発者モードでコンソールを見てみると、実際にログが書き出されていることがわかる。

「データの追加の管理」のデータモデルや「データのクエリ」のデータを取得するの説明を読むと、ドキュメントIDを指定して読む方法も書いてあった。

var docRef = db.collection('users').doc('{自動生成されたドキュメントID}');
docRef.get().then(function(doc) {
  if (doc.exists) {
    console.log("Document data: " + doc.data());
  } else {
    console.log("No such document!");
  }
}).catch(function(error) {
  console.log("Error getting document:", error);
})

あとはスタートガイドにある動画を視聴したりすれば、簡単な読み書きはできるようになりそう。