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
VueJSとFirebaseでSPA
Search
tomoki7
March 17, 2017
Technology
3
5.3k
VueJSとFirebaseでSPA
tomoki7
March 17, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
6
320
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.3k
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
150
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
200
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
350
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
290
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
240
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
120
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
510
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
570
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
280
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Embracing the Ebb and Flow
colly
87
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Six Lessons from altMBA
skipperchong
28
4k
Writing Fast Ruby
sferik
628
62k
Gamification - CAS2011
davidbonilla
81
5.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Navigating Team Friction
lara
189
15k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Vue.jsͱFirebaseͰSPA
ࣗݾհ • ໊લɿ͞ͱ͏ ͱ͖ʢόσΟͬͯݺΕͯ·͢ʣ • ॴଐɿגࣜձࣾSTYZʢιʔγϟϧϕϯνϟʔత ͳʣ • ͖ͬͯͨ͜ͱɿϑϩϯτΤϯυ •
ۤखͳ͜ͱɿόοΫΤϯυɺITશൠ • ίϝϯτɿۓுͯ͠·͢ʂ
ͲΜͳਓ͚ͷ͔ • όοΫΤϯυۤखͳਓ • VueJSʹڵຯ͋Δ͚Ͳ·ͩͬͯͳ͍ਓ • VueJSͱFirebaseҰॹʹͬͯΈ͍ͨਓ
ΞδΣϯμ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උʢ1Ґʣ • VuejsͱFirebaseͷߏʹͳͬͨܦҢʢ3Ґʣ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔʢ5Ґʣ • ·ͱΊʢ1Ґʣ
VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උ
• vue cli ͰϓϩδΣΫτੜ • firebaseΛΠϯετʔϧ • packageΛΠϯετʔϧ
VuejsͱFirebaseͷߏʹͳͬͨܦҢ
ḪΔ͜ͱɺ2016ळʢ9݄ޙ͘Β͍ʣ
ࣾɿ৽نαʔϏε࡞Δ͓(ɻŋωŋ)
ࣗɿ࡞Δ͓(ʆŋωŋ´)ů !!
ࣾɿࠓதʹϦϦʔε͓ͩ(ɻŋωŋ)
ࣗɿΣ ƅЧƅʀ)ϑΝʂʂ
ͱ͍͏Θ͚Ͱ ϓϩδΣΫτελʔτ • ཁ݅ఆٛͱσβΠϯͰ2݄͔͔Γ։ൃ͕11݄ελʔτ • 12݄ϦϦʔεʹ͚ͯ։ൃظ͕ؒ2ϲ݄ແ͍ • ࣾͰΤϯδχΞ̍ਓ • ݄͔̕ΒϦιʔεΛ୳࢝͠ΊΔ
ؤுͬͯूΊͨ ։ൃணख࣌ͷϦιʔε ϝϯόʔ Ϧιʔε ୲ ϑϧλΠϜ ʢ1.5ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ
APIΠϯςάϨʔγϣϯ Ջͳ༑ਓA ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ APIΠϯςάϨʔγϣϯ ੌͷՋͳ༑ਓB ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ όοΫΤϯυ Πϯϑϥ
େ·͔ͳػೳ • ΦϯϥΠϯܾࡁ • Ϣʔβʔট • άϧʔϓΞΧϯτ • ొपΓ •
ϑΥϩʔ • ϓϩδΣΫτ࡞ • ϚΠϖʔδ • γΣΞ • ౷ܭදࣔ • ܾࡁཧ • CSVμϯϩʔυ • ຖ݄ɾຖͷࣗಈҾ͖མͱ͠ • Ωϟϯϖʔϯϖʔδࣗಈੜ • άϧʔϓཧը໘
࠾༻ͨ͠Tech Stack • Vuejsʹͨ͠ཧ༝ • CLI͕ • Babelઃఆͱ͔͠ͳ͍͍ͯ͘ • ίϯϙʔωϯτཧָ͕
• Routingͬͯ͘ΕΔ • CLIͰϓϩδΣΫτੜ࣌طʹSPAʹ͢Δ ͔Ͳ͏͔ͷΦϓγϣϯ͕༗Δʢˡ࠷ߴʣ • Angular͔ΒདྷͨਓͩͱDirectiveͱ͔ࣅͯ Δ͔Β͍͍͢ɺૣ͍ʂ • Firebaseʹͨ͠ཧ༝ • όοΫΤϯυϦιʔε͕ͳ͔ͬͨ • αʔόʔαΠυॻ͔ͳ͍͍ͯ͘ • Πϯϑϥউखʹͬͯ͘ΕΔ • ೝূपΓָ͍͢͝
Ͱ͖ͨͷ • https://syncable.biz/home
ࠔͬͨ͜ͱ • VueJSͷMixinΛ͏ͱ࣮ࡍʹͲ͜ͷϩδοΫ͕ಈ͍ͯΔ͔ࠞཚ͢Δ͕࣌͋Δ • Կ͔͍͍ཧํ๏͕͋Εڭ͍͑ͯͩ͘͞ʂ • ٸ͍Ͱ։ൃ్͍ͯͯ͠தͰDataFlow͕͙ͪΌ͙ͪΌʹͳͬͯ͠·ͬͨ • VuexͬͯΔਓ͓͑ͯ͠Լ͍͞Orz •
Firebaseϝʔϧૹ৴ɺܾࡁͷॲཧͳͲͬͺΓαʔόʔΛͨͯͳ͍ͱ͍͚ͳ͍ɻ • ίϨʹ͍ͭͯGoogle Cloud Functions͕β൛Ͱެ։͞ΕͨͷͰɺͪ͜ΒͰղܾͰ ͖Δ༷ɻ·ͩࢼͯ͠ͳ͍Ͱ͢͝ΊΜͳ͍͞ɻ • ͦͦೝূपΓϝʔϧ͕ࣗಈૹ৴ͯ͘͠ΕΔ͕ɺจ໘͕ӳޠ͔͠ରԠͯ͠ͳ ͍ɻ
VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ FirebaseͷΞΧϯτͱͭͳ͛ͯDBͷதΛදࣔ͢Δͱ͜Ζ·Ͱ
·ͱΊ • খ͍͞νʔϜͰ։ൃظ͕͔͍ؒϓϩδΣΫτʹ Vue.jsͱFirebase͕ྑ͔ͬͨ • VueCLIͷ͓ӄͰڥߏஙϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ͔Βͳͯ͘͜ͷߏͩͱ αʔϏεϦϦʔεͰ͖Δ
ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ