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
270
Testing on Laravel
nunulk
1
1.2k
Nuxt.js in TypeScript
nunulk
1
290
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
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
web-application-security
matsuihidetoshi
0
180
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
110
require(ESM)とECMAScript仕様
uhyo
4
840
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.9k
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
480
JAWS-UG Bedrock Claude Night
yamahiro
3
620
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
4
420
開発パフォーマンスを最大化するための開発体制
ham0215
2
470
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
180
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
400
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
580
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
What's new in Ruby 2.0
geeforr
337
31k
The Mythical Team-Month
searls
216
42k
Visualization
eitanlees
136
14k
How to name files
jennybc
65
93k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Unsuck your backbone
ammeep
663
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Building Your Own Lightsaber
phodgson
99
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
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); }
σϞ