Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Retu Fukui
August 27, 2018

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

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

Retu Fukui

August 27, 2018
Tweet

More Decks by Retu Fukui

Other Decks in Technology

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