VueJSとFirebaseでSPA

C74561fdbca0fc909b213248f3bd0766?s=47 tomoki7
March 17, 2017

 VueJSとFirebaseでSPA

C74561fdbca0fc909b213248f3bd0766?s=128

tomoki7

March 17, 2017
Tweet

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