Slide 1

Slide 1 text

FirestoreΛ΋ͬͱखܰʹ ࢖͑Δfirestore-simple Λ࡞ͬͨ Firebase Meetup #4 @Kesin11

Slide 2

Slide 2 text

ࣗݾ঺հ • Twitter: @Kesin11 • Github: Kesin11 • ۀ຿Ͱ͸ςετͱ͔ࣗಈԽͱ͔ • ࠷ۙͷͰ͖͝ͱ • TypeScript࢖͍࢝ΊͨΒ࠷ߴͩͬͨ

Slide 3

Slide 3 text

Firestoreͷ͍͍ͱ͜Ζ • ʢRealtimeDBͱͷൺֱ͸͠ͳ͍Ͱ͢ʣ • ݸਓͰ؆୯ͳαʔϏεΛ࡞Δ༻్ͳΒແྉͰ΋DBͷ༰ྔ΍ύ ϑΥʔϚϯεΛؾʹ͠ͳ͍͍ͯ͘ • Herokuͷpostgresͷ1ສϨίʔυ੍ݶ͔Βͷ։์ʂʂ • αʔόʔ࣮૷ແ͠ͰDB΁ͷΞΫηε੍ݶ͕͔͚ΒΕΔ • ͋ΒΏΔ؀ڥ͔ΒΞΫηεͰ͖Δ • αʔόʔαΠυɺΫϥΠΞϯτΞϓϦɺCloud Function • ݴޠ͕มΘͬͯ΋API͕͍͍ͩͨಉ͡

Slide 4

Slide 4 text

ݴޠ͕มΘͬͯ΋API͕͍͍ͩͨಉ͡ • ٯʹݴ͑͹࢖͍ͮΒ͍ͱ͜Ζ΋͋Δ • js͔Β࢖͍΍͍͢Α͏ʹ
 ຖճࣅͨΑ͏ͳϥούʔΛ࡞Γͦ͏ͳ༧ײ • ൚༻Խͯ͠ϥΠϒϥϦʹ͠Α͏

Slide 5

Slide 5 text

firestore-simple • https://github.com/Kesin11/Firestore-simple • js/TypeScript

Slide 6

Slide 6 text

ಛ௃

Slide 7

Slide 7 text

1Πϯελϯε1ίϨΫγϣϯ • ຖճίϨΫγϣϯ΁ͷύεΛॻ͘ͷ͸ΊΜͲ͍͘͞ • ඒ͘͠ͳ͍ͷͰ݁ہࣗ෼ͰίϨΫγϣϯ͝ͱͷ ModelͳͲΛ࡞Δ͜ͱʹͳΔ const firestore = admin.firestore() const collectionPath = 'users' await firestore.collection(collectionPath).add({ name: 'alice', age: 20 }) await firestore.collection(collectionPath).add({ name: 'bob', age: 22 }) const user_documents = await firestore.collection(collectionPath).get() ૉͷFirestore

Slide 8

Slide 8 text

1Πϯελϯε1ίϨΫγϣϯ • ίϨΫγϣϯύεΛ౉ͯ͠ΠϯελϯεΛ࡞Δ • ຖճίϨΫγϣϯύεΛ౉͢ඞཁ͕ͳ͍ const firestore = admin.firestore() const collectionPath = 'users' const dao = new FirestoreSimple(firestore, collectionPath) await dao.add({ name: 'alice', age: 20}) await dao.add({ name: 'bob', age: 22 }) firestore-simple

Slide 9

Slide 9 text

ී௨ͷObjectΛฦ͢ • ϑΣονͨ͠υΩϡϝϯτͷத਎ɿ doc.data() • υΩϡϝϯτͷid: doc.id • όϥόϥͳͷͰ࢖͍উख͕͍·͍ͪ const doc = await firestore.collection(collectionPath).doc(id).get() const id = doc.id const name = doc.data().name ૉͷFirestore

Slide 10

Slide 10 text

ී௨ͷObjectΛฦ͢ • ϑΣονͷ݁Ռ͸ී௨ͷObjectΛฦ͢ • idͱͦΕҎ֎Ͱݺͼग़͠ํ͕ಉ͡ • αϯϓϧίʔυͰ͸doc.id, doc.name • add΍setͰ΋ObjectΛฦ͢ const doc = await dao.fetchDocument(id) // { id: 'XoZBjNpnj6QKCXSW4bu7', name: 'alice', age: 20 } const addedDoc = await dao.add({ name: ‘alice', age: 20}) // { id: 'XoZBjNpnj6QKCXSW4bu7', name: 'alice', age: 20 } firestore-simple

Slide 11

Slide 11 text

ී௨ͷArrayΛฦ͢ • ίϨΫγϣϯͷυΩϡϝϯτΛෳ਺ϑΣονͨ͠ ৔߹͸forEach͔͠࢖͑ͳ͍ • ໭Γ஋͸ArrayͰ͸ͳͯ͘QuerySnapshotͳͨΊ • map΍filter͕࢖͑ͳ͍ͷ͸͔ͳΓෆศ const userDocuments = await firestore.collection(collectionPath).get() const users = [] userDocuments.forEach((document) => { const data = document.data() users.push({ id: document.id, name: data.name, age: data.age }) }) ૉͷFirestore

Slide 12

Slide 12 text

ී௨ͷArrayΛฦ͢ • ෳ਺ϑΣονͨ͠৔߹͸ී௨ͷArrayΛฦ͢ • mapͳͲ͕࢖͑ΔͷͰίʔυ͕εοΩϦ͢Δ const users = await dao.fetchCollection() // [ { id: '3mBYA0uXw0lw6b883jgk', age: 20, name: 'alice' }, // { id: 'lE9SfP8f3H8w0Uwk0euQ', age: 22, name: 'bob' } ] const ids = users.map((user) => user.id) firestore-simple

Slide 13

Slide 13 text

ͱʹ͔͘js͔Βී௨ʹ
 ࢖͍΍͍͢Α͏ʹ͠·ͨ͠

Slide 14

Slide 14 text

ϝιουҰཡ • fetchDocument • fetchCollection • fetchByQueryʢwhere, order by, limitʣ • add • set • addOrSetʢfirestore-simpleΦϦδφϧʣ • delete • bulkSetʢbatchʹΑΔҰׅsetʣ • bulkDeleteʢbatchʹΑΔҰׅdeleteʣ

Slide 15

Slide 15 text

αϙʔτ͢Δ؀ڥ • TypeScript • firestore-simple͸TypeScript੡ • nodejsʢαʔόʔαΠυʣ • ReactNativeʢReactNativeFirebaseʣ • Cloud Function • ࢼͯ͠ͳ͍͚Ͳϒϥ΢β༻jsΫϥΠΞϯτͰ΋ಈ͘ ͔΋͠Εͳ͍Ͱ͢

Slide 16

Slide 16 text

αϙʔτ͍ͯ͠ͳ͍ػೳ • update • ߋ৽͸setͰे෼ͩͬͨͷͰ • τϥϯβΫγϣϯ • ࣮૷͕ෳࡶʹͳΓͦ͏ͩͬͨͷͰݟૹΓ • onSnapshot() • firestore-simpleͷΠϯελϯε಺ͷcollectionRefʹ͸ΞΫηεͰ͖ ΔͷͰɺ΍Ζ͏ͱࢥ͑͹ී௨ʹՄೳ • ͨͩ͠ObjectΛฦ͞ͳ͍ͷͰૉͷFirestoreͱಉ͡ڍಈ • কདྷࣗ෼͕࢖͏Մೳੑ͕͋ΔͷͰɺͦͷͱ͖ʹαϙʔτ͢Δ͔΋ʁ

Slide 17

Slide 17 text

·ͱΊ • FirestoreΛखܰʹ࢖͑Δfirestore-simpleΛ঺հ͠·ͨ͠ • jsͰFirestore࢖͏ਓʹ͸Φεεϝ • ΋ͬͱৄ͍͠࢖͍ํ͸ϒϩάͱREADMEࢀর • http://kesin.hatenablog.com/entry/2018/06/12/095020 • https://github.com/Kesin11/Firestore-simple • exampleʹαϯϓϧίʔυ͋Γ