firestoreのCRUD実装

はじめに
メイン
FirestoreのCRUD
オフライン機能
おわりに
備忘録

はじめに

最近ずっとfirebaseを触ってます。笑

気付けばTweetに始まり、公開してないけどタイマーアプリ、続いて学習記録アプリ、スタジオ管理シートまで4つ作りました。

だいぶRealtime databaseの仕組みは理解してきたので、続いて今主流のfirestoreを使ってみようと思います。

✅参考

[Firebase] Firestoreで読み書きする (Web編)

ざっとfirestoreの機能を把握するにはとてもありがたい記事。

メイン

✅初期設定

公式：Cloud Firestore を使ってみる

①サイト上からCloud Firestoreを作成

firestoreのテストモードはデフォだと30日間読み書きできるよう制限されています。

※以下、デフォルトのルール

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
          request.time < timestamp.date(2020, 7, 26);
    }
  }
}

🙄書き方がRealtimeDBと違います。

ロケーションの設定をしないといけないので日本である以下を選択。

asia-northeast1（東京）

②htmlにCDN記載

pugに追記

script(src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js")
script(src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js")
script(src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js")
script(src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js")

🙄firebase-databaseではなくfirebase-firestoreになってます。

③jsで初期化

// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

let db = firebase.firestore();

🙄db変数もfirebase.database()ではなくfirebase.firestore()になってます。

④アプリを登録

firebase init

今回は試しにCloud Functionsも選択してみました。

別途npm iがされ、functionsディレクトリが生成されます。

※深掘りは改めて機会を設けようと思います。

FirestoreのCRUD

※サイト上でテストデータ追加

取得(getメソッド)

let getDB = () => {
  console.log("getDB");
  db.collection("users").get().then((snapshot) => {
    console.log(snapshot)
    snapshot.forEach((doc) => {
      console.log(doc.id);
      console.log(doc.data());
    })
  })
}

一意のデータ取得(docメソッド)

let getDB = () => {
  console.log("getDB");
  db.collection("users").doc("1").get().then((snapshot) => {
    console.log(snapshot)
    console.log(snapshot.id);
    console.log(snapshot.data());
  })
}

※forEachしないのがポイントですね！

検索(whereメソッド)

let whereDB = () => {
  console.log("whereDB");
  db.collection("users").where("name","==","masaru").get().then((snapshot) => {
    snapshot.forEach((doc) => {
      console.log(doc.id);
      console.log(doc.data());
    })
  })
}

🙄whereメソッドあるのがfirestoreの強みかもしれない。

追加(addメソッド)

let addDB = () => {
  console.log("addDB");
  db.collection("users").add({
    name: "ちょび",
    id:"guitar"
  }).then((docRef) => {
    console.log(docRef.id);
  })
  .catch((error) => {
    console.log(error);
  })
}

以下の感じで追加を確認。キーが自動生成されますね。

※追記

ドキュメント名を指定して値を追加したい場合は.doc().set()を使う！

参考：Firestoreにデータを保存(追加)、更新、削除、リアルタイムでのリッスンをする方法

更新(updateメソッド)

公式：Cloud Firestore にデータを追加する

let updateDB = () => {
  console.log("updateDB");
  db.collection("users").doc("1").set({
    name: "ちょび",
  }).then(() => {
    console.log("更新成功");
  })
  .catch((error) => {
    console.error("Error writing document: ", error);
  })
}

collectionに(“user/1”)と記載したくなるけどこれはエラー✖

doc()メソッドで指定しないといけない。

削除(deleteメソッド)

let deleteDB = () => {
  console.log("deleteDB");
  db.collection("users").doc("1").delete().then(() => {
    console.log("削除成功");
  })
  .catch((error) => {
    console.error("Error writing document: ", error);
  })
}

以下の感じで一通り試せました◎

📝データモデルに関して

公式：Cloud Firestore データモデル

コレクションとドキュメントという概念がある。

関係としてはコレクション＞ドキュメントで、データをドキュメント(キーと値のペア)に保存し、コレクションの中にまとめるイメージ。

🙄データ型がサポートされていて、Arrayもありますね！！

オフライン機能

※追記です

公式：オフラインでデータにアクセスする

ウェブの場合はChrome、Safari、Firefoxのみサポート対象で、オフラインの永続性はデフォルトで無効になっているとのこと。

realtime databaseでは以下のコードを記載していたが。

let presenceRef = firebase.database().ref("disconnectmessage");
presenceRef.onDisconnect().set("I disconnected!");

以下のコードに修正する。

firestoreではenablePersistenceメソッドを使うとのこと。

firebase.firestore().enablePersistence()
  .catch(function(err) {
      if (err.code == 'failed-precondition') {
          // Multiple tabs open, persistence can only be enabled
          // in one tab at a a time.
          // ...
      } else if (err.code == 'unimplemented') {
          // The current browser does not support all of the
          // features required to enable persistence
          // ...
      }
  });
// Subsequent queries will use persistence, if it was enabled successfully