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
240
Design It! in a nutshell
nunulk
1
200
PHP Getting Faster
nunulk
0
190
How does learning English broaden your world?
nunulk
0
290
Testing on Laravel
nunulk
1
1.3k
Nuxt.js in TypeScript
nunulk
1
360
A startup meets Laravel + Vue.js
nunulk
1
1.8k
Unit Testing Laravel
nunulk
0
410
A Third-rate Programmer Talked about a Survival Strategy for Software Engineers
nunulk
3
550
Other Decks in Technology
See All in Technology
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
150
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
200
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
3
240
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
230
Gradle: The Build System That Loves To Hate You
aurimas
2
160
RAGのためのビジネス文書解析技術
eida
3
290
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Forget efficiency – Become more productive without the stress
ufried
0
170
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.8k
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.6k
Observability を実現するためにアセットを活用しよう(AWS 秋の Observability 祭り ~明日使えるアセット祭り~ )
tsujiba
0
100
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
490
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
45
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Teambox: Starting and Learning
jrom
132
8.7k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Designing the Hi-DPI Web
ddemaree
280
34k
Speed Design
sergeychernyshev
24
580
Raft: Consensus for Rubyists
vanstee
136
6.6k
Navigating Team Friction
lara
183
14k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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); }
σϞ