vuejs-night-publish - Speaker Deck

vuejs-night-publish

by Hirokazu Maruta

Slide 1

Slide 1 text

ແ୊ giftee SaaS div. Engineer ·ΔͨͻΖ͔ͣ Vue.js Night ެ։൛

Slide 2

Slide 2 text

ࣗݾ঺հ • ؙా୓࿨ʢ·ΔͨͻΖ͔ͣʣ • Twitter: @mochi_suna • giftee.co SaaSνʔϜΤϯδχΞ • झຯɿϐΞϊɺϘυήɺΞΠίϯ࡞੒ʢΧούʣ • ࣗಈԽେ޷͖ɻख࡞ۀ͖Β͍ɻ • githubɿ @mochisuna

Slide 3

Slide 3 text

ٕज़໘

Slide 4

Slide 4 text

ීஈͷ͓࢓ࣄ

Slide 5

Slide 5 text

2. νέοτൃ݊ ߪೖϢʔβʔ 1. ঎඼ΛબΜͰߪೖ ड͚औΓϢʔβʔ

Slide 6

Slide 6 text

2. νέοτൃ݊ ߪೖϢʔβʔ 1. ঎඼ΛબΜͰߪೖ 2. νέοτੜ੒ ड͚औΓϢʔβʔ

Slide 7

Slide 7 text

2. νέοτൃ݊ ߪೖϢʔβʔ 1. ঎඼ΛબΜͰߪೖ 3. νέοτURLΛฦ͢ ड͚औΓϢʔβʔ 2. νέοτੜ੒

Slide 8

Slide 8 text

2. νέοτൃ݊ ߪೖϢʔβʔ 1. ঎඼ΛબΜͰߪೖ 3. νέοτURLΛฦ͢ 4. νέοτURLΛଃΔ ड͚औΓϢʔβʔ 2. νέοτੜ੒

Slide 9

Slide 9 text

2. νέοτൃ݊ ߪೖϢʔβʔ 1. ঎඼ΛબΜͰߪೖ 3. νέοτURLΛฦ͢ 4. νέοτURLΛଃΔ ड͚औΓϢʔβʔ 2. νέοτੜ੒ ͜͜

Slide 10

Slide 10 text

ͯ͞

Slide 11

Slide 11 text

ࠓճͷλΠτϧ

Slide 12

Slide 12 text

ແ୊ giftee SaaS div. Engineer ·ΔͨͻΖ͔ͣ

Slide 13

Slide 13 text

ྲྀੴʹͪΐͬͱͲ͏͔ͳ ͱࢥͬͨɾɾɾ

Slide 14

Slide 14 text

ͦ΋ͦ΋

Slide 15

Slide 15 text

ࠓճ࿩ͦ͏ͱ͍ͯͨ͠಺༰

Slide 16

Slide 16 text

ϙʔτϑΥϦΦαΠτΛ ࡞ͬͨ࿩ giftee SaaS div. Engineer ·ΔͨͻΖ͔ͣ

Slide 17

Slide 17 text

ؒʹ߹Θ΁Μ͔ͬͨɾɾɾ

Slide 18

Slide 18 text

ม͑·͢

Slide 19

Slide 19 text

ϙʔτϑΥϦΦαΠτΛ ࡞Ζ͏ͱͨ͠࿩ giftee SaaS div. Engineer ·ΔͨͻΖ͔ͣ

Slide 20

Slide 20 text

Ͱɺ

Slide 21

Slide 21 text

͢Έ·ͤΜ

Slide 22

Slide 22 text

ࠓճຊ౰ʹ ৭ʑͱؒʹ߹͍·ͤΜͰͨ͠

Slide 23

Slide 23 text

ݴ͏ͳΕ͹εϥΠυ΋ؒʹ ߹ͬͯ·ͤΜ

Slide 24

Slide 24 text

੒Ռ෺

Slide 25

Slide 25 text

ิ଍: ٕज़తͳ࿩

Slide 26

Slide 26 text

࢖ٕͬͨज़ • Vue CLI 3 + Vuex + Typescript • ֤छϥΠϒϥϦ • tweenMax • vue-svg-loader • etc…

Slide 27

Slide 27 text

Ϛ΢εϗόʔɾΫϦοΫ • Ұ൪্ͷίϯϙʔωϯτͰσΟεύον • @mousedown/@mouseup • @mouseover/@mouseleave • this.$store.dispatch(“ΞΫγϣϯ໊") • mapGettersͰεςʔτมߋΛ؂ࢹ

Slide 28

Slide 28 text

ίϯϙʔωϯτͷελΠϧ • ֎෦͔ΒมߋͰ͖ΔΑ͏ʹ͢Δͱศར • :style=“styles” • styles(): Object { return {transform:`hogehoge`} }

Slide 29

Slide 29 text

TweenMax/TimelineMax • ΞχϝʔγϣϯΛஞ࣍ॲཧɾฒྻॲཧ • ม਺ʹஔ͘͜ͱͰޙ͔ΒมߋՄೳ • yoyoͰӬٱϧʔϓ

Slide 30

Slide 30 text

ײ૝

Slide 31

Slide 31 text

΍ͬͯΈͯ • TweenMaxਖ਼௚͔ͳΓ؆୯ͩͬͨ • CSS → TeenMax΁ͷ੾Γସ͑͸ࠓே͔Β • ϘλϯҎ֎͸੾Γସ͑ࡁ • ֶशίετͷ௿͕͍͢͞͝

Slide 32

Slide 32 text

ਅ໘໨ͳ࿩ • ϑϩϯτΤϯυͷొཽ໳ͱͯ͠vue͸ׂͱྑ͍ؾ͕ ͍ͯ͠Δ • ֶशίετ௿͍ɾTS͸ܕ෇͚ݴޠओٛऀʹ༏͍͠ • ͪΐͬͱͨ͠΋ͷ͕͙͢࡞ΕΔ • ެࣜͷࢿྉ͕ॆ࣮͍ͯ͠Δ • CSSͰΞχϝʔγϣϯ΍Δͱࢮ͵ʢܦݧஊʣ

Slide 33

Slide 33 text

ָ͍͠VueϥΠϑΛ