Slide 1

Slide 1 text

Vue.jsͱFirebaseͰSPA

Slide 2

Slide 2 text

ࣗݾ঺հ • ໊લɿ͞ͱ͏ ͱ΋͖ʢόσΟͬͯݺ͹Εͯ·͢ʣ • ॴଐɿגࣜձࣾSTYZʢιʔγϟϧϕϯνϟʔత ͳʣ • ΍͖ͬͯͨ͜ͱɿϑϩϯτΤϯυ • ۤखͳ͜ͱɿόοΫΤϯυɺITશൠ • ίϝϯτɿۓுͯ͠·͢ʂ

Slide 3

Slide 3 text

ͲΜͳਓ޲͚ͷ࿩͔ • όοΫΤϯυۤखͳਓ • VueJSʹڵຯ͋Δ͚Ͳ·ͩ࢖ͬͯͳ͍ਓ • VueJSͱFirebaseҰॹʹ࢖ͬͯΈ͍ͨਓ

Slide 4

Slide 4 text

ΞδΣϯμ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උʢ1෼Ґʣ • VuejsͱFirebaseͷߏ੒ʹͳͬͨܦҢʢ3෼Ґʣ • VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔʢ5෼Ґʣ • ·ͱΊʢ1෼Ґʣ

Slide 5

Slide 5 text

VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ४උ

Slide 6

Slide 6 text

• vue cli ͰϓϩδΣΫτੜ੒ • firebaseΛΠϯετʔϧ • packageΛΠϯετʔϧ

Slide 7

Slide 7 text

VuejsͱFirebaseͷߏ੒ʹͳͬͨܦҢ

Slide 8

Slide 8 text

ḪΔ͜ͱɺ2016೥ळʢ9݄ޙ൒͘Β͍ʣ

Slide 9

Slide 9 text

ࣾ௕ɿ৽نαʔϏε࡞Δ͓(ɻŋωŋ)

Slide 10

Slide 10 text

ࣗ෼ɿ࡞Δ͓(ʆŋωŋ´)ů !!

Slide 11

Slide 11 text

ࣾ௕ɿࠓ೥தʹϦϦʔε͓ͩ(ɻŋωŋ)

Slide 12

Slide 12 text

ࣗ෼ɿΣ ƅЧƅʀ)ϑΝʂʂ

Slide 13

Slide 13 text

ͱ͍͏Θ͚Ͱ ϓϩδΣΫτελʔτ • ཁ݅ఆٛͱσβΠϯͰ2݄͔͔Γ։ൃ͕11݄ελʔτ • 12݄຤ϦϦʔεʹ޲͚ͯ։ൃظ͕ؒ2ϲ݄ແ͍ • ࣾ಺ͰΤϯδχΞ͸๻̍ਓ • ݄͔̕ΒϦιʔεΛ୳࢝͠ΊΔ

Slide 14

Slide 14 text

ؤுͬͯूΊͨ ։ൃணख࣌ͷϦιʔε ϝϯόʔ Ϧιʔε ୲౰ ๻ ϑϧλΠϜ ʢ1.5ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ APIΠϯςάϨʔγϣϯ Ջͳ༑ਓA ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ ϚʔΫΞοϓ APIΠϯςάϨʔγϣϯ ੌ࿹ͷՋͳ༑ਓB ύʔτλΠϜ ʢ0.7ਓ݄Ґʣ ϑϩϯτΤϯυ όοΫΤϯυ Πϯϑϥ

Slide 15

Slide 15 text

େ·͔ͳػೳ • ΦϯϥΠϯܾࡁ • Ϣʔβʔট଴ • άϧʔϓΞΧ΢ϯτ • ొ࿥पΓ • ϑΥϩʔ • ϓϩδΣΫτ࡞੒ • ϚΠϖʔδ • γΣΞ • ౷ܭදࣔ • ܾࡁ؅ཧ • CSVμ΢ϯϩʔυ • ຖ݄ɾຖ೥ͷࣗಈҾ͖མͱ͠ • Ωϟϯϖʔϯϖʔδࣗಈੜ੒ • άϧʔϓ؅ཧը໘

Slide 16

Slide 16 text

࠾༻ͨ͠Tech Stack • Vuejsʹͨ͠ཧ༝ • CLI͕਌੾ • Babelઃఆͱ͔͠ͳ͍͍ͯ͘ • ίϯϙʔωϯτ؅ཧָ͕ • Routing΋΍ͬͯ͘ΕΔ • CLIͰϓϩδΣΫτੜ੒࣌طʹSPAʹ͢Δ ͔Ͳ͏͔ͷΦϓγϣϯ͕༗Δʢˡ࠷ߴʣ • Angular͔ΒདྷͨਓͩͱDirectiveͱ͔ࣅͯ Δ͔Β࢖͍΍͍͢ɺૣ͍ʂ • Firebaseʹͨ͠ཧ༝ • όοΫΤϯυϦιʔε͕ͳ͔ͬͨ • αʔόʔαΠυॻ͔ͳ͍͍ͯ͘ • Πϯϑϥউखʹ΍ͬͯ͘ΕΔ • ೝূपΓָ͍͢͝

Slide 17

Slide 17 text

Ͱ͖ͨ΋ͷ • https://syncable.biz/home

Slide 18

Slide 18 text

ࠔͬͨ͜ͱ • VueJSͷMixinΛ࢖͏ͱ࣮ࡍʹͲ͜ͷϩδοΫ͕ಈ͍ͯΔ͔ࠞཚ͢Δ͕࣌͋Δ • Կ͔͍͍؅ཧํ๏͕͋Ε͹ڭ͍͑ͯͩ͘͞ʂ • ٸ͍Ͱ։ൃ్͍ͯͯ͠தͰDataFlow͕͙ͪΌ͙ͪΌʹͳͬͯ͠·ͬͨ • Vuex࢖ͬͯΔਓ͓͑ͯ͠Լ͍͞Orz • Firebase͸ϝʔϧૹ৴ɺܾࡁͷॲཧͳͲ͸΍ͬͺΓαʔόʔΛͨͯͳ͍ͱ͍͚ͳ͍ɻ • ίϨʹ͍ͭͯ͸Google Cloud Functions͕β൛Ͱެ։͞ΕͨͷͰɺͪ͜ΒͰղܾͰ ͖Δ໛༷ɻ·ͩࢼͯ͠ͳ͍Ͱ͢͝ΊΜͳ͍͞ɻ • ͦ΋ͦ΋ೝূपΓ͸ϝʔϧ͕ࣗಈૹ৴ͯ͘͠ΕΔ͕ɺจ໘͕ӳޠ͔͠ରԠͯ͠ͳ ͍ɻ

Slide 19

Slide 19 text

VuejsʹFirebaseೖΕͯಈ͔ͯ͠ΈΔ FirebaseͷΞΧ΢ϯτͱͭͳ͛ͯDBͷத਎Λදࣔ͢Δͱ͜Ζ·Ͱ

Slide 20

Slide 20 text

·ͱΊ • খ͍͞νʔϜͰ։ൃظ͕ؒ୹͔͍ϓϩδΣΫτʹ͸ Vue.jsͱFirebase͕ྑ͔ͬͨ • VueCLIͷ͓ӄͰ؀ڥߏங΍ϓϩδΣΫτઃఆʹ࣌ ͔͚ؒͳͯ͘͢Ή • όοΫΤϯυ͕͋·Γ෼͔Βͳͯ͘΋͜ͷߏ੒ͩͱ αʔϏεϦϦʔεͰ͖Δ

Slide 21

Slide 21 text

ιʔγϟϧϕϯνϟʔͰಇ͖͍ͨ ΤϯδχΞઈࢍืूதʂʂ

Slide 22

Slide 22 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ (ਓ-)ँँ