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
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
140
(新URLに移行しました)FASTと向き合うことで見えた、大規模アジャイルの難しさと楽しさ
wooootack
0
680
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
140
基調講演: 生成AIを活用したアプリケーションの開発手法とは?
asei
1
120
「伝える」を加速させるCursor術
naomix
0
610
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
110
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
140
Tenstorrent HW/SW 概要説明
tenstorrent_japan
0
390
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.4k
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
BBQ
matthewcrist
89
9.7k
Balancing Empowerment & Direction
lara
1
280
Being A Developer After 40
akosma
90
590k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
The World Runs on Bad Software
bkeepers
PRO
68
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Unsuck your backbone
ammeep
671
58k
Designing for humans not robots
tammielis
253
25k
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ͷ͓ӄͰڥߏஙϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ͔Βͳͯ͘͜ͷߏͩͱ αʔϏεϦϦʔεͰ͖Δ
ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ