はじめに
最近ずっとfirebaseを触ってます。笑
気付けばTweetに始まり、公開してないけどタイマーアプリ、続いて学習記録アプリ、スタジオ管理シートまで4つ作りました。
だいぶRealtime databaseの仕組みは理解してきたので、続いて今主流のfirestoreを使ってみようと思います。
✅参考
[Firebase] Firestoreで読み書きする (Web編)
ざっと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メソッド)
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);
})
}
以下の感じで一通り試せました◎
📝データモデルに関して
コレクションとドキュメントという概念がある。
関係としてはコレクション＞ドキュメントで、データをドキュメント(キーと値のペア)に保存し、コレクションの中にまとめるイメージ。
🙄データ型がサポートされていて、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メソッドがあることで、使い勝手が良さそうな気がするので勉強がてらリプレイスしてみるのもありかもしれない。
備忘録
<blockquote>タグ&cite属性はちゃんと使いたいと思った。
コメントを残す