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
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
310
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
150
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.5k
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
910
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2k
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
330
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
Railsアプリケーション開発者のためのブックガイド
takahashim
14
6.1k
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.8k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
許しとアジャイル
jnuank
1
110
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Embracing the Ebb and Flow
colly
88
4.8k
Agile that works and the tools we love
rasmusluckow
331
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Side Projects
sachag
455
43k
Documentation Writing (for coders)
carmenintech
75
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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); }
σϞ