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
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
460
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
940
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
120
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Wasmのエコシステムを使った ツール作成方法
askua
0
140
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
240
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
690
Node.js 2025: What's new and what's next
ruyadorno
0
130
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
490
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
300
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
620
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Being A Developer After 40
akosma
91
590k
Rails Girls Zürich Keynote
gr2m
95
14k
Leading Effective Engineering Teams in the AI Era
addyosmani
4
390
What's in a price? How to price your products and services
michaelherold
246
12k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
27
2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Statistics for Hackers
jakevdp
799
220k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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); }
σϞ