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

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

Transcript

1. ϑϩϯτΤϯυॳֶऀͷͨΊͷ
   Nuxt.jsͷา͖ํ
   QFBDFPGDBLF JOD෱Ҫ྽
   ໊ແ͠ษڧձ
   
   

   View Slide

2. ϓϩϑΟʔϧ
   • @fukuiretu / ෱Ҫ ྽
   • ੨৿ݝ߂લࢢࡏॅ
   •ʢגʣϐʔεΦϒέΠΫ
   • ΞΠγϯάΫοΩʔઐ໳ళ en
   Web/ܦཧ/ϝʔϧ୲౰
   https://twitter.com/fukuiretu
   https://www.facebook.com/fukuiretu
   https://github.com/fukuiretu
   

   View Slide

3. Nuxt.jsͬͯ
   ฉ͍ͨ͜ͱ͋Γ·͔͢??
   

   View Slide

4. IUUQTOPUFNVLPOQZVOOCCG
   

   View Slide

5. ࠾༻αʔϏε(اۀ)ଓʑ…
   

   View Slide

6. IUUQTOPUFNVSOOFGDF
   

   View Slide

7. ࠓ೔ͷ͓୊
   Nuxt.jsͷັྗΛ͓఻͑ͭͭ͠ɺ
   ݸਓతʹ
   ޮ཰తͩͱ͓΋͏
   ษڧͷਐΊํ
   Λ͓࿩͠·͢
   

   View Slide

8. Nuxt.jsͱ͸
   IUUQTKBOVYUKTPSHHVJEF
   

   View Slide

9. w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
   w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ
   w ϓϥΨϒϧʹ֦ு͕Մೳ

   -> PWAͷରԠͳͲ΋༰қʹ
   w Vue.jsͷΤίγεςϜΛ౷߹

   -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
   Nuxt.jsͷԸܙ
   

   View Slide

10. Vue.jsͱ͸
    ࢧ࣋͞ΕΔҰ൪ͷཧ༝ ͩͱࢥͬͯ·͢
    
    

    View Slide

11. IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
    ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍
    

    View Slide

12. K2VFSZ
    w ηϨΫλ͔ΒཁૉΛ୳ͯ͠ૢ࡞
    w HTMLͷߏ଄͕มΘΔͱཁૉͷऔಘํ๏΋มΘΔՄ
    ೳੑ͕͋Δ

    -> JavaScriptͷίʔυ΋ཁมߋ

    -> HTMLͷߏ଄͕ෳࡶʹͳΕ͹ͳΔ΄Ͳਏ͍…
    ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍
    IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
    

    View Slide

13. 7VF
    w JavaScriptͷσʔλͱHTMLͷཁૉΛඥ෇͚ͯɺ
    σʔλ͕มΘΕ͹ࣗಈతʹ൓ө
    w HTMLͷߏ଄͕มΘΖ͏͕ಛʹӨڹ͸ड͚ͳ͍

    -> JavaScriptͷίʔυͷมߋ͸ෆཁ
    ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍
    IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
    

    View Slide

14. ΈΜͳ͕Α͘஌ͬͯΔjQueryͱͷҧ͍
    K2VFSZ 7VFKT
    IUUQTRJJUBDPNNJPJPJUFNTFCECFFG
    

    View Slide

15. Nuxt.jsͷԸܙ
    w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
    w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ
    w ϓϥΨϒϧʹ֦ு͕Մೳ

    -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹

    -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
    

    View Slide

16. w webpackΛ಺แ
    w js, css, htmlͷѹॖ
    w cssͷΠϯϥΠϯల։
    w auto prefixer
    w CFCFMΛ಺แ
    w ES6ΛτϥϯεύΠϧ
    w SSR (Server Side Rendering)
    w preload(ࣄલಡΈࠐΈ) etc…..
    ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
    

    View Slide

17. Nuxt.jsͷԸܙ
    w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
    w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ
    w ϓϥΨϒϧʹ֦ு͕Մೳ

    -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹

    -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
    

    View Slide

18. ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ
    ࠷௿ݶ͜Ε͚֮ͩ͑Ε͹·ͣ͸ಈ͔ͤΔ
    ઃఆϑΝΠϧ
    ϖʔδͷ෦඼
    

    View Slide

19. Nuxt.jsͷԸܙ
    ຊ࣭తͳ։ൃʹूதͰ͖Δ
    w ϑϩϯτΤϯυͷϕετϓϥΫςΟεΛΑ͠ͳʹ
    w ϧʔϧ(ن໿)͕༧Ί༻ҙ͞Ε͍ͯΔ
    w ϓϥΨϒϧʹ֦ு͕Մೳ

    -> PWAͷରԠͳͲ΋༰қʹ
    w Vue.jsͷΤίγεςϜΛ౷߹

    -> ϥΠϒϥϦͷબఆίετ͕͔͔Βͳ͍
    

    View Slide

20. Ͳ͏ษڧ͢Ε͹ޮ཰త͔
    

    View Slide

21. View Slide

22. js(ES6)ͷษڧ
    ProgateͷJavaScriptίʔεΛडߨ͠·͠ΐ͏
    IUUQTQSPHDPNMBOHVBHFTFT
    

    View Slide

23. 1. ΍ΘΒ͔Vue.jsΛͬ͟ͱಡΜͰ֓ཁΛ௫Ή
    2. جૅ͔ΒֶͿVue.jsΛಡΉ
    3. LearnCode.academyΛݟͯࣸܦ͢Δ
    ※ެࣜυΩϡϝϯτ΋ඞͣ໨Λ௨͠·͠ΐ͏
    Vue.jsͷษڧ
    

    View Slide

24. ΍ΘΒ͔7VFKT
    IUUQTTDSBQCPYJPWVFZBXBSBLB
    

    View Slide

25. جૅ͔ΒֶͿ7VFKT
    IUUQTXXXBNB[PODPKQEQ#%#:).;
    

    View Slide

26. -FBSO$PEFBDBEFNZ
    IUUQTXXXZPVUVCFDPNQMBZMJTU MJTU1-P:$H/0*Z("%;VW,+XFVU;%007*:J+
    

    View Slide

27. ະൃചͰ͕͢ඞಡͰ͢ͷͰਖ਼࠲Ͱ଴ػ͠·͠ΐ͏
    IUUQTXXXBNB[PODPKQEQ
    7VFKTೖ໳جૅ͔Β࣮ફΞϓϦέʔγϣϯ։ൃ·Ͱ
    

    View Slide

28. 1. Nuxt tech bookΛಡΉ
    2. NuxtެࣜͰ༻ҙ͞Ε͍ͯΔαϯϓϧ΍ޙड़ͷॻ
    ੶هࡌͷίʔυΛࣸܦ͢Δ
    • https://github.com/nuxt/todomvc
    • https://github.com/nuxt/hackernews
    ※ެࣜυΩϡϝϯτ΋ඞͣ໨Λ௨͠·͠ΐ͏
    Nuxt.jsͷษڧ
    

    View Slide

29. /VYUUFDICPPL
    IUUQTCPPUIQNKBJUFNT
    

    View Slide

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

    View Slide

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

    View Slide

32. Let’s Enjoy Nuxt.js!!
    

    View Slide