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
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
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
310
夢の印税生活 / Life on Royalties
tmtms
0
280
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
LLMエージェント時代に適応した開発フロー
hiragram
1
410
JavaScript 研修
recruitengineers
PRO
2
140
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.2k
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.7k
.NET開発者のためのAzureの概要
tomokusaba
0
230
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
ECS モニタリング手法大整理
yendoooo
1
120
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
270
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.2k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building Applications with DynamoDB
mza
96
6.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Designing Experiences People Love
moore
142
24k
BBQ
matthewcrist
89
9.8k
Visualization
eitanlees
147
16k
Building an army of robots
kneath
306
46k
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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); }
σϞ