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

🙄ここ辺りはまだピンと来ていないので改めて深掘りしよう。

おわりに

今回のリポジトリ

とある書籍を読んでちんぷんかんぷんだったCloud Functionsの意味もこれで少しは理解できそうな気がする。

今回はfirestoreをざっとさらってみた。

realtime databaseよりwhereメソッドがあることで、使い勝手が良さそうな気がするので勉強がてらリプレイスしてみるのもありかもしれない。

備忘録

HTMLで引用タグを使う方法【初心者向け】

<blockquote>タグ&cite属性はちゃんと使いたいと思った。

コメントを残す