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
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Scale Security Programs with Scorecarding
ramimac
0
460
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
670
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
770
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
180
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.3k
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
250
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
550
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
370
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
560
Featured
See All Featured
Visualization
eitanlees
146
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
183
22k
Done Done
chrislema
184
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Building Adaptive Systems
keathley
41
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Cult of Friendly URLs
andyhume
78
6.4k
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ͷ͓ӄͰڥߏஙϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ͔Βͳͯ͘͜ͷߏͩͱ αʔϏεϦϦʔεͰ͖Δ
ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ