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
330
Testing on Laravel
nunulk
1
1.4k
Nuxt.js in TypeScript
nunulk
1
410
A startup meets Laravel + Vue.js
nunulk
1
1.9k
Unit Testing Laravel
nunulk
0
460
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
560
Other Decks in Technology
See All in Technology
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
240
OSMnx Galleryの紹介
mopinfish
0
150
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
250
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
130
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
170
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
710
CSS polyfill とその未来
ken7253
0
140
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A Tale of Four Properties
chriscoyier
159
23k
How STYLIGHT went responsive
nonsquared
100
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Done Done
chrislema
184
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Faster Mobile Websites
deanohume
307
31k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Rails Girls Zürich Keynote
gr2m
94
13k
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); }
σϞ