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
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
0
490
DSPy入門
tomehirata
1
200
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
Retrospectiveを振り返ろう
nakasho
0
120
SOTA競争から人間を超える画像認識へ
shinya7y
0
570
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
140
Kubernetes self-healing of your workload
hwchiu
0
560
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
330
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
850
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
130
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Faster Mobile Websites
deanohume
310
31k
We Have a Design System, Now What?
morganepeng
53
7.8k
Music & Morning Musume
bryan
46
6.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
GitHub's CSS Performance
jonrohan
1032
470k
Mobile First: as difficult as doing things right
swwweet
225
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building Adaptive Systems
keathley
44
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
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); }
σϞ