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

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. Ͳ͏ษڧ͢Ε͹ޮ཰త͔

21. None

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!!