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
870
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
230
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
320
A startup meets Laravel + Vue.js
nunulk
1
1.8k
Unit Testing Laravel
nunulk
0
380
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
540
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Classmethod Odyssey 登壇資料
yamahiro
0
390
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
24k
Navigating Team Friction
lara
181
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Practical Orchestrator
shlominoach
185
10k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Visualization
eitanlees
139
14k
Fireside Chat
paigeccino
25
2.8k
A better future with KSS
kneath
231
17k
BBQ
matthewcrist
82
9k
What's new in Ruby 2.0
geeforr
338
31k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
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); }
σϞ