VueJSとFirebaseでSPA

Transcript

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ