Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

moomoo-ya
February 19, 2019

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

RAKUS Meetup Tokyo #2
2019.2.19

moomoo-ya

February 19, 2019
Tweet

More Decks by moomoo-ya

Other Decks in Programming

Transcript

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

    • झຯ • ITωλͷΞφϩάήʔϜ੍࡞ • ࣾ಺Ψϯϓϥ෦෦௕ • ITۀքଟΊͷαόήओ࠵ @moomooya @moomoo-ya
  2. ུྺ • ߴߍʙେֶʙ৽ଔ • ߴߍͰ͸ϓϩάϥϜίϯςετք۾Λ͏Ζ͏Ζ • IPAʢ౰࣌͸௨࢈লʣͷࢿ֨औΓ͋͞Γ • େखSIer ࣌୅

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

    // ... methods: { changeText: () => { this.text = "foobar"; } } } </script> VueΠϯελϯεΛࢦ͢ ͕ࢀরͰ͖ͳ͍ this
  4. ͜ΕͳΒOK <template> <!-- ... --> </template> <script> export default {

    // ... methods: { changeText() { this.text = "foobar"; } } } </script> ࣍ظv3ͰͷରԠʹ ظ଴͠·͠ΐ͏
  5. ͜Ε͸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> ॳظ஋ʹ͋Δ஋Λૢ࡞
  6. ͜Ε͸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> ॳظ஋ʹ͋Δ஋͸ ॻ͖׵͑Ε͹ը໘ʹ൓ө͞ΕΔ ॳظ஋ʹ͋Δ஋Λૢ࡞
  7. ͜Ε͸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> ॳظ஋ʹͳ͍஋Λૢ࡞
  8. ͜Ε͸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); ॳظ஋ʹͳ͍஋Λૢ࡞
  9. ͍͓ͪ͏ճආͰ͖ΔͬΆ͍ॻ͖ํ΋ ౰࣌͸ʮผ໊Λ͚ͭΔʯ΍Γํ͕෼͔Βͣ٧ΜͰ͍ͨ <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> ಛʹ͜ͷॻ͖ํ }
  10. ελΠϧΨΠυ͕͋ΔͷͰ·ͣ͸ख़ಡ • Vue.js ελΠϧΨΠυʢެࣜʣ • https://jp.vuejs.org/v2/style-guide/ • Vue.js ίϯϙʔωϯτ ελΠϧΨΠυ

    • https://pablohpsilva.github.io/vuejs-component- style-guide/#/japanese • ౰ॳͪ͜ΒͷଘࡏΛ஌Βͳ͔ͬͨͷͰۤ͠ΜͰ͍Δ
  11. Vuexͷ࣮૷ηΦϦʔ • State • ঢ়ଶΛอଘ͢ΔʢάϩʔόϧͬΆ͍ม਺ྖҬʣ • ໌Β͔ʹଟ༻ͨ͠Βμϝͳงғؾ • Mutation ؔ਺܈

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

    • State Λߋ৽͢Δ།Ұͷॲཧ܈ • ಉظॲཧతʹ࣮૷͢Δ • Action ؔ਺܈ • ඇಉظॲཧΛ࣮૷ͯ͠Α͍ • State ͷߋ৽͸ Mutation ܦ༝ ←͜ΕΛ֦େղऍͯ͠͠·ͬͨ
  13. Vue.jsͷίϯϙʔωϯτؒ௨৴ • ࢠίϯϙʔωϯτ • props ϓϩύςΟ಺ʹఆٛͯ͠ड͚औΔ • this.$emit ͰΠϕϯτૹ৴ͯ͠ฦ͢ props:

    { key: { type: Number, default: 0 } }, methods: { onChange(value) { this.$emit("on-change", value); } }
  14. 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>
  15. 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> ͨͩ͜͠Ε͸ ਌ίϯϙʔωϯτͷ͸ͳ͠
  16. v-modelରԠͳࢠίϯϙʔωϯτ • ຖճ͜ΕΛॻ͔ͳ͍ͱ͍͚ͳ͍ export default { props: { value: {

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

    type: String, default: undefined } }, methods: { onInput(value) { this.$emit("input", value); } } } ϛοΫεΠϯͰ ·ͱΊͨΖ
  18. 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>
  19. ελΠϧΨΠυ͕͋ΔͷͰ·ͣ͸ख़ಡ • Vue.js ελΠϧΨΠυʢެࣜʣ • https://jp.vuejs.org/v2/style-guide/ • Vue.js ίϯϙʔωϯτ ελΠϧΨΠυ

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