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

Transcript

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

2. ླ໦ ༐ʢ͖ͣ͢ ͍͞Ήʣ • ๺ւಓग़਎ 35ࡀ • QiitaͰษڧձϨϙ࠷଎ΦδαϯΛ໨ࢦ͍ͯ͠·͢ • ओʹMicroservicesͱ͔JavaScriptؔ࿈த৺

   • झຯ • ITωλͷΞφϩάήʔϜ੍࡞ • ࣾ಺Ψϯϓϥ෦෦௕ • ITۀքଟΊͷαόήओ࠵ @moomooya @moomoo-ya

3. ུྺ • ߴߍʙେֶʙ৽ଔ • ߴߍͰ͸ϓϩάϥϜίϯςετք۾Λ͏Ζ͏Ζ • IPAʢ౰࣌͸௨࢈লʣͷࢿ֨औΓ͋͞Γ • େखSIer ࣌୅

   • ূ݊/֎ࠃҝସγεςϜͷ্ྲྀ͔ΒԼྲྀ·Ͱ • อݥਃࠐΈγεςϜͷ৽ن։ൃɺͳͲ • খن໛ϕϯνϟʔΛܦ༝ͯ͠ϥΫε΁ • ɹɹɹɹɹɹͷαʔϏε։࢝ • ΤϯδχΞจԽͷ೐΍͔͠ɺͳͲ • ৽نαʔϏε։ൃ ←ࠓ೔͸͜Εͷ͜ͱΛ࿩͠·͢

4. ຊ୊

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

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

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

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

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

10. ͜Ε͕NG <template> <!-- ... --> </template> <script> export default {

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

11. ͜ΕͳΒOK <template> <!-- ... --> </template> <script> export default {

    // ... methods: { changeText() { this.text = "foobar"; } } } </script> ࣍ظv3ͰͷରԠʹ ظ଴͠·͠ΐ͏

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

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

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

15. ͱͯ΋ศརɺ͘͢͝

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

17. ͜Ε͸OK <template> <!-- ༩͑ΒΕͨΦϒδΣΫτ͔Β จࣈྻग़ྗ͢Δίϯϙʔωϯτ --> <text-output v-bind:data="textObject" /> <button

    v-on:click=“changeText()"> จࣈྻΛม͑Δ </button> </template> <script> export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ", size: 16 } }; }, methods: { changeText() { this.textObject.value = "มߋͨ͠จࣈྻ"; } } }; </script> ॳظ஋ʹ͋Δ஋Λૢ࡞

18. ͜Ε͸OK <template> <!-- ༩͑ΒΕͨΦϒδΣΫτ͔Β จࣈྻग़ྗ͢Δίϯϙʔωϯτ --> <text-output v-bind:data="textObject" /> <button

    v-on:click=“changeText()"> จࣈྻΛม͑Δ </button> </template> <script> export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ", size: 16 } }; }, methods: { changeText() { this.textObject.value = "มߋͨ͠จࣈྻ"; } } }; </script> ॳظ஋ʹ͋Δ஋͸ ॻ͖׵͑Ε͹ը໘ʹ൓ө͞ΕΔ ॳظ஋ʹ͋Δ஋Λૢ࡞

19. ͜Ε͸NG <template> <!-- ༩͑ΒΕͨΦϒδΣΫτ͔Β จࣈྻग़ྗ͢Δίϯϙʔωϯτ --> <text-output v-bind:data="textObject" /> <button

    v-on:click=“setSize()”> αΠζΛઃఆ͢Δ </button> </template> <script> export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ" } }; }, methods: { setSize() { this.textObject.size = 16; } } }; </script> ॳظ஋ʹͳ͍஋Λૢ࡞

20. ͜Ε͸NG <template> <!-- ༩͑ΒΕͨΦϒδΣΫτ͔Β จࣈྻग़ྗ͢Δίϯϙʔωϯτ --> <text-output v-bind:data="textObject" /> <button

    v-on:click=“setSize()”> αΠζΛઃఆ͢Δ </button> </template> <script> export default { data() { return { textObject: { value: "ग़ྗ͢Δจࣈྻ" } }; }, methods: { setSize() { this.textObject.size = 16; } } }; </script> ॳظ஋ʹͳ͍஋͸ ௥Ճͯ͠΋มߋ͕ݕ஌͞Εͳ͍ ໌ࣔతʹ this.$set(this.textObject, “size”, 16); ॳظ஋ʹͳ͍஋Λૢ࡞

21. 3. ཁૉ໊ͷিಥ

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

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

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

25. <v-image> ॏෳ

26. ಈ࡞͠·ͤΜͰͨ͠

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

28. ͍͓ͪ͏ճආͰ͖ΔͬΆ͍ॻ͖ํ΋ ౰࣌͸ʮผ໊Λ͚ͭΔʯ΍Γํ͕෼͔Βͣ٧ΜͰ͍ͨ <script> import ComponentA from "@/components/hoge/ComponentA"; import ComponentA2 from

    "@/components/fuga/ComponentA"; export default { components: { "hoge-comp-a": ComponentA, "fuga-comp-a": ComponentA2 } } </script> ಛʹ͜ͷॻ͖ํ }

29. 4. ηΦϦʔΘ͔Βͳ͍

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

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

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

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

34. ελΠϧΨΠυ͕͋ΔͷͰ·ͣ͸ख़ಡ • Vue.js ελΠϧΨΠυʢެࣜʣ • https://jp.vuejs.org/v2/style-guide/ • Vue.js ίϯϙʔωϯτ ελΠϧΨΠυ

    • https://pablohpsilva.github.io/vuejs-component- style-guide/#/japanese • ౰ॳͪ͜ΒͷଘࡏΛ஌Βͳ͔ͬͨͷͰۤ͠ΜͰ͍Δ

35. 5. Vuex ࢖͍͗͢໰୊

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

37. Vuex ʹա৒࣮૷

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

39. Vuexͷ࣮૷ηΦϦʔ • State • ঢ়ଶΛอଘ͢ΔʢάϩʔόϧͬΆ͍ม਺ྖҬʣ • ໌Β͔ʹଟ༻ͨ͠Βμϝͳงғؾ • Mutation ؔ਺܈

    • State Λߋ৽͢Δ།Ұͷॲཧ܈ • ಉظॲཧతʹ࣮૷͢Δ • Action ؔ਺܈ • ඇಉظॲཧΛ࣮૷ͯ͠Α͍ • State ͷߋ৽͸ Mutation ܦ༝

40. Vuexͷ࣮૷ηΦϦʔ • State • ঢ়ଶΛอଘ͢ΔʢάϩʔόϧͬΆ͍ม਺ྖҬʣ • ໌Β͔ʹଟ༻ͨ͠Βμϝͳงғؾ • Mutation ؔ਺܈

    • State Λߋ৽͢Δ།Ұͷॲཧ܈ • ಉظॲཧతʹ࣮૷͢Δ • Action ؔ਺܈ • ඇಉظॲཧΛ࣮૷ͯ͠Α͍ • State ͷߋ৽͸ Mutation ܦ༝ ←͜ΕΛ֦େղऍͯ͠͠·ͬͨ

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

42. ઈࢍҾ͖ฦ͠த

43. ίϯϙʔωϯτʹด͡Δ΋ͷ͸ ඇಉظॲཧͰ΋ίϯϙʔωϯτ಺ʹ هड़͢Ε͹Α͍

44. 6. ෆద੾ͳmixins

45. Vueίϯϙʔωϯτʹ͸ v-model ଐੑͱ͍͏ ศརͳଐੑ͕͋Γ·͢

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

    v-for="post in posts" v-bind:key="post.id" v-on:on-change="onChange" > </blog-post>

47. Vue.jsͷίϯϙʔωϯτؒ௨৴ • ࢠίϯϙʔωϯτ • props ϓϩύςΟ಺ʹఆٛͯ͠ड͚औΔ • this.$emit ͰΠϕϯτૹ৴ͯ͠ฦ͢ props:

    { key: { type: Number, default: 0 } }, methods: { onChange(value) { this.$emit("on-change", value); } }

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

    v-bind:value="post.id" v-on:input="post.id = $event.target.value" > </blog-post> <blog-post v-model="post.id"> </blog-post>

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

    v-bind:value="post.id" v-on:input="post.id = $event.target.value" > </blog-post> <blog-post v-model="post.id"> </blog-post> ͨͩ͜͠Ε͸ ਌ίϯϙʔωϯτͷ͸ͳ͠

50. v-modelରԠͳࢠίϯϙʔωϯτ • ຖճ͜ΕΛॻ͔ͳ͍ͱ͍͚ͳ͍ export default { props: { value: {

    type: String, default: undefined } }, methods: { onInput(value) { this.$emit("input", value); } } }

51. v-modelରԠͳࢠίϯϙʔωϯτ • ຖճ͜ΕΛॻ͔ͳ͍ͱ͍͚ͳ͍ export default { props: { value: {

    type: String, default: undefined } }, methods: { onInput(value) { this.$emit("input", value); } } } ϛοΫεΠϯͰ ·ͱΊͨΖ

52. ͜͜͸·ͩݕূதͰ͢

53. propsΛmixins͢Δͷ͸μϝͦ͏ • mixinsΛղܾ͢Δ·ͰͷҰॠvalue͕undefinedʹͳΔ • template಺Ͱ࢖͍ͬͯΔͱίϯιʔϧΤϥʔ͕ग़Δ • slotͱ͔͏·͘࢖ͬͨΒڞ௨Խ͸Ͱ͖Δ͔΋͠Εͳ͍ • ↑ࢼ͍ͤͯ·ͤΜ •

    ੈؒͷUIϥΠϒϥϦͷιʔεΛݟͨײͩ͡ͱ
 ͜͜͸ڞ௨Խ͠ͳ͍ͷ͕ηΦϦʔͳؾ͕͍ͯ͠Δ

54. Ͱ΋τʔλϧͰ͸ ಋೖͯ͠޾ͤʹͳ͍ͬͯ·͢

55. ྑ͍ͱ͜Ζ΋αϥοͱ

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

57. DOMͱॲཧͱελΠϧΛ·ͱΊΒΕͯૉఢ • ҙຯͷ͋Δ୯ҐͰѻ͑Δ • CSS͕ scoped Ͱ1ϑΝΠϧʹ ดͯ͡ద༻Ͱ͖Δ • ίʔυ͕ංେԽ͠ʹ͍͘

    <template> <blog-post class="title" v-model="title" /> </template> <script> export default { data() { title: "λΠτϧ"; } }; </script> <style scoped> .title { font-size: large; } </style>

58. 2. υΩϡϝϯτ͕ૉ੖Β͍͠

59. ͜͜·Ͱࢀর͍ͯ͠Δ υΩϡϝϯτ͸ ͢΂ͯ೔ຊޠԽࡁΈ

60. ೔தؖͳͲΞδΞݍͰྲྀߦ͍ͬͯΔΒ͍͠

61. ΞδΞݍͰྲྀߦ͍ͬͯΔ ϑϨʔϜϫʔΫ……͏ͬɺ಄͕ Seasar2

62. 3. React + Flux ͷܦݧ΋ϜμʹͳΒͳ͍

63. Vue.js ͷঢ়ଶ؅ཧ Vuex ͸ FluxΞʔΩςΫνϟ

64. ʮ͔ͬͨ͜͡ͱ͕͋Δʯఔ౓Ͱ΋ ཧղͷॿ͚ʹͳΓ·ͨ͠

65. ·ͱΊ

66. ελΠϧΨΠυ͕͋ΔͷͰ·ͣ͸ख़ಡ • Vue.js ελΠϧΨΠυʢެࣜʣ • https://jp.vuejs.org/v2/style-guide/ • Vue.js ίϯϙʔωϯτ ελΠϧΨΠυ

    • https://pablohpsilva.github.io/vuejs-component- style-guide/#/japanese • ౰ॳͪ͜ΒͷଘࡏΛ஌Βͳ͔ͬͨͷͰۤ͠ΜͰ͍Δ

67. ͋Γ͕ͱ͏͍͟͝·ͨ͠