Firestoreを実装してみた話

Transcript

1. Firestore
   を してみた
   2021/1/5
   沼⽥
   1 / 16
   

   View Slide

2. ⽇ すこと
   Firestore
   とは
   クライアントによるFirestore
   の使い
   Firestore
   を 慮したクライアントの
   2 / 16
   

   View Slide

3. Firestore
   とは
   NoSQL
   データベース
   他のNoSQL
   に べてリレーション、クエリが柔
   Web, Mobile
   3 / 16
   

   View Slide

4. Firestore
   のデータ構
   4 / 16
   

   View Slide

5. Firestore
   のデータ構
   Collection
   がRDB
   のテーブル
   Document
   がレコード
   Collection
   をネストしたSubcollection
   作れる
   5 / 16
   

   View Slide

6. Firestore
   の使い
   照
   Collection
   と 件を指 して 索
   更 を 知できる
   ・更
   Document
   単 で
   6 / 16
   

   View Slide

7. 照
   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
   

   View Slide

8. 照(
   更を 知)
   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
   

   View Slide

9. const firestore = firebase.firestore()
   const collection = firestore.collection('messages')
   collection.doc('xxxx-xxx-xxx').set({
   text: 'hogehoge'
   })
   9 / 16
   

   View Slide

10. Firestore
    からデータ構 を する
    Collection
    はFirestore
    のデータとアプリのデータを
    できる
    データの は双 向で 義する
    10 / 16
    

    View Slide

11. 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
    

    View Slide

12. Firestore
    の
    Firestore
    に するメソッドをラップしてClass
    Converter
    はアプリのデータ構 とFirestore
    知って
    いるため けて
    12 / 16
    

    View Slide

13. 13 / 16
    

    View Slide

14. 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
    

    View Slide

15. ドメイン別に を 義
    const converter = {
    toFirestore(messageModel) { ... },
    fromFirestore(snapshot) { ... }
    }
    const MessagesRepository = new FirestoreRepository(
    'messages',
    converter
    )
    15 / 16
    

    View Slide

16. まとめ
    Firestore
    はデータ のオプション(Converter)
    がある
    Firestore
    のメソッドをRepository
    してConverter
    を け
    て すると責 を 離できる
    16 / 16
    

    View Slide