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
240
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
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
150
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
ゼロからはじめる採用広報
yutadayo
3
1k
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
330
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
4
490
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
120
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
400
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
140
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Thoughts on Productivity
jonyablonski
69
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Faster Mobile Websites
deanohume
307
31k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Code Reviewing Like a Champion
maltzj
524
40k
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); }
σϞ