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
920
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
290
Design It! in a nutshell
nunulk
1
240
PHP Getting Faster
nunulk
0
250
How does learning English broaden your world?
nunulk
0
340
Testing on Laravel
nunulk
1
1.5k
Nuxt.js in TypeScript
nunulk
1
420
A startup meets Laravel + Vue.js
nunulk
1
2k
Unit Testing Laravel
nunulk
0
460
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
570
Other Decks in Technology
See All in Technology
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
680
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
110
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
100
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
110
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.9k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
150
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
510
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
810
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
300
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
KATA
mclloyd
30
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Writing Fast Ruby
sferik
628
62k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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); }
σϞ