Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アプリ作成と運用から学ぶ Firebase と Vue.js
Search
Y-KANOH
August 21, 2019
Technology
2
330
アプリ作成と運用から学ぶ Firebase と Vue.js
勉強会アプリを Firebase と Vue.js を使って作成しました。
作成し、運用するうえで工夫したことや直面した課題を共有します。
Y-KANOH
August 21, 2019
Tweet
Share
More Decks by Y-KANOH
See All by Y-KANOH
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
3.8k
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
4
730
PHPカンファレンス関西2024 クロージング/php kansai 2024 closing
ykanoh
0
52
PHPカンファレンス関西2024 オープニング/php kansai 2024 opening
ykanoh
2
240
PHP略語クイズ/PHP Abbreviation Quiz
ykanoh
1
2.5k
PHPカンファレンス関西2024スタッフ希望者向け説明会
ykanoh
0
340
PHPマジックメソッドクイズ!/PHP Magic Method Quiz
ykanoh
0
1.3k
PHPerが再利用可能な情報提供でオフショア先とコード品質向上に取り組む / PHPer try improve the code quality
ykanoh
1
1.1k
どんとこい、PhpStorm 〜Why don't you do IDE's best!〜 / Don't KOI PhpStorm!! Why don't you do IDE's best!!
ykanoh
0
7.3k
Other Decks in Technology
See All in Technology
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
420
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
120
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略 / phper-kaigi-2025-ryu
carta_engineering
0
680
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
360
DIってなんだか難しい? 依存という概念を「使う・使われる」 という言葉で整理しよう
akinoriakatsuka
1
770
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
130
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
150
Dapr For Java Developers SouJava 25
salaboy
1
130
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
200
AIエージェント完全に理解した
segavvy
4
250
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Statistics for Hackers
jakevdp
797
220k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Done Done
chrislema
183
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Bash Introduction
62gerente
611
210k
Transcript
アプリ作成と運用から学ぶ Firebase と Vue.js
What is it ? ▰ アプリを作成 & 運用 ▰ Firebase
と Vue.js を使用 ▰ 実際どうだったか ▰ 今、困ってること 2
自己紹介 加納 悠史 カノウユウジ @YKanoh65 3 株式会社 ラクス 業務ではPHPer 趣味はダイビング
None
社内勉強会 やってますか?
弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 6
弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 7 発表の評価が聞きたい 改善点が知りたい
もっと楽しみたい
ビアバッシュ専用 Webアプリ
ビアバッシュ専用 Webアプリ SPA の Web アプリ 9 ❏ Vuetify ❏
Vuex ❏ Vuexfire Cloud Firestore Authentication Cloud Storage
Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日 10
11 できること • 発表予定の確認 • 発表へのコメント • スタンプでのリアクション
実装での工夫 スタンプ連打 対策 • FireStoreの書込み速度 → 1ドキュメントに 1回/秒 • 複数人による同時書込みに弱い
12
分散カウンタ 導入 • 複数ドキュメントを用意 • カウント数はランダムに保存 • 総カウント数は合計値 ⇒ 書込み速度向上!
13 4回 6回 5回 15回
が
スタンプ連打 対策 弱点 分散カウンタ 導入 ⇒ 1回の更新で3回の読取りが発生 15 4回 6回
5回 3つ 読取り
~再掲~ Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日
16
17 Firestore 読み取り数(初運用時)
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に集約 22 VuexFire Vuex
問題点 store.js の肥大化 コレクション追加 = 関数追加! • コンフリクト祭り • 可読性が低下...
23
何が問題なのか? ❏ 分割を考えるべきなのか? ❏ Vuexで大量のデータ管理が問題? ❏ クライアントで大量のデータを保持させる? 24
25 まとめ • 同時書込み数向上 → 分散カウンタ ◦ ただし読取り数などに注意が必要 ◦ 多少なら単一ドキュメントでも可?
• Vue.js と FireStore ◦ Vuex と Firebase の連動は検討が必要