Vue / NuxtTutorialfor SendaiYuichiro MASUI @masuidriveProduct Founder & Engineer
View Slide
@masuidriveYuichiro MASUI
τϨλ ݩCTO
https://masuidrive.jp/resumeYuichiro MASUI (masuidrive) | Product Founder & Engineer
झຯDJͰ͢
օ͞ΜͷΛฉ͔͍ͤͯͩ͘͞• HTML/CSSͷܦݧ• Javascript• ଞͷϓϩάϥϛϯάݴޠ• jQuery• React
Frontendͷมભ• jQuery / Prototype.js DOMૢ࡞• Angular / Backbone.js MVCతͳϑϨʔϜϫʔΫ / ςετ• React / Vue Reactive / ViewϨΠϠʔͷΈ
1ը໘Ͱͷঢ়ଶભҠ͕ෳࡶ͗ͯ͢ਓྨʹແཧ
Reactొ• 2010 - ෦ϦϦʔε• 2013/5 - Open SourceϦϦʔε• 2015 - ReactNative
ΫϥΠΞϯτϩδοΫαʔόαΠυੜϒϥβϩδοΫ (ίϯτϩʔϥ)ϦΫΤεταʔόΫϥΠΞϯτΠϕϯτ (onSubmit)ReactαʔόϩδοΫHTMLੜ෦ (render)HTMLੜ෦ (ςϯϓϨʔτ)ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม)
Vue.js• ݩAngular։ൃऀͷEvan You͕Founder• 2014/2ʹϦϦʔε• "Ifigured, what if I could just extract the partthat I really liked about Angular and buildsomething really lightweight."
React vs Vue• VirtualDOM,Component,ReactiveͳͲجຊҰॹ• Reactͷํ͕७ਮ• Vueͪΐͬͱΰνϟΰνϟ• ྆ํͱجຊViewϨΠϠʔ͚ͩͰɺσʔλؔผͷπʔϧͱΈ߹͑ΘͤΔඞཁ͋Γ
ɹͳͥVueΛ͏ͷ͔• ΫϥΠΞϯταΠυͰΔ͜ͱ͕૿େ• Ұͭͷը໘Ͱෳͷঢ়ଶ͕ಈ͘• όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ• εϚϗͳͲෳͷͷαϙʔτ• ES6ͷߏจ͕͑Δ
ɹͳͥVueΛ͏ͷ͔• ͬͱγϯϓϧʹ࡞Γ͍ͨ• ࠶ར༻ੑΛߴΊ͍ͨ• ϧʔϧΛܾΊ͍ͨ
ͳͥੲγϯϓϧͩͬͨͷ͔• ը໘͕ঢ়ଶΛ࣋ͨͳ͍• ը໘Λॻ͖͑ΔʹભҠͯ͠શମΛॻ͖͑Δ
jQuery• DOMΛૢ࡞͢Δ• ը໘ͷҰ෦͚ͩॻ͖͑Δ• Ͳ͔͜Βॻ͖͑ΒΕͨͷ͔Θ͔Βͳ͍
ݱࡏͷWeb• ը໘ͷ͋ͪͪ͜ͰΠϕϯτ͕ൃੜͯ͠• ͕͋ͪͪ͜ඇಉظʹॻ͖͕͑ى͜Δ• όʔδϣϯΞοϓߴසͰ• େن
Ϣʔβͷ໊લ͕มߋ͞Εͨ߹• jQueryͷ߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞Ε͍ͯΔ͔ɺidclassͰཧͯ͠ॻ͖͑Δඞཁ͕͋Δɻ දࣔͱߋ৽͕ผͷΈɻ• Vueը໘Λ͏Ұճॻ͖͢
ԋश
Nuxt.js• Vue + Vuex + Vue-Router + asyncData +ServerSideRendering• ࠓVueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔Βલ΄Ͳॏཁ͡Όͳ͍• ͰσΟϨΫτϦߏαϯϓϧ͕ࢀߟʹͳΔ
Vuex• https://vuex.vuejs.org/ja/guide/• VueͰΘΕΔσʔλετΞ• ReactͰ͍͏Redux• େ͖ͳάϩʔόϧม• ετΞΛߋ৽͢Δͱؔ͢Δίϯϙʔωϯτ͕ࣗಈతʹߋ৽͞ΕΔ
Vue-router• URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά• pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ• pages/items/_id.vueͰϫΠϧυΧʔυ this.$route.params.idͰݺͼग़ͤΔ• ϦϯΫ͡Όͳͯ͘ͰுΔ
asyncData• https://ja.nuxtjs.org/docs/2.x/features/data-fetching/#async-data• ඇಉظͰσʔλΛͱͬͯ͘ΔΈ• APIݺͼग़͕͠؆୯ʹͳΔ
ServerSideRendering• αʔόͰVueΛ࣮ߦͯ͠HTMLΛੜͯ͠ૹΔ• ݕࡧʹҾ͔͔ͬΔ• ಡΈࠐΈ͕͘ͳΔ• ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ• ߟ͑ͯඳ͘ͷͩΔ͍
૯ׅ