2020/06/26 Firebase Realtime Meetup https://firebase-community.connpass.com/event/175985/
TypeScriptから使いやすいFirestore-simpleを紹介します(2020年版)Firebase Realtime Meetup (2020/06/26)@Kesin11
View Slide
⾃⼰紹介@Kesin11 (GitHub/Twitter)本業組織横断でテストやCI/CDの調査・サポートなど（おそらく普通よりは）CIマニアの気があるFirebaseはプライベート開発がメイン2019年のアドベントカレンダーでエミュレータを使ったテストの書き⽅を紹介Firebase Emulator Suiteをフル活⽤してTDDで開発しよう2
はじめにこの発表はFirestoreの機能は⼀通り知っている前提で話します質問はYouTubeのコメントにお願いします！発表中に答えきれなかったらTwitterの#FJUGあたりで回答するかも？放送後はFJUGのSlackで質問して頂ければ回答できます3
TypeScriptでFirestoreのコード書くときどんな感じのコードになりますか？
多分こんな感じ？type User = {name: string,age: number,}const alice: User = { name: 'alice', age: 20 }const docRef = await firestore.collection('users').add(alice)const snapshot = await firestore.collection('users').doc(docRef.id).get()const user = snapshot.data() as User //ここでキャストして型を付ける毎回collectionを書くのが⾯倒くさい毎回data()を書くのが⾯倒くさい毎回キャストで型を付けるのが⾯倒くさい気軽にキャストしていくのは型ミスに繋がる5
⾃分でUserCollectionクラスを作ろうclass UserCollection {collection: CollectionReferenceconstructor (firestore: Firestore) {this.collection = firestore.collection('users')}async fetch (userId: string) {const snapshot = await this.collection.doc(userId).get()return snapshot.data() as User}}const userCollection = new UserCollection(firestore)// id='alice'を渡すだけconst user = await userCollection.fetch('alice')6
⾃分でUserCollectionクラスを作ろう初期の頃に⾃分が取っていたアプローチcollectionやdata()を毎回書かなくて済むキャストする場所が集約されるコレクション毎に似たようなクラスを作る必要がある？汎⽤化したクラスを作れば全コレクションで使いまわせそうFirebaseプロジェクト毎に汎⽤化したクラスをコピペで持ってくる？-> ライブラリ化しよう7
Firestore-simplehttps://github.com/Kesin11/Firestore-simple
Firestore-simpleの思想. 冗⻑なコードを省く. 強⼒な型推論と補完. 素のFirestoreのAPIから乖離しすぎない. 間違いを起こしやすい機能へのサポート9
1. 冗⻑なコードを省く
サンプルケース：FirestoreとTypeScript側でキー名や型が微妙に違う場合Firestore側/users : { name: string, age: number, created_at: Timestamp }TypeScript側User: { name: string, age: number, createdAt: Date }こういうケース、たまにありませんか？（むしろ皆さんが普段どうやっているのか知りたい）Firestore-simpleはこういう処理を上⼿く実現できます11
素のFirestoreで書く場合type User = {name: string,age: number,createdAt: Date, // jsのDate型で扱いたい}const snapshot = await firestore.collection('users').doc(docRef.id).get()const data = snapshot.data()if (!data) returnconst user = {name: data.name,age: data.age,createdAt: data.created_at.toDate() //キー名を変換しつつ、Date型に変換} as User //型を揃えたのでここでキャスト12
Firestore-simpleで書いた場合ライブコーディングします
Firestore-simpleで書いた場合type User = {// idは必須プロパティid: string, name: string, age: number,createdAt: Date,}type UserFirestore = {name: string, age: number,created_at: Date,}const firestoreSimple = new FirestoreSimple(firestore)const userCollection = firestoreSimple.collection({path: 'users',decode: (doc) => {return {id: doc.id,name: doc.name,age: doc.age,createdAt: doc.created_at.toDate()}}})const user = await userCollection.fetch('alice')// => { id: 'alice', name: 'alice',// => age: 20, createdAt: 2020-06-20T13:12:54.816Z }14
Firestore-simpleで書いた場合collectionのpathを指定するのは⼀度だけfetchした結果にUser型が⾃動で付くFirestore -> js での変換処理(decode)を書くのも⼀度だけdecode: (doc) => {}の中で docも型推論されているので補完が効く（今回は詳しい説明は省略）逆⽅向のjs -> Firestoreの変換は encode: (obj) => {}（今回は省略）型に idを必須にしているのは data()をなくしたゆえの制約idと他のプロパティを同じようにアクセス可能にするため先の例: user.id（FirestoreのdocumentId）, user.name, user.age15
その他よく使うと思われる機能のショートハンドfetchAllbulkAdd, bulkSet, bulkDeletebatchによる⼀括更新処理のラッパー// batchでsetawait userCollection.bulkSet([{ id: 'alice', name: 'alice', age: 20 },{ id: 'bob', name: 'bob', age: 22 },])// colletionの全ドキュメントを取得const users: User[] = await userCollection.fetchAll()// batchでdeleteawait userCollection.bulkDelete(users.map((user) => user.id))16
2. 強⼒な型推論と補完
現代ではwithConverterを使うという⼿があるdata()の結果に型が付く。Firestore <-> jsの変換も可能Firestore-simpleの開発を始めた2018年頃にはなかったconst userConverter = {toFirestore (user: User): FirebaseFirestore.DocumentData {return {name: user.name,age: user.age,created_at: user.createdAt}},fromFirestore ( data: FirebaseFirestore.DocumentData): User {return {name: data.name,age: data.age,createdAt: data.created_at.toDate()}}}const userCollection = firestore.collection('users').withConverter(userConverter)await userCollection.doc('alice').set({ name: 'alice', age: 20, createdAt: new Date() })const snapshot = await userCollection.doc('alice').get()const user: User | undefined = snapshot.data()18
Firestoreを扱う上でバグが起きやすいのは？（個⼈的には）キー名のtypoという凡ミスが多いdocRef.update({ nama: 'bob' })collection('user').where('aga', '>=', '20')これらはwithConverterでは防ぐことができないwithConverterを通したとしても updateや whereはキー名までチェックしてくれない19
Firestore-simpleでは型から抽出されるキー名で補完が可能ライブコーディングでお⾒せしますSpeakerDeckで⾒てる⽅は過去記事のGIFアニメをどうぞTypeScriptからFirestoreを使いやすくするfirestore-simple v4をリリースしました
3. 素のFirestoreのAPIから乖離しすぎない
ActiveRecord⾵にはしない//擬似コードですconst user = new Useruser.name = 'alice'user.age = 20await user.save() //ここでDBに書き込まれるconst alice = await User.findBy({ name: 'alice') // DBからデータ取得素のFirestoreと使い⽅がかなり異なる何かエラーが起きた場合にユーザーがデバッグするのが⼤変になりそうFirestoreのアップデートに追従して機能追加していくのも⼤変そう22
外しやすいライブラリを⽬指すあくまでFirestoreの補助使い⽅を⼤きく変えるライブラリは外しにくくなる外しにくい=採⽤しにくい個⼈的なポリシーjsでまだドラフト中の新しい構⽂は使わない（デコレータとか）そもそもFirestoreがもっと便利になれば⾃作して⾃分が使う理由もなくなるwithConverterが来たときは開発をやめるか⼀瞬悩みましたが、⾃分にとってはまだ代替に⾄るものではなかった23
4. 間違いを起こしやすい機能へのサポートbatchtransaction
batchconst userCollectionRef = firestore.collection('users')const batch = firestore.batch()batch.set(userCollectionRef.doc('alice'), { name: 'alice', age: 20 })batch.set(userCollectionRef.doc('bob'), { name: 'bob', age: 22 })await batch.commit()個⼈的に気に⼊らない点transactionと挙動が似ているのに、runTransactionとAPIが全く異なるset, update, deleteの使い⽅が普通と異なるaddが存在しないdoc()とidを空にすると裏でランダム値を⼊れてくれるのでaddは実現可能なぜ⽤意してくれない・・・25
Firestore-simpleによるbatchのサポート単に配列を⼀括処理したい場合は bulkAdd, bulkSet, bulkdDeleterunTransactionと同じように書ける runBatchも⽤意await firestoreSimple.runBatch(async (_batch) => {await userCollection.set({ id: 'alice', name: 'alice', age: 20 })await userCollection.set({ id: 'bob', name: 'bob', age: 20 })await userCollection.add({ name: 'random', age: 20 })}) // <- runBatchを抜けるタイミングで⾃動的にbatch.commit()されるrunBatchの中ではsetなどはすべて⾃動的にbatch内処理として扱われるうっかりbatch外処理として実⾏してしまうミスは起きない26
Firestore-simpleによるtransactionのサポートrunTransactionもrunBatchと同じ改良がされているadd, set, update, deleteは⾃動的にtransaction処理として扱われるtransactionはgetも同様⼀部の処理だけtransaction外で⾏ってしまうという危険なミスは起きないawait firestoreSimple.runTransaction(async (_tx) => {await userCollection.fetch('alice')await userCollection.fetch('bob')await userCollection.set({ id: 'alice', name: 'alice', age: 20 })await userCollection.set({ id: 'bob', name: 'bob', age: 22 })}) // <- runTransactionを抜けるタイミングで⾃動的にtransaction.commit()される27
Firestoreの新しめの機能もカバーしてますFieldValue.serverTimestampFieldValue.incrementCollectionGroupwhere INなどFirestore EmulatorFirestore-simple⾃体のテストがemulatorで実⾏されているのでバッチリ
最近のv7のアップデート
最近のv7のアップデートWeb SDKにも対応しました！v6以前とはインストール⽅法から変わりましたnpm i firestore-simpleはDEPRECATEDAdmin SDK, Cloud Function⽤npm i @firestore-simple/adminWeb SDK⽤npm i @firestore-simple/web30
Firestore-simpleのターゲットユーザーTypeScriptで型をちゃんと付けたい使い⽅が素のFirestoreから⼤きく変わらない⽅が好みUIフレームワークとは疎結合にしたいFirestore層のテストを書きたいFirestore-simple⾃体のテストコードをぜひ参考に31
今後の予定Web SDKの⼀部機能のサポートができていないので対応したいgetやonSnapshotなどWeb SDKのみ存在するオプションにまだ未対応APIドキュメント⽣成TypeScriptで流⾏りのドキュメント⽣成ツールを知りたいFirestoreに新機能が来たら対応したい今年はIOがなかったのでいつ来るのだろう32
付録1ドキュメントhttps://github.com/Kesin11/Firestore-simple/blob/master/README.mdサンプルコード(AdminとWebで別々にあります)https://github.com/Kesin11/Firestore-simple/tree/master/packages/admin/examplehttps://github.com/Kesin11/Firestore-simple/tree/master/packages/web/example
付録2過去記事v7をリリースしたので改めてfirestore-simpleを紹介しますfirestore-simple v5をリリースしましたTypeScriptからFirestoreを使いやすくするfirestore-simple v4をリリースしましたFirestoreをもっと⼿軽に使えるfirestore-simpleがバージョン2になりましたFirestoreをもっと⼿軽に使えるfirestore-simpleを作った
kesin11
dalance
doggy
jmatsu
pyama86
dalinaum
ojun9
ivargrimstad
ryu_hu03
nsuz
ogijun2018
ufoo68
zakiwarfel
chriscoyier
trishagee
tmm1
mraible
wjessup
jonyablonski
bcantrill
kevinliebholz
tammielis
chrisshort
rmw