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
860
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
220
Design It! in a nutshell
nunulk
1
190
PHP Getting Faster
nunulk
0
180
How does learning English broaden your world?
nunulk
0
280
Testing on Laravel
nunulk
1
1.3k
Nuxt.js in TypeScript
nunulk
1
300
A startup meets Laravel + Vue.js
nunulk
1
1.7k
Unit Testing Laravel
nunulk
0
370
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
530
Other Decks in Technology
See All in Technology
パフォーマンス最適化のベストプラクティス
databricksjapan
0
200
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
4
310
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
1.7k
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
330
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
180
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
8.2k
生成AIがもたらす変革 / GitHubGalaxy_CyberAgent
cyberagentdevelopers
PRO
2
110
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.6k
From here to resilience - a travel guide
ufried
1
160
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
GitHub's CSS Performance
jonrohan
1025
450k
GraphQLとの向き合い方2022年版
quramy
33
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Agile that works and the tools we love
rasmusluckow
325
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A designer walks into a library…
pauljervisheath
201
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
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); }
σϞ