フロントエンド初学者のためのNuxt.jsの歩き方というタイトルで2018/8/24に開催された名無し勉強会にて発表しました
ϑϩϯτΤϯυॳֶऀͷͨΊͷNuxt.jsͷา͖ํQFBDFPGDBLF JODҪ໊ແ͠ษڧձ
View Slide
ϓϩϑΟʔϧ• @fukuiretu / Ҫ • ੨ݝ߂લࢢࡏॅ•ʢגʣϐʔεΦϒέΠΫ• ΞΠγϯάΫοΩʔઐళ enWeb/ܦཧ/ϝʔϧ୲https://twitter.com/fukuiretuhttps://www.facebook.com/fukuiretuhttps://github.com/fukuiretu
Nuxt.jsͬͯฉ͍ͨ͜ͱ͋Γ·͔͢??
IUUQTOPUFNVLPOQZVOOCCG
࠾༻αʔϏε(اۀ)ଓʑ…
IUUQTOPUFNVSOOFGDF
ࠓͷ͓Nuxt.jsͷັྗΛ͓͑ͭͭ͠ɺݸਓతʹޮతͩͱ͓͏ษڧͷਐΊํΛ͓͠·͢
Nuxt.jsͱIUUQTKBOVYUKTPSHHVJEF
w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹw ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔw ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹw Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍Nuxt.jsͷԸܙ
Vue.jsͱࢧ࣋͞ΕΔҰ൪ͷཧ༝ ͩͱࢥͬͯ·͢
IUUQTRJJUBDPNNJPJPJUFNTFCECFFGΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍
K2VFSZw ηϨΫλ͔ΒཁૉΛ୳ͯ͠ૢ࡞w HTMLͷߏ͕มΘΔͱཁૉͷऔಘํ๏มΘΔՄೳੑ͕͋Δ -> JavaScriptͷίʔυཁมߋ -> HTMLͷߏ͕ෳࡶʹͳΕͳΔ΄Ͳਏ͍…ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
7VFw JavaScriptͷσʔλͱHTMLͷཁૉΛඥ͚ͯɺσʔλ͕มΘΕࣗಈతʹөw HTMLͷߏ͕มΘΖ͏͕ಛʹӨڹड͚ͳ͍ -> JavaScriptͷίʔυͷมߋෆཁΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
ΈΜͳ͕Αͬͯ͘ΔjQueryͱͷҧ͍K2VFSZ 7VFKTIUUQTRJJUBDPNNJPJPJUFNTFCECFFG
Nuxt.jsͷԸܙw ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹw ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔw ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹw Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
w webpackΛแw js, css, htmlͷѹॖw cssͷΠϯϥΠϯల։w auto prefixerw CFCFMΛแw ES6ΛτϥϯεύΠϧw SSR (Server Side Rendering)w preload(ࣄલಡΈࠐΈ) etc…..ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔ࠷ݶ͜Ε͚֮ͩ͑Ε·ͣಈ͔ͤΔઃఆϑΝΠϧϖʔδͷ෦
Nuxt.jsͷԸܙຊ࣭తͳ։ൃʹूதͰ͖Δw ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹw ϧʔϧ(ن)͕༧Ί༻ҙ͞Ε͍ͯΔw ϓϥΨϒϧʹ֦ு͕Մೳ -> PWAͷରԠͳͲ༰қʹw Vue.jsͷΤίγεςϜΛ౷߹ -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
Ͳ͏ษڧ͢Εޮత͔
js(ES6)ͷษڧProgateͷJavaScriptίʔεΛडߨ͠·͠ΐ͏IUUQTQSPHDPNMBOHVBHFTFT
1. ΘΒ͔Vue.jsΛͬ͟ͱಡΜͰ֓ཁΛ௫Ή2. جૅ͔ΒֶͿVue.jsΛಡΉ3. LearnCode.academyΛݟͯࣸܦ͢Δ※ެࣜυΩϡϝϯτඞͣΛ௨͠·͠ΐ͏Vue.jsͷษڧ
ΘΒ͔7VFKTIUUQTTDSBQCPYJPWVFZBXBSBLB
جૅ͔ΒֶͿ7VFKTIUUQTXXXBNB[PODPKQEQ#%#:).;
-FBSO$PEFBDBEFNZIUUQTXXXZPVUVCFDPNQMBZMJTU MJTU1-P:$H/0*Z("%;VW,+XFVU;%007*:J+
ະൃചͰ͕͢ඞಡͰ͢ͷͰਖ਼࠲Ͱػ͠·͠ΐ͏IUUQTXXXBNB[PODPKQEQ7VFKTೖجૅ͔Β࣮ફΞϓϦέʔγϣϯ։ൃ·Ͱ
1. Nuxt tech bookΛಡΉ2. NuxtެࣜͰ༻ҙ͞Ε͍ͯΔαϯϓϧޙड़ͷॻ੶هࡌͷίʔυΛࣸܦ͢Δ• https://github.com/nuxt/todomvc• https://github.com/nuxt/hackernews※ެࣜυΩϡϝϯτඞͣΛ௨͠·͠ΐ͏Nuxt.jsͷษڧ
/VYUUFDICPPLIUUQTCPPUIQNKBJUFNT
"VUIͰͭ͘Δʂೝূ͖41"IUUQTCPPUIQNKBJUFNT
Nuxt.jsͷษڧ7VFKTͱ'JSFCBTFͰͭ͘Δϛχ8FCαʔϏεIUUQTXXXBNB[PODPKQEQ#'-,74
Let’s Enjoy Nuxt.js!!