Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firestoreを実装してみた話

keinuma
January 05, 2021
40

 Firestoreを実装してみた話

keinuma

January 05, 2021
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Firestore
    のデータ構
    4 / 16

    View full-size slide

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

    View full-size slide

  6. Firestore
    の使い

    Collection
    と 件を指 して 索
    更 を 知できる
    ・更
    Document
    単 で
    6 / 16

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  12. Firestore

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

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

    View full-size slide