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

【コネヒトマルシェオンライン】Vue3触ってみた

yamashooooo
October 20, 2020
250

 【コネヒトマルシェオンライン】Vue3触ってみた

yamashooooo

October 20, 2020
Tweet

Transcript

  1. Vue3৮ͬͯΈͨ
    ʲmedibaࣾ߹ಉษڧձʳ


    ίωώτϚϧγΣΦϯϥΠϯ

    View full-size slide

  2. ࣗݾ঺հ
    • Name: Shota Yamamoto


    • Twitter: @yamam00s


    • Company: גࣜձࣾmedibaʢ2019/10 ೖࣾʣ


    • Team: ςΫϊϩδʔηϯλʔ Eng1G

    View full-size slide

  3. auεϚʔτύεͷϑϩϯτࣄ৘
    • Nuxt.js


    • TypeScript


    • Vuex


    • Jest


    • Storybook


    • etc…

    View full-size slide

  4. ࠓճ৮ΕΔػೳ
    • CompositionAPI


    • Fragment


    • Suspense


    • v-model


    • Teleport

    View full-size slide

  5. Composition API

    View full-size slide

  6. 2.x·ͰͷOptions API

    View full-size slide

  7. 3.xͷ͔ΒͷComposition API

    View full-size slide

  8. ϏδωεϩδοΫΛ


    ·ͱΊ΍͘͢ͳͬͨɻ


    ੾Γग़͠΋Մೳɻ

    View full-size slide

  9. MixinͰ΋Ͱ͖ͨͷͰ͸🤔

    View full-size slide

  10. Composition API vs Mixin
    Mixinͷා͍෦෼


    • ໊લͷڝ߹࣌ͷڍಈ


    • ҉໧తͳґଘؔ܎


    • ઇ่ࣜͳංେԽ

    View full-size slide

  11. Composition APIͰͷuseXXX

    View full-size slide

  12. ΧελϜίϯϙʔωϯτ΁ͷ
    ଐੑͷܧঝ͸Ͳ͏ͳΔ͔

    View full-size slide

  13. ඇಉظͳίϯϙʔωϯτΛ


    TemplateͰ੍ޚͰ͖Δ

    View full-size slide

  14. ৽͍͠v-model

    View full-size slide

  15. ΧελϜίϯϙʔωϯτ΁ͷ


    v-model͕ΑΓ࢖͍΍͘͢ɺ


    ෳ਺ఆٛ΋Մೳʹ

    View full-size slide

  16. ର৅ͷηϨΫλʹૠೖ

    View full-size slide

  17. ҰॹʹΩϟονΞοϓ


    ͍͖ͯ͠·͠ΐ͏ʂ

    View full-size slide

  18. ࠷ޙʹ
    medibaͰ͸ڞʹಇ͘ΤϯδχΞΛ

    ืू͍ͯ͠·͢


    ͓଴͓ͪͯ͠Γ·͢ʂʂʂʂ

    View full-size slide

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

    View full-size slide