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
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
150
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
230
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
610
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
320
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
390
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
Wasmのエコシステムを使った ツール作成方法
askua
0
120
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
210
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Six Lessons from altMBA
skipperchong
28
4k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
BBQ
matthewcrist
89
9.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
A Tale of Four Properties
chriscoyier
161
23k
Done Done
chrislema
185
16k
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ͷ͓ӄͰڥߏஙϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ͔Βͳͯ͘͜ͷߏͩͱ αʔϏεϦϦʔεͰ͖Δ
ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ