Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Firestoreを実装してみた話
Search
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
99
なぜAtomic Designが生まれたか
keinuma
0
93
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
55
8.3k
Rails Girls Zürich Keynote
gr2m
96
14k
Producing Creativity
orderedlist
PRO
348
41k
Building the Perfect Custom Keyboard
takai
2
870
Context Engineering - Making Every Token Count
addyosmani
9
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Utilizing Notion as your number one productivity tool
mfonobong
4
590
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7k
We Are The Robots
honzajavorek
0
370
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
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