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.1k
VueJSとFirebaseでSPA
tomoki7
March 17, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
240
PHP"オレ"カンファレンスの告知
ysknsid25
0
290
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
1
190
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs (QCon London)
inesmontani
PRO
0
140
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
350
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
mtx2s
11
2.4k
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
2
220
A (short) History of AI
harishpillay
0
100
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
110
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
190
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The Language of Interfaces
destraynor
151
23k
Statistics for Hackers
jakevdp
789
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
YesSQL, Process and Tooling at Scale
rocio
162
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
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ͷ͓ӄͰڥߏஙϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ͔Βͳͯ͘͜ͷߏͩͱ αʔϏεϦϦʔεͰ͖Δ
ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ