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
15
4.4k
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
4
750
PHPカンファレンス関西2024 クロージング/php kansai 2024 closing
ykanoh
0
53
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.4k
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
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
680
Creating Awesome Change in SmartNews
martin_lover
1
260
AWS Control Towerを 数年運用してきての気づきとこれから/aws-controltower-ops-tips
tadayukinakamura
0
120
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
130
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
230
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
3
410
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
510
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
370
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
410
Amazon CloudWatchで始める エンドユーザー体験のモニタリング
o11yfes2023
0
160
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
150
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.3k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Speed Design
sergeychernyshev
29
890
Documentation Writing (for coders)
carmenintech
69
4.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Visualization
eitanlees
146
16k
Designing for Performance
lara
607
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
530
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Fireside Chat
paigeccino
37
3.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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 の連動は検討が必要