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
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
160
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
170
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
280
Goでマークダウンの独自記法を実装する
lag129
0
200
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
520
Claude Code x Androidアプリ 開発
kgmyshin
1
510
広島発!スタートアップ開発の裏側
tsankyo
0
190
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
630
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
1
160
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
110
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
130
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Site-Speed That Sticks
csswizardry
10
780
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
70
19k
What's in a price? How to price your products and services
michaelherold
246
12k
It's Worth the Effort
3n
187
28k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Docker and Python
trallard
45
3.5k
Music & Morning Musume
bryan
46
6.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
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); }
σϞ