VueJSとFirebaseでSPA

1. Vue.jsͱFirebaseͰSPA
2. ࣗݾ঺հ • ໊લɿ͞ͱ͏ ͱ΋͖ʢόσΟͬͯݺ͹Εͯ·͢ʣ • ॴଐɿגࣜձࣾSTYZʢιʔγϟϧϕϯνϟʔత ͳʣ • ΍͖ͬͯͨ͜ͱɿϑϩϯτΤϯυ • ۤखͳ͜ͱɿόοΫΤϯυɺITશൠ • ίϝϯτɿۓுͯ͠·͢ʂ
3. ͲΜͳਓ޲͚ͷ࿩͔ • όοΫΤϯυۤखͳਓ • VueJSʹڵຯ͋Δ͚Ͳ·ͩ࢖ͬͯͳ͍ਓ • VueJSͱFirebaseҰॹʹ࢖ͬͯΈ͍ͨਓ
4. ΞδΣϯμ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උʢ1෼Ґʣ • VuejsͱFirebaseͷߏ੒ʹͳͬͨܦҢʢ3෼Ґʣ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔʢ5෼Ґʣ • ·ͱΊʢ1෼Ґʣ
5. VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උ
6. • vue cli ͰϓϩδΣΫτੜ੒ • firebaseΛΠϯετʔϧ • packageΛΠϯετʔϧ
7. VuejsͱFirebaseͷߏ੒ʹͳͬͨܦҢ
8. ḪΔ͜ͱɺ2016೥ळʢ9݄ޙ൒͘Β͍ʣ
9. ࣾ௕ɿ৽نαʔϏε࡞Δ͓(ɻŋωŋ)
10. ࣗ෼ɿ࡞Δ͓(ʆŋωŋ´)ů !!
11. ࣾ௕ɿࠓ೥தʹϦϦʔε͓ͩ(ɻŋωŋ)
12. ࣗ෼ɿΣ ƅЧƅʀ)ϑΝʂʂ
13. ͱ͍͏Θ͚Ͱ ϓϩδΣΫτελʔτ • ཁ݅ఆٛͱσβΠϯͰ2݄͔͔Γ։ൃ͕11݄ελʔτ • 12݄຤ϦϦʔεʹ޲͚ͯ։ൃظ͕ؒ2ϲ݄ແ͍ • ࣾ಺ͰΤϯδχΞ͸๻̍ਓ • ݄͔̕ΒϦιʔεΛ୳࢝͠ΊΔ
14. ؤுͬͯूΊͨ ։ൃணख࣌ͷϦιʔε ϝϯόʔ Ϧιʔε ୲౰ ๻ ϑϧλΠϜ ʢ1.5ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ APIΠϯςάϨʔγϣϯ Ջͳ༑ਓA ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ APIΠϯςάϨʔγϣϯ ੌ࿹ͷՋͳ༑ਓB ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ όοΫΤϯυ Πϯϑϥ
15. େ·͔ͳػೳ • ΦϯϥΠϯܾࡁ • Ϣʔβʔট଴ • άϧʔϓΞΧ΢ϯτ • ొ࿥पΓ • ϑΥϩʔ • ϓϩδΣΫτ࡞੒ • ϚΠϖʔδ • γΣΞ • ౷ܭදࣔ • ܾࡁ؅ཧ • CSVμ΢ϯϩʔυ • ຖ݄ɾຖ೥ͷࣗಈҾ͖མͱ͠ • Ωϟϯϖʔϯϖʔδࣗಈੜ੒ • άϧʔϓ؅ཧը໘
16. ࠾༻ͨ͠Tech Stack • Vuejsʹͨ͠ཧ༝ • CLI͕਌੾ • Babelઃఆͱ͔͠ͳ͍͍ͯ͘ • ίϯϙʔωϯτ؅ཧָ͕ • Routing΋΍ͬͯ͘ΕΔ • CLIͰϓϩδΣΫτੜ੒࣌طʹSPAʹ͢Δ ͔Ͳ͏͔ͷΦϓγϣϯ͕༗Δʢˡ࠷ߴʣ • Angular͔ΒདྷͨਓͩͱDirectiveͱ͔ࣅͯ Δ͔Β࢖͍΍͍͢ɺૣ͍ʂ • Firebaseʹͨ͠ཧ༝ • όοΫΤϯυϦιʔε͕ͳ͔ͬͨ • αʔόʔαΠυॻ͔ͳ͍͍ͯ͘ • Πϯϑϥউखʹ΍ͬͯ͘ΕΔ • ೝূपΓָ͍͢͝
17. Ͱ͖ͨ΋ͷ • https://syncable.biz/home
18. ࠔͬͨ͜ͱ • VueJSͷMixinΛ࢖͏ͱ࣮ࡍʹͲ͜ͷϩδοΫ͕ಈ͍ͯΔ͔ࠞཚ͢Δ͕࣌͋Δ • Կ͔͍͍؅ཧํ๏͕͋Ε͹ڭ͍͑ͯͩ͘͞ʂ • ٸ͍Ͱ։ൃ్͍ͯͯ͠தͰDataFlow͕͙ͪΌ͙ͪΌʹͳͬͯ͠·ͬͨ • Vuex࢖ͬͯΔਓ͓͑ͯ͠Լ͍͞Orz • Firebase͸ϝʔϧૹ৴ɺܾࡁͷॲཧͳͲ͸΍ͬͺΓαʔόʔΛͨͯͳ͍ͱ͍͚ͳ͍ɻ • ίϨʹ͍ͭͯ͸Google Cloud Functions͕β൛Ͱެ։͞ΕͨͷͰɺͪ͜ΒͰղܾͰ ͖Δ໛༷ɻ·ͩࢼͯ͠ͳ͍Ͱ͢͝ΊΜͳ͍͞ɻ • ͦ΋ͦ΋ೝূपΓ͸ϝʔϧ͕ࣗಈૹ৴ͯ͘͠ΕΔ͕ɺจ໘͕ӳޠ͔͠ରԠͯ͠ͳ ͍ɻ
19. VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ FirebaseͷΞΧ΢ϯτͱͭͳ͛ͯDBͷத਎Λදࣔ͢Δͱ͜Ζ·Ͱ
20. ·ͱΊ • খ͍͞νʔϜͰ։ൃظ͕ؒ୹͔͍ϓϩδΣΫτʹ͸ Vue.jsͱFirebase͕ྑ͔ͬͨ • VueCLIͷ͓ӄͰ؀ڥߏங΍ϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ෼͔Βͳͯ͘΋͜ͷߏ੒ͩͱ αʔϏεϦϦʔεͰ͖Δ
21. ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ
22. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ