Vue/Nuxt tutorial for Sendai

Transcript

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

   Founder & Engineer

2. @masuidrive Yuichiro MASUI

3. τϨλ ݩCTO

4. None
5. None
6. None

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

8. झຯ͸DJͰ͢

9. None
10. None
11. None
12. None
13. None

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

    React

15. Frontendͷมભ • jQuery / Prototype.js 
 DOMૢ࡞ • Angular /

    Backbone.js 
 MVCతͳϑϨʔϜϫʔΫ / ςετ • React / Vue 
 Reactive / ViewϨΠϠʔͷΈ

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

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

    • 2015 - ReactNative

18. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit)

    React αʔόϩδοΫ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)

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."

20. React vs Vue • VirtualDOM,Component,ReactiveͳͲجຊ͸Ұॹ • Reactͷํ͕७ਮ • Vue͸ͪΐͬͱΰνϟΰνϟ •

    ྆ํͱ΋جຊ͸ViewϨΠϠʔ͚ͩͰɺσʔλؔ܎ ͸ผͷπʔϧͱ૊Έ߹͑ΘͤΔඞཁ͋Γ

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

    ES6ͷߏจ͕࢖͑Δ

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

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

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

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

26. Ϣʔβͷ໊લ͕มߋ͞Εͨ৔߹ • jQueryͷ৔߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞ Ε͍ͯΔ͔ɺid΍classͰ؅ཧͯ͠ॻ͖׵͑Δ ඞཁ͕͋Δɻ 
 දࣔͱߋ৽͕ผͷ࢓૊Έɻ • Vue͸ը໘Λ΋͏Ұճॻ͖௚͢

27. ԋश

28. Nuxt.js • Vue + Vuex + Vue-Router + asyncData +

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

29. Vuex • https://vuex.vuejs.org/ja/guide/ • VueͰ࢖ΘΕΔσʔλετΞ • ReactͰ͍͏Redux • େ͖ͳάϩʔόϧม਺ •

    ετΞΛߋ৽͢Δͱؔ܎͢Δίϯϙʔωϯτ͕ࣗ ಈతʹߋ৽͞ΕΔ

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

    ϦϯΫ͸<a>͡Όͳͯ͘<NuxtLink to=“”/>ͰுΔ

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

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

    ߟ͑ͯඳ͘ͷͩΔ͍

33. ԋश

34. ૯ׅ