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
890
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
260
Design It! in a nutshell
nunulk
1
220
PHP Getting Faster
nunulk
0
210
How does learning English broaden your world?
nunulk
0
310
Testing on Laravel
nunulk
1
1.4k
Nuxt.js in TypeScript
nunulk
1
380
A startup meets Laravel + Vue.js
nunulk
1
1.9k
Unit Testing Laravel
nunulk
0
430
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
550
Other Decks in Technology
See All in Technology
ObservabilityCON on the Road Tokyoの見どころ
hamadakoji
0
210
“自分”を大切に、フラットに。キャリアチェンジしてからの一年 三ヶ月で見えたもの。
maimyyym
0
300
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
120
Amazon Aurora バージョンアップについて、改めて理解する ~バージョンアップ手法と文字コードへの影響~
smt7174
1
250
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
もし今からGraphQLを採用するなら
kazukihayase
9
4.2k
[SRE kaigi 2025] ガバメントクラウドに向けた開発と変化するSRE組織のあり方 / Development for Government Cloud and the Evolving Role of SRE Teams
kazeburo
4
1.9k
さいきょうのアーキテクチャを生み出すセンスメイキング
jgeem
0
270
Japan AWS Jr. Championsがお届けするre:Invent2024のハイライト ~ラスベガスで見てきた景色~
fukuchiiinu
0
1.1k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
190
Tokyo RubyKaigi 12 - Scaling Ruby at GitHub
jhawthorn
2
210
BLEAでAWSアカウントのセキュリティレベルを向上させよう
koheiyoshikawa
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
600
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
4 Signs Your Business is Dying
shpigford
182
22k
Code Review Best Practice
trishagee
65
17k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Being A Developer After 40
akosma
89
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Optimising Largest Contentful Paint
csswizardry
33
3k
A Philosophy of Restraint
colly
203
16k
Adopting Sorbet at Scale
ufuk
74
9.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Invisible Side of Design
smashingmag
299
50k
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); }
σϞ