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

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. が

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

    5回 3つ 読取り

16. ～再掲～ Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数：5万回/日

    16

17. 17 Firestore 読み取り数（初運用時）

18. 18 開始前 64回 開始30分 3.7万回 開始150分 5.1万回！ Firestore 読み取り数（初運用時）

19. 19 開始30分 3.7万回 開始150分 5.1万回！ Firestore 読み取り数（初運用時）

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

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

    21

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

    • Firebase とのやり取りは store.jsに集約 22 VuexFire Vuex

23. 問題点 store.js の肥大化 コレクション追加 ＝ 関数追加！ • コンフリクト祭り • 可読性が低下...

    23

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

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

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