Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firestoreを実装してみた話
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
keinuma
January 05, 2021
64
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Firestoreを実装してみた話
keinuma
January 05, 2021
More Decks by keinuma
See All by keinuma
品質と新規開発のバランス / Quality and new development
keinuma
0
2.4k
Flutter or React Native
keinuma
1
140
GoによるGraphQLの実装
keinuma
0
3.4k
Atomic Design手法
keinuma
0
96
なぜAtomic Designが生まれたか
keinuma
0
93
Featured
See All Featured
The browser strikes back
jonoalderson
0
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
320
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Ethics towards AI in product and experience design
skipperchong
2
360
Building AI with AI
inesmontani
PRO
1
1.2k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
520
Darren the Foodie - Storyboard
khoart
PRO
3
3.9k
Google's AI Overviews - The New Search
badams
0
1.6k
The Limits of Empathy - UXLibs8
cassininazir
1
630
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Transcript
Firestore を してみた 2021/1/5 沼⽥ 1 / 16
⽇ すこと Firestore とは クライアントによるFirestore の使い Firestore を 慮したクライアントの 2
/ 16
Firestore とは NoSQL データベース 他のNoSQL に べてリレーション、クエリが柔 Web, Mobile 3
/ 16
Firestore のデータ構 4 / 16
Firestore のデータ構 Collection がRDB のテーブル Document がレコード Collection をネストしたSubcollection 作れる
5 / 16
Firestore の使い 照 Collection と 件を指 して 索 更 を
知できる ・更 Document 単 で 6 / 16
照 import * as firebase from 'firebase/app' const firestore =
firebase.firestore() const collection = firestore.collection('messages') collection .where('uids', 'array-contains', 'xxxx-xxx-xxx') .get() .then((document) => { const data = document.data() console.log(data) }) 7 / 16
照( 更を 知) const firestore = firebase.firestore() const collection =
firestore.collection('messages') const unsubscribe = collection .where('uids', 'array-contains', 'xxxx-xxx-xxx') .onSnapshot() .then((snapshot) => { const data = snapshot.data() console.log(data) }) window.addEventListener('unload', unsubscribe) 8 / 16
const firestore = firebase.firestore() const collection = firestore.collection('messages') collection.doc('xxxx-xxx-xxx').set({ text:
'hogehoge' }) 9 / 16
Firestore からデータ構 を する Collection はFirestore のデータとアプリのデータを できる データの は双
向で 義する 10 / 16
const converter = { toFirestore(messageModel) { return { ...messageModel, updatedAt:
firestore.Timestamp.fromDate(messageModel.updatedAt) } }, fromFirestore(snapshot) { const messageData = snapshot.data() return new MessageModel({ ...messageData, updatedAt: messageData.updatedAt.toDate() }) } } const convertCollection = collection.withConverter(converter) 11 / 16
Firestore の Firestore に するメソッドをラップしてClass Converter はアプリのデータ構 とFirestore 知って いるため
けて 12 / 16
13 / 16
Firestore のメソッドをラップ class FirestoreRepository { private readonly collection constructor(path, converter)
{ this.collection = db.collection(path) .withConverter(converter) } subscribeById(id, callback) { return this.collection.doc(id).onSnapshot( (snapshot) => callback(snapshot.data()) ) } } 14 / 16
ドメイン別に を 義 const converter = { toFirestore(messageModel) { ...
}, fromFirestore(snapshot) { ... } } const MessagesRepository = new FirestoreRepository( 'messages', converter ) 15 / 16
まとめ Firestore はデータ のオプション(Converter) がある Firestore のメソッドをRepository してConverter を け
て すると責 を 離できる 16 / 16