勉強会アプリを Firebase と Vue.js を使って作成しました。 作成し、運用するうえで工夫したことや直面した課題を共有します。
アプリ作成と運用から学ぶFirebase と Vue.js
View Slide
What is it ?▰ アプリを作成 & 運用▰ Firebase と Vue.js を使用▰ 実際どうだったか▰ 今、困ってること2
自己紹介加納 悠史 カノウユウジ@YKanoh653株式会社 ラクス業務ではPHPer趣味はダイビング
社内勉強会やってますか?
弊社の勉強会● ビアバッシュ○ 月一開催○ 新人からベテランまで参加6
弊社の勉強会● ビアバッシュ○ 月一開催○ 新人からベテランまで参加7発表の評価が聞きたい改善点が知りたいもっと楽しみたい
ビアバッシュ専用Webアプリ
ビアバッシュ専用WebアプリSPA の Web アプリ9❏ Vuetify❏ Vuex❏ VuexfireCloud FirestoreAuthenticationCloud Storage
Spark プランを使用● 無料プラン● Firestore の制限○ 読取り回数:5万回/日10
11できること● 発表予定の確認● 発表へのコメント● スタンプでのリアクション
実装での工夫スタンプ連打 対策● FireStoreの書込み速度 → 1ドキュメントに 1回/秒● 複数人による同時書込みに弱い12
分散カウンタ 導入● 複数ドキュメントを用意● カウント数はランダムに保存● 総カウント数は合計値⇒ 書込み速度向上!134回6回5回15回
が
スタンプ連打 対策弱点分散カウンタ 導入⇒ 1回の更新で3回の読取りが発生154回6回5回3つ読取り
~再掲~Spark プランを使用● 無料プラン● Firestore の制限○ 読取り回数:5万回/日16
17Firestore 読み取り数(初運用時)
18開始前64回開始30分3.7万回開始150分5.1万回!Firestore 読み取り数(初運用時)
19開始30分3.7万回開始150分5.1万回!Firestore 読み取り数(初運用時)
FireStore 読取り制限Firebase料金プラン● 無料プラン○ 読取り回数:5万回/日 ⇒ すぐ突破してしまう20
読み取り数削減案● 分散カウンタ廃止● キャッシュを活用● 取得ドキュメントを絞るノウハウがあれば教えてほしいです ...つか有料プランを使え21
store.js の扱いVuex と VuexFire● store.js でデータを管理● 変数とコレクションを紐づけるイメージ● Firebase とのやり取りは store.jsに集約22VuexFireVuex
問題点store.js の肥大化コレクション追加 = 関数追加!● コンフリクト祭り● 可読性が低下...23
何が問題なのか?❏ 分割を考えるべきなのか?❏ Vuexで大量のデータ管理が問題?❏ クライアントで大量のデータを保持させる?24
25まとめ● 同時書込み数向上 → 分散カウンタ○ ただし読取り数などに注意が必要○ 多少なら単一ドキュメントでも可?● Vue.js と FireStore○ Vuex と Firebase の連動は検討が必要