Vue/Nuxt tutorial for Sendai

Transcript

1. Vue / Nuxt
   
   
   Tutorial
   
   
   for Sendai
   Yuichiro MASUI @masuidrive
   
   
   Product Founder & Engineer
   

   View Slide

2. @masuidrive
   
   
   Yuichiro MASUI
   

   View Slide

3. τϨλ ݩCTO
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. https://masuidrive.jp/resume
   Yuichiro MASUI (masuidrive) | Product Founder & Engineer
   

   View Slide

8. झຯ͸DJͰ͢
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. օ͞Μͷ࿩Λฉ͔͍ͤͯͩ͘͞
    • HTML/CSSͷܦݧ
    
    
    • Javascript
    
    
    • ଞͷϓϩάϥϛϯάݴޠ
    
    
    • jQuery
    
    
    • React
    

    View Slide

15. Frontendͷมભ
    • jQuery / Prototype.js
    

    DOMૢ࡞
    
    
    • Angular / Backbone.js
    

    MVCతͳϑϨʔϜϫʔΫ / ςετ
    
    
    • React / Vue
    

    Reactive / ViewϨΠϠʔͷΈ
    

    View Slide

16. 1ը໘಺Ͱͷঢ়ଶભҠ͕ෳࡶ
    ͗ͯ͢ਓྨʹ͸ແཧ
    

    View Slide

17. Reactొ৔
    • 2010 - ಺෦ϦϦʔε
    
    
    • 2013/5 - Open SourceϦϦʔε
    
    
    • 2015 - ReactNative
    

    View Slide

18. ΫϥΠΞϯτϩδοΫ
    αʔόαΠυੜ੒
    ϒϥ΢β
    ϩδοΫ (ίϯτϩʔϥ)
    ϦΫΤετ
    αʔό
    ΫϥΠΞϯτ
    Πϕϯτ (onSubmit)
    React
    αʔόϩδοΫ
    HTMLੜ੒෦ (render)
    HTMLੜ੒෦ (ςϯϓϨʔτ)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
    

    View Slide

19. Vue.js
    • ݩAngular։ൃऀͷEvan You͕Founder
    
    
    • 2014/2ʹϦϦʔε
    
    
    • "I
    fi
    gured, what if I could just extract the part
    that I really liked about Angular and build
    something really lightweight."
    

    View Slide

20. React vs Vue
    • VirtualDOM,Component,ReactiveͳͲجຊ͸Ұॹ
    • Reactͷํ͕७ਮ
    
    
    • Vue͸ͪΐͬͱΰνϟΰνϟ
    
    
    • ྆ํͱ΋جຊ͸ViewϨΠϠʔ͚ͩͰɺσʔλؔ܎
    ͸ผͷπʔϧͱ૊Έ߹͑ΘͤΔඞཁ͋Γ
    

    View Slide

21. ɹͳͥVueΛ࢖͏ͷ͔
    • ΫϥΠΞϯταΠυͰ΍Δ͜ͱ͕૿େ
    
    
    • Ұͭͷը໘Ͱෳ਺ͷঢ়ଶ͕ಈ͘
    
    
    • όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ
    
    
    • εϚϗͳͲෳ਺ͷ୺຤ͷαϙʔτ
    
    
    • ES6ͷߏจ͕࢖͑Δ
    

    View Slide

22. ɹͳͥVueΛ࢖͏ͷ͔
    • ΋ͬͱγϯϓϧʹ࡞Γ͍ͨ
    
    
    • ࠶ར༻ੑΛߴΊ͍ͨ
    
    
    • ϧʔϧΛܾΊ͍ͨ
    

    View Slide

23. ͳͥੲ͸γϯϓϧͩͬͨͷ͔
    • ը໘͕ঢ়ଶΛ࣋ͨͳ͍
    
    
    • ը໘Λॻ͖׵͑Δʹ͸ભҠͯ͠શମΛॻ͖׵
    ͑Δ
    

    View Slide

24. jQuery
    • DOMΛૢ࡞͢Δ
    
    
    • ը໘ͷҰ෦෼͚ͩॻ͖׵͑Δ
    
    
    • Ͳ͔͜Βॻ͖׵͑ΒΕͨͷ͔Θ͔Βͳ͍
    

    View Slide

25. ݱࡏͷWeb
    • ը໘ͷ͋ͪͪ͜ͰΠϕϯτ͕ൃੜͯ͠
    
    
    • ͕͋ͪͪ͜ඇಉظʹॻ͖׵͕͑ى͜Δ
    
    
    • όʔδϣϯΞοϓ΋ߴස౓Ͱ
    
    
    • େن໛
    

    View Slide

26. Ϣʔβͷ໊લ͕มߋ͞Εͨ৔߹
    • jQueryͷ৔߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞
    Ε͍ͯΔ͔ɺid΍classͰ؅ཧͯ͠ॻ͖׵͑Δ
    ඞཁ͕͋Δɻ
    

    දࣔͱߋ৽͕ผͷ࢓૊Έɻ
    
    
    • Vue͸ը໘Λ΋͏Ұճॻ͖௚͢
    

    View Slide

27. ԋश
    

    View Slide

28. Nuxt.js
    • Vue + Vuex + Vue-Router + asyncData +
    ServerSideRendering
    
    
    • ࠓ͸Vueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔
    Βલ΄Ͳॏཁ͡Όͳ͍
    
    
    • Ͱ΋σΟϨΫτϦߏ଄΍αϯϓϧ͕ࢀߟʹͳ
    Δ
    

    View Slide

29. Vuex
    • https://vuex.vuejs.org/ja/guide/
    
    
    • VueͰ࢖ΘΕΔσʔλετΞ
    
    
    • ReactͰ͍͏Redux
    
    
    • େ͖ͳάϩʔόϧม਺
    
    
    • ετΞΛߋ৽͢Δͱؔ܎͢Δίϯϙʔωϯτ͕ࣗ
    ಈతʹߋ৽͞ΕΔ
    

    View Slide

30. Vue-router
    • URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά
    
    
    • pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ
    
    
    • pages/items/_id.vueͰϫΠϧυΧʔυ
    

    this.$route.params.idͰݺͼग़ͤΔ
    
    
    • ϦϯΫ͸͡Όͳͯ͘ͰுΔ
    

    View Slide

31. asyncData
    • https://ja.nuxtjs.org/docs/2.x/features/data-
    fetching/#async-data
    
    
    • ඇಉظͰσʔλΛͱͬͯ͘Δ࢓૊Έ
    
    
    • APIݺͼग़͕͠؆୯ʹͳΔ
    

    View Slide

32. ServerSideRendering
    • αʔόͰVueΛ࣮ߦͯ͠HTMLΛੜ੒ͯ͠ૹΔ
    
    
    • ݕࡧʹҾ͔͔ͬΔ
    
    
    • ಡΈࠐΈ͕଎͘ͳΔ
    
    
    • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ
    
    
    • ߟ͑ͯඳ͘ͷͩΔ͍
    

    View Slide

33. ԋश
    

    View Slide

34. ૯ׅ
    

    View Slide