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
250
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
470
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
570
Other Decks in Technology
See All in Technology
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
470
AWS DDoS攻撃防御の最前線
ryutakondo
0
120
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2k
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
630
AI関数が早くなったので試してみよう
kumakura
0
120
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
290
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
Rubyの国のPerlMonger
anatofuz
3
730
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Facilitating Awesome Meetings
lara
54
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building an army of robots
kneath
306
45k
Optimizing for Happiness
mojombo
379
70k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Git: the NoSQL Database
bkeepers
PRO
431
65k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Unsuck your backbone
ammeep
671
58k
GitHub's CSS Performance
jonrohan
1031
460k
Rails Girls Zürich Keynote
gr2m
95
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
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); }
σϞ