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

107ba69ff7888cacdb4307a28adf5527?s=47 Retu Fukui
August 27, 2018

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

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

107ba69ff7888cacdb4307a28adf5527?s=128

Retu Fukui

August 27, 2018
Tweet

Transcript

  1. ϑϩϯτΤϯυॳֶऀͷͨΊͷ Nuxt.jsͷา͖ํ QFBDFPGDBLF 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. /VYUUFDICPPL IUUQTCPPUIQNKBJUFNT

  30. "VUIͰͭ͘Δʂೝূ෇͖41" IUUQTCPPUIQNKBJUFNT

  31. Nuxt.jsͷษڧ 7VFKTͱ'JSFCBTFͰͭ͘Δϛχ8FCαʔϏε IUUQTXXXBNB[PODPKQEQ#'-,74

  32. Let’s Enjoy Nuxt.js!!