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
Vue.js + TypeScript + Firebase
Search
nunulk
January 19, 2019
Technology
0
930
Vue.js + TypeScript + Firebase
nunulk
January 19, 2019
Tweet
Share
More Decks by nunulk
See All by nunulk
Laravelでテストしやすいコードを書く5 / 5 tips of building testable modules in Laravel
nunulk
0
300
Design It! in a nutshell
nunulk
1
250
PHP Getting Faster
nunulk
0
260
How does learning English broaden your world?
nunulk
0
350
Testing on Laravel
nunulk
1
1.5k
Nuxt.js in TypeScript
nunulk
1
430
A startup meets Laravel + Vue.js
nunulk
1
2k
Unit Testing Laravel
nunulk
0
470
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
580
Other Decks in Technology
See All in Technology
社内お問い合わせBotの仕組みと学び
nish01
0
400
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
20250929_QaaS_vol20
mura_shin
0
110
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
180
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
110
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
190
BtoBプロダクト開発の深層
16bitidol
0
340
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Fireside Chat
paigeccino
40
3.7k
Designing for humans not robots
tammielis
254
25k
The Cult of Friendly URLs
andyhume
79
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
Vue.js + Firebase + TypeScript Ͱ ϦΞϧλΠϜνϟοτ nunulk #ReBuildCamp
Firebase • Google ͕ఏڙ͢Δ mBaaS • Cloud Firestore (Beta), Cloud
Storage, Cloud Functions, A/B Testing, Cloud Messaging
ٕͬͨज़ • Vue.js: 2.5.22 • TypeScript: 3.2.4 • Firebase: 0.3.7
• Element: 2.4.11
ೝূ͕ඞཁͳύεͷࢦఆ routes: [ { path: '/', name: 'home', component: Home,
meta: { requiresAuth: true } },
ϛυϧΣΞ router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record
=> record.meta.requiresAuth) if (!requiresAuth) { next() } else { firebase.auth().onAuthStateChanged(function (user) { if (user) { next() } else { next({ path: '/signin', query: { redirect: to.fullPath } })
Component export default class ChatBoard extends Vue { user: User
= { id: null, email: '', avatar_image_url: '' } participants: User[] = [] messages: Message[] = [] message: Message = { room_id, sender_id: null, content: ‘', created_at: null, }
Component created(): void { const fireUser = firebase.auth().currentUser; if (!fireUser)
{ return; } this.user.id = fireUser.uid; this.user.email = fireUser.email; db.collection('users').doc(this.user.id).get() .then((doc) => {})
Component db.collection('messages') .onSnapshot((snapshot) => { const changes = snapshot.docChanges() if
(!changes) { return } changes.forEach((change) => { if (change.type === 'added') { const message = { room_id: change.doc.data().room_id, sender_id: change.doc.data().sender_id, content: change.doc.data().content, created_at: this.timestamp2String(change.doc.data().created_at) }; this.addMessageData(message); }
σϞ