Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Y-KANOH
August 21, 2019

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

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

Y-KANOH

August 21, 2019
Tweet

More Decks by Y-KANOH

Other Decks in Technology

Transcript

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

    View Slide

  2. What is it ?
    ▰ アプリを作成 & 運用
    ▰ Firebase と Vue.js を使用
    ▰ 実際どうだったか
    ▰ 今、困ってること
    2

    View Slide

  3. 自己紹介
    加納 悠史 カノウユウジ
    @YKanoh65
    3
    株式会社 ラクス
    業務ではPHPer
    趣味はダイビング

    View Slide

  4. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. ビアバッシュ専用
    Webアプリ

    View Slide

  9. ビアバッシュ専用
    Webアプリ
    SPA の Web アプリ
    9
    ❏ Vuetify
    ❏ Vuex
    ❏ Vuexfire
    Cloud Firestore
    Authentication
    Cloud Storage

    View Slide

  10. Spark プランを使用
    ● 無料プラン
    ● Firestore の制限
    ○ 読取り回数:5万回/日
    10

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


  14. View Slide

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

    View Slide

  16. ~再掲~
    Spark プランを使用
    ● 無料プラン
    ● Firestore の制限
    ○ 読取り回数:5万回/日
    16

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. store.js の扱い
    Vuex と VuexFire
    ● store.js でデータを管理
    ● 変数とコレクションを紐づけるイメージ
    ● Firebase とのやり取りは store.jsに集約
    22
    VuexFire
    Vuex

    View Slide

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

    View Slide

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

    View Slide

  25. 25
    まとめ
    ● 同時書込み数向上 → 分散カウンタ
    ○ ただし読取り数などに注意が必要
    ○ 多少なら単一ドキュメントでも可?
    ● Vue.js と FireStore
    ○ Vuex と Firebase の連動は検討が必要

    View Slide