フロントエンド初学者のためのNuxt.jsの歩き方

フロントエンド初学者のためのNuxt.jsの歩き方というタイトルで2018/8/24に開催された名無し勉強会にて発表しました

Transcript

1. ϑϩϯτΤϯυॳֶऀͷͨΊͷ Nuxt.jsͷา͖ํ QFBDF
   PG
   DBLF
   JOD
   ෱Ҫ
   ྽ ໊ແ͠ษڧձ
   
2. ϓϩϑΟʔϧ • @fukuiretu / ෱Ҫ ྽ • ੨৿ݝ߂લࢢࡏॅ •ʢגʣϐʔεΦϒέΠΫ • ΞΠγϯάΫοΩʔઐ໳ళ en Web/ܦཧ/ϝʔϧ୲౰ https://twitter.com/fukuiretu https://www.facebook.com/fukuiretu https://github.com/fukuiretu
3. Nuxt.jsͬͯ ฉ͍ͨ͜ͱ͋Γ·͔͢??
4. IUUQTOPUFNVLPOQZVOOCCG
5. ࠾༻αʔϏε(اۀ)ଓʑ…
6. IUUQTOPUFNVSOOFGDF
7. ࠓ೔ͷ͓୊ Nuxt.jsͷັྗΛ͓఻͑ͭͭ͠ɺ ݸਓతʹ ޮ཰తͩͱ͓΋͏ ษڧͷਐΊํ Λ͓࿩͠·͢
8. Nuxt.jsͱ͸ IUUQTKBOVYUKTPSHHVJEF
9. w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ
 -> PWAͷରԠͳͲ΋༰қʹ
   w Vue.jsͷΤίγεςϜΛ౷߹
 -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍ Nuxt.jsͷԸܙ
10. Vue.jsͱ͸ ࢧ࣋͞ΕΔҰ൪ͷཧ༝
    ͩͱࢥͬͯ·͢
11. IUUQTRJJUBDPNNJPJPJUFNTFCECFFG ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍
12. K2VFSZ
    w ηϨΫλ͔ΒཁૉΛ୳ͯ͠ૢ࡞ w HTMLͷߏ଄͕มΘΔͱཁૉͷऔಘํ๏΋มΘΔՄ ೳੑ͕͋Δ
 -> JavaScriptͷίʔυ΋ཁมߋ
 -> HTMLͷߏ଄͕ෳࡶʹͳΕ͹ͳΔ΄Ͳਏ͍… ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍ IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
13. 7VF
    w JavaScriptͷσʔλͱHTMLͷཁૉΛඥ෇͚ͯɺ σʔλ͕มΘΕ͹ࣗಈతʹ൓ө w HTMLͷߏ଄͕มΘΖ͏͕ಛʹӨڹ͸ड͚ͳ͍
 -> JavaScriptͷίʔυͷมߋ͸ෆཁ ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍ IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
14. ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍ K2VFSZ 7VFKT IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
15. Nuxt.jsͷԸܙ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ
 -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹
 -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
16. w webpackΛ಺แ
    w js, css, htmlͷѹॖ w cssͷΠϯϥΠϯల։
    w auto prefixer w CFCFMΛ಺แ w ES6ΛτϥϯεύΠϧ w SSR (Server Side Rendering) w preload(ࣄલಡΈࠐΈ) etc….. ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
17. Nuxt.jsͷԸܙ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ
 -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹
 -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
18. ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ ࠷௿ݶ͜Ε͚֮ͩ͑Ε͹·ͣ͸ಈ͔ͤΔ ઃఆϑΝΠϧ ϖʔδͷ෦඼
19. Nuxt.jsͷԸܙ ຊ࣭తͳ։ൃʹूதͰ͖Δ w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ w ϓϥΨϒϧʹ֦ு͕Մೳ
 -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹
 -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
20. Ͳ͏ษڧ͢Ε͹ޮ཰త͔
22. js(ES6)ͷษڧ ProgateͷJavaScriptίʔεΛडߨ͠·͠ΐ͏ IUUQTQSPHDPNMBOHVBHFTFT
23. 1. ΍ΘΒ͔Vue.jsΛͬ͟ͱಡΜͰ֓ཁΛ௫Ή 2. جૅ͔ΒֶͿVue.jsΛಡΉ 3. LearnCode.academyΛݟͯࣸܦ͢Δ ※ެࣜυΩϡϝϯτ΋ඞͣ໨Λ௨͠·͠ΐ͏ Vue.jsͷษڧ
24. ΍ΘΒ͔7VFKT IUUQTTDSBQCPYJPWVFZBXBSBLB
25. جૅ͔ΒֶͿ7VFKT IUUQTXXXBNB[PODPKQEQ#%#:).;
26. -FBSO$PEFBDBEFNZ IUUQTXXXZPVUVCFDPNQMBZMJTU MJTU1-P:$H/0*Z("%;VW,+XFVU;%007*:J+
27. ະൃചͰ͕͢ඞಡͰ͢ͷͰਖ਼࠲Ͱ଴ػ͠·͠ΐ͏ IUUQTXXXBNB[PODPKQEQ 7VFKTೖ໳
    جૅ͔Β࣮ફΞϓϦέʔγϣϯ։ൃ·Ͱ
28. 1. Nuxt tech bookΛಡΉ 2. NuxtެࣜͰ༻ҙ͞Ε͍ͯΔαϯϓϧ΍ޙड़ͷॻ ੶هࡌͷίʔυΛࣸܦ͢Δ • https://github.com/nuxt/todomvc • https://github.com/nuxt/hackernews ※ެࣜυΩϡϝϯτ΋ඞͣ໨Λ௨͠·͠ΐ͏ Nuxt.jsͷษڧ
29. /VYU
    UFDI
    CPPL IUUQTCPPUIQNKBJUFNT
30. "VUIͰͭ͘Δʂೝূ෇͖41" IUUQTCPPUIQNKBJUFNT
31. Nuxt.jsͷษڧ 7VFKTͱ'JSFCBTFͰͭ͘Δϛχ8FCαʔϏε IUUQTXXXBNB[PODPKQEQ#'-,74
32. Let’s Enjoy Nuxt.js!!