Vue/Nuxt tutorial for Sendai

Transcript

1. Vue / Nuxt Tutorial for Sendai Yuichiro MASUI @masuidrive Product Founder & Engineer
2. @masuidrive Yuichiro MASUI
3. τϨλ ݩCTO
7. https://masuidrive.jp/resume Yuichiro MASUI (masuidrive) | Product Founder & Engineer
8. झຯ͸DJͰ͢
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. ૯ׅ