アプリ作成と運用から学ぶ Firebase と Vue.js

B3a78cfbf06ca9ee860536c6d1de5e7f?s=47 Y-KANOH
August 21, 2019

アプリ作成と運用から学ぶ Firebase と Vue.js

勉強会アプリを Firebase と Vue.js を使って作成しました。
作成し、運用するうえで工夫したことや直面した課題を共有します。

B3a78cfbf06ca9ee860536c6d1de5e7f?s=128

Y-KANOH

August 21, 2019
Tweet

Transcript

  1. アプリ作成と運用から学ぶ Firebase と Vue.js

  2. What is it ? ▰ アプリを作成 & 運用 ▰ Firebase

    と Vue.js を使用 ▰ 実際どうだったか ▰ 今、困ってること 2
  3. 自己紹介 加納 悠史 カノウユウジ @YKanoh65 3 株式会社 ラクス 業務ではPHPer 趣味はダイビング

  4. None
  5. 社内勉強会 やってますか?

  6. 弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 6

  7. 弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 7 発表の評価が聞きたい 改善点が知りたい

    もっと楽しみたい
  8. ビアバッシュ専用 Webアプリ

  9. ビアバッシュ専用 Webアプリ SPA の Web アプリ 9 ❏ Vuetify ❏

    Vuex ❏ Vuexfire Cloud Firestore Authentication Cloud Storage
  10. Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日 10

  11. 11 できること • 発表予定の確認 • 発表へのコメント • スタンプでのリアクション

  12. 実装での工夫 スタンプ連打 対策 • FireStoreの書込み速度  → 1ドキュメントに 1回/秒 • 複数人による同時書込みに弱い

    12
  13. 分散カウンタ 導入 • 複数ドキュメントを用意 • カウント数はランダムに保存 • 総カウント数は合計値 ⇒ 書込み速度向上!

    13 4回 6回 5回 15回
  14. スタンプ連打 対策 弱点 分散カウンタ 導入 ⇒ 1回の更新で3回の読取りが発生 15 4回 6回

    5回 3つ 読取り
  15. ~再掲~ Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日

    16
  16. 17 Firestore 読み取り数(初運用時)

  17. 18 開始前 64回 開始30分 3.7万回 開始150分 5.1万回! Firestore 読み取り数(初運用時)

  18. 19 開始30分 3.7万回 開始150分 5.1万回! Firestore 読み取り数(初運用時)

  19. FireStore 読取り制限 Firebase料金プラン • 無料プラン ◦ 読取り回数:5万回/日  ⇒ すぐ突破してしまう 20

  20. 読み取り数削減案 • 分散カウンタ廃止 • キャッシュを活用 • 取得ドキュメントを絞る ノウハウがあれば教えてほしいです ... つか有料プランを使え

    21
  21. store.js の扱い Vuex と VuexFire • store.js でデータを管理 • 変数とコレクションを紐づけるイメージ

    • Firebase とのやり取りは store.jsに集約 22 VuexFire Vuex
  22. 問題点 store.js の肥大化 コレクション追加 = 関数追加! • コンフリクト祭り • 可読性が低下...

    23
  23. 何が問題なのか? ❏ 分割を考えるべきなのか? ❏ Vuexで大量のデータ管理が問題? ❏ クライアントで大量のデータを保持させる? 24

  24. 25 まとめ • 同時書込み数向上 → 分散カウンタ ◦ ただし読取り数などに注意が必要 ◦ 多少なら単一ドキュメントでも可?

    • Vue.js と FireStore ◦ Vuex と Firebase の連動は検討が必要