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
890
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
260
Design It! in a nutshell
nunulk
1
220
PHP Getting Faster
nunulk
0
210
How does learning English broaden your world?
nunulk
0
310
Testing on Laravel
nunulk
1
1.4k
Nuxt.js in TypeScript
nunulk
1
380
A startup meets Laravel + Vue.js
nunulk
1
1.9k
Unit Testing Laravel
nunulk
0
430
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
560
Other Decks in Technology
See All in Technology
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
RSNA2024振り返り
nanachi
0
500
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
2.5Dモデルのすべて
yu4u
2
610
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
High Performance PHP
cmuench
0
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Building an army of robots
kneath
302
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Done Done
chrislema
182
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Applications with DynamoDB
mza
93
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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); }
σϞ