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
880
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
240
Design It! in a nutshell
nunulk
1
200
PHP Getting Faster
nunulk
0
190
How does learning English broaden your world?
nunulk
0
290
Testing on Laravel
nunulk
1
1.3k
Nuxt.js in TypeScript
nunulk
1
360
A startup meets Laravel + Vue.js
nunulk
1
1.8k
Unit Testing Laravel
nunulk
0
410
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
550
Other Decks in Technology
See All in Technology
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
ドメイン名の終活について - JPAAWG 7th -
mikit
33
20k
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
Platform Engineering for Software Developers and Architects
syntasso
1
520
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
Terraform Stacks入門 #HashiTalks
msato
0
350
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
620
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
400
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Rails Girls Zürich Keynote
gr2m
94
13k
Docker and Python
trallard
40
3.1k
How GitHub (no longer) Works
holman
310
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
For a Future-Friendly Web
brad_frost
175
9.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
Six Lessons from altMBA
skipperchong
27
3.5k
It's Worth the Effort
3n
183
27k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
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); }
σϞ