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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

社内勉強会やってますか？

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

が

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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