Vue.js を初めてプロダクトに導入して直面した課題と得られた幸せ

Slide 1

Slide 1 text

Vue.js ΛॳΊͯϓϩμΫτʹಋ ೖͯ͠௚໘ͨ͠՝୊ͱಘΒΕͨ ޾ͤ @moomooya Isamu Suzuki, Rakus 2019.2.19

Slide 2

Slide 2 text

ླ໦ ༐ʢ͖ͣ͢ ͍͞Ήʣ • ๺ւಓग़਎ 35ࡀ • QiitaͰษڧձϨϙ࠷଎ΦδαϯΛ໨ࢦ͍ͯ͠·͢ • ओʹMicroservicesͱ͔JavaScriptؔ࿈த৺ • झຯ • ITωλͷΞφϩάήʔϜ੍࡞ • ࣾ಺Ψϯϓϥ෦෦௕ • ITۀքଟΊͷαόήओ࠵ @moomooya @moomoo-ya

Slide 3

Slide 3 text

ུྺ • ߴߍʙେֶʙ৽ଔ • ߴߍͰ͸ϓϩάϥϜίϯςετք۾Λ͏Ζ͏Ζ • IPAʢ౰࣌͸௨࢈লʣͷࢿ֨औΓ͋͞Γ • େखSIer ࣌୅ • ূ݊/֎ࠃҝସγεςϜͷ্ྲྀ͔ΒԼྲྀ·Ͱ • อݥਃࠐΈγεςϜͷ৽ن։ൃɺͳͲ • খن໛ϕϯνϟʔΛܦ༝ͯ͠ϥΫε΁ • ɹɹɹɹɹɹͷαʔϏε։࢝ • ΤϯδχΞจԽͷ೐΍͔͠ɺͳͲ • ৽نαʔϏε։ൃ ←ࠓ೔͸͜Εͷ͜ͱΛ࿩͠·͢

Slide 4

Slide 4 text

ຊ୊

Slide 5

Slide 5 text

ϓϩμΫτʹ Vue.js ಋೖͯ͠ Ϳ͔ͭͬͨ՝୊Λڞ༗͠·͢ ະղܾ՝୊΋͋Γ·͢

Slide 6

Slide 6 text

1. Ξϩʔԋࢉࢠ࢖͑ͳ͍෦෼͕͋Δ

Slide 7

Slide 7 text

ࠓ͔ΒJavaScriptॻ͘ͳΒ ES2015+ ͔ TypeScript

Slide 8

Slide 8 text

ؔ਺ఆٛ΋Ξϩʔԋࢉࢠ () => {}

Slide 9

Slide 9 text

VueίϯϙʔωϯτͰ͸ جຊతʹΞϩʔԋࢉࢠ͸࢖͑ͳ͍

Slide 10

Slide 10 text

͜Ε͕NG export default { // ... methods: { changeText: () => { this.text = "foobar"; } } } VueΠϯελϯεΛࢦ͢ ͕ࢀরͰ͖ͳ͍ this

Slide 11

Slide 11 text

͜ΕͳΒOK export default { // ... methods: { changeText() { this.text = "foobar"; } } } ࣍ظv3ͰͷରԠʹ ظ଴͠·͠ΐ͏

Slide 12

Slide 12 text

2. ΦϒδΣΫτͷߋ৽ํ๏

Slide 13

Slide 13 text

Vue.js ͱ͍͑͹ ϦΞΫςΟϒγεςϜ

Slide 14

Slide 14 text

JavaScriptΦϒδΣΫτͷߋ৽Ͱ Ϗϡʔ͕ࣗಈߋ৽͞ΕΔ

Slide 15

Slide 15 text

ͱͯ΋ศརɺ͘͢͝

Slide 16

Slide 16 text

੍ͨͩ͠໿΋͋Δ • VueΠϯελϯε͕ॳظԽ͞ΕΔͱ͖ʹ  ౉͞ΕͨJSΦϒδΣΫτʹରͯ͠ Object.deﬁnePropertyؔ਺Ͱgetter/setterΛͭ͘Δ • ͜ΕΒͷΞΫηοαΛར༻ͯ͠มߋݕ஌Λ͢Δ

Slide 17

Slide 17 text

͜Ε͸OK จࣈྻΛม͑Δ export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ", size: 16 } }; }, methods: { changeText() { this.textObject.value = "มߋͨ͠จࣈྻ"; } } }; ॳظ஋ʹ͋Δ஋Λૢ࡞

Slide 18

Slide 18 text

͜Ε͸OK จࣈྻΛม͑Δ export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ", size: 16 } }; }, methods: { changeText() { this.textObject.value = "มߋͨ͠จࣈྻ"; } } }; ॳظ஋ʹ͋Δ஋͸ ॻ͖׵͑Ε͹ը໘ʹ൓ө͞ΕΔ ॳظ஋ʹ͋Δ஋Λૢ࡞

Slide 19

Slide 19 text

͜Ε͸NG αΠζΛઃఆ͢Δ export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ" } }; }, methods: { setSize() { this.textObject.size = 16; } } }; ॳظ஋ʹͳ͍஋Λૢ࡞

Slide 20

Slide 20 text

͜Ε͸NG αΠζΛઃఆ͢Δ export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ" } }; }, methods: { setSize() { this.textObject.size = 16; } } }; ॳظ஋ʹͳ͍஋͸ ௥Ճͯ͠΋มߋ͕ݕ஌͞Εͳ͍ ໌ࣔతʹ this.$set(this.textObject, “size”, 16); ॳظ஋ʹͳ͍஋Λૢ࡞

Slide 21

Slide 21 text

3. ཁૉ໊ͷিಥ

Slide 22

Slide 22 text

vue΋ϥΠϒϥϦ͕ ͲΜͲΜ੔උ͞Ε͍ͯΔ

Slide 23

Slide 23 text

ϥΠϒϥϦͷཁૉ໊ॏෳ • ϚςϦΞϧσβΠϯͳUIϥΠϒϥϦͷVuetify • ͱ͔ͱ͔ͰΦγϟϨUI࡞ΕΔ • Canvasૢ࡞ϥΠϒϥϦͷKonvaΛϥοϓͨ͠vue-konva • ը૾ΦϒδΣΫτΛͰࢦఆ͢Δ

Slide 24

Slide 24 text

ϥΠϒϥϦͷཁૉ໊ॏෳ • ϚςϦΞϧσβΠϯͳUIϥΠϒϥϦͷVuetify • ͱ͔ͱ͔ͰΦγϟϨUI࡞ΕΔ • Canvasૢ࡞ϥΠϒϥϦͷKonvaΛϥοϓͨ͠vue-konva • ը૾ΦϒδΣΫτΛͰࢦఆ͢Δ

Slide 25

Slide 25 text

ॏෳ

Slide 26

Slide 26 text

ಈ࡞͠·ͤΜͰͨ͠

Slide 27

Slide 27 text

ཁૉ໊ͷϧʔϧ • Vue.js ελΠϧΨΠυ https://jp.vuejs.org/v2/style-guide/index.html

Slide 28

Slide 28 text

͍͓ͪ͏ճආͰ͖ΔͬΆ͍ॻ͖ํ΋ ౰࣌͸ʮผ໊Λ͚ͭΔʯ΍Γํ͕෼͔Βͣ٧ΜͰ͍ͨ import ComponentA from "@/components/hoge/ComponentA"; import ComponentA2 from "@/components/fuga/ComponentA"; export default { components: { "hoge-comp-a": ComponentA, "fuga-comp-a": ComponentA2 } } ಛʹ͜ͷॻ͖ํ }

Slide 29

Slide 29 text

4. ηΦϦʔΘ͔Βͳ͍

Slide 30

Slide 30 text

ϓϩμΫτͰ࡞Δͱ େྔͷ໋໊΍ɺϞδϡʔϧ෼ׂΛ ରॲ͠ͳ͚Ε͹ͳΒͳ͍

Slide 31

Slide 31 text

camelCaseͳͷ͔ PascalCaseͳͷ͔ kebab-caseͳͷ͔

Slide 32

Slide 32 text

ϞδϡʔϧڥքΛ Ͳ͜ʹҾ͚͹͍͍ͷ͔

Slide 33

Slide 33 text

Vue.js ͸υΩϡϝϯτ͕ ॆ࣮͍ͯ͠Δ

Slide 34

Slide 34 text

ελΠϧΨΠυ͕͋ΔͷͰ·ͣ͸ख़ಡ • Vue.js ελΠϧΨΠυʢެࣜʣ • https://jp.vuejs.org/v2/style-guide/ • Vue.js ίϯϙʔωϯτ ελΠϧΨΠυ • https://pablohpsilva.github.io/vuejs-component- style-guide/#/japanese • ౰ॳͪ͜ΒͷଘࡏΛ஌Βͳ͔ͬͨͷͰۤ͠ΜͰ͍Δ

Slide 35

Slide 35 text

5. Vuex ࢖͍͗͢໰୊

Slide 36

Slide 36 text

ηΦϦʔ͕Θ͔Βͳ͔ͬͨ݁Ռ

Slide 37

Slide 37 text

Vuex ʹա৒࣮૷

Slide 38

Slide 38 text

Vuex(Flux)ͷΞʔΩςΫνϟ https://vuex.vuejs.org/ja/

Slide 39

Slide 39 text

Vuexͷ࣮૷ηΦϦʔ • State • ঢ়ଶΛอଘ͢ΔʢάϩʔόϧͬΆ͍ม਺ྖҬʣ • ໌Β͔ʹଟ༻ͨ͠Βμϝͳงғؾ • Mutation ؔ਺܈ • State Λߋ৽͢Δ།Ұͷॲཧ܈ • ಉظॲཧతʹ࣮૷͢Δ • Action ؔ਺܈ • ඇಉظॲཧΛ࣮૷ͯ͠Α͍ • State ͷߋ৽͸ Mutation ܦ༝

Slide 40

Slide 40 text

Vuexͷ࣮૷ηΦϦʔ • State • ঢ়ଶΛอଘ͢ΔʢάϩʔόϧͬΆ͍ม਺ྖҬʣ • ໌Β͔ʹଟ༻ͨ͠Βμϝͳงғؾ • Mutation ؔ਺܈ • State Λߋ৽͢Δ།Ұͷॲཧ܈ • ಉظॲཧతʹ࣮૷͢Δ • Action ؔ਺܈ • ඇಉظॲཧΛ࣮૷ͯ͠Α͍ • State ͷߋ৽͸ Mutation ܦ༝ ←͜ΕΛ֦େղऍͯ͠͠·ͬͨ

Slide 41

Slide 41 text

ඇಉظσʔλऔಘॲཧΛ ͢΂ͯVuexͰ࣮૷

Slide 42

Slide 42 text

ઈࢍҾ͖ฦ͠த

Slide 43

Slide 43 text

ίϯϙʔωϯτʹด͡Δ΋ͷ͸ ඇಉظॲཧͰ΋ίϯϙʔωϯτ಺ʹ هड़͢Ε͹Α͍

Slide 44

Slide 44 text

6. ෆద੾ͳmixins

Slide 45

Slide 45 text

Vueίϯϙʔωϯτʹ͸ v-model ଐੑͱ͍͏ ศརͳଐੑ͕͋Γ·͢

Slide 46

Slide 46 text

Vue.jsͷίϯϙʔωϯτؒ௨৴ • ਌ίϯϙʔωϯτ͔Β • v-bind:ϓϩύςΟ໊ Ͱ౉͢ • v-on:Πϕϯτ໊ Ͱड͚औΔ

Slide 47

Slide 47 text

Vue.jsͷίϯϙʔωϯτؒ௨৴ • ࢠίϯϙʔωϯτ • props ϓϩύςΟ಺ʹఆٛͯ͠ड͚औΔ • this.$emit ͰΠϕϯτૹ৴ͯ͠ฦ͢ props: { key: { type: Number, default: 0 } }, methods: { onChange(value) { this.$emit("on-change", value); } }

Slide 48

Slide 48 text

v-modelͱ͸ • ϓϩύςΟ໊ͱΠϕϯτ໊Λݻఆͨ͠౶ҥߏจ • ड͚౉͢ϓϩύςΟ໊Λ value • ฦ͢ΠϕϯτΛ input

Slide 49

Slide 49 text

v-modelͱ͸ • ϓϩύςΟ໊ͱΠϕϯτ໊Λݻఆͨ͠౶ҥߏจ • ड͚౉͢ϓϩύςΟ໊Λ value • ฦ͢ΠϕϯτΛ input ͨͩ͜͠Ε͸ ਌ίϯϙʔωϯτͷ͸ͳ͠

Slide 50

Slide 50 text

v-modelରԠͳࢠίϯϙʔωϯτ • ຖճ͜ΕΛॻ͔ͳ͍ͱ͍͚ͳ͍ export default { props: { value: { type: String, default: undefined } }, methods: { onInput(value) { this.$emit("input", value); } } }

Slide 51

Slide 51 text

v-modelରԠͳࢠίϯϙʔωϯτ • ຖճ͜ΕΛॻ͔ͳ͍ͱ͍͚ͳ͍ export default { props: { value: { type: String, default: undefined } }, methods: { onInput(value) { this.$emit("input", value); } } } ϛοΫεΠϯͰ ·ͱΊͨΖ

Slide 52

Slide 52 text

͜͜͸·ͩݕূதͰ͢

Slide 53

Slide 53 text

propsΛmixins͢Δͷ͸μϝͦ͏ • mixinsΛղܾ͢Δ·ͰͷҰॠvalue͕undeﬁnedʹͳΔ • template಺Ͱ࢖͍ͬͯΔͱίϯιʔϧΤϥʔ͕ग़Δ • slotͱ͔͏·͘࢖ͬͨΒڞ௨Խ͸Ͱ͖Δ͔΋͠Εͳ͍ • ↑ࢼ͍ͤͯ·ͤΜ • ੈؒͷUIϥΠϒϥϦͷιʔεΛݟͨײͩ͡ͱ  ͜͜͸ڞ௨Խ͠ͳ͍ͷ͕ηΦϦʔͳؾ͕͍ͯ͠Δ

Slide 54

Slide 54 text

Ͱ΋τʔλϧͰ͸ ಋೖͯ͠޾ͤʹͳ͍ͬͯ·͢

Slide 55

Slide 55 text

ྑ͍ͱ͜Ζ΋αϥοͱ

Slide 56

Slide 56 text

1. ୯ҰϑΝΠϧίϯϙʔωϯτ

Slide 57

Slide 57 text

DOMͱॲཧͱελΠϧΛ·ͱΊΒΕͯૉఢ • ҙຯͷ͋Δ୯ҐͰѻ͑Δ • CSS͕ scoped Ͱ1ϑΝΠϧʹ ดͯ͡ద༻Ͱ͖Δ • ίʔυ͕ංେԽ͠ʹ͍͘ export default { data() { title: "λΠτϧ"; } }; .title { font-size: large; }