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

Vue/Nuxt tutorial for Sendai

Vue/Nuxt tutorial for Sendai

Yuichiro MASUI

March 20, 2021
Tweet

More Decks by Yuichiro MASUI

Other Decks in Education

Transcript

  1. Vue / Nuxt


    Tutorial


    for Sendai
    Yuichiro MASUI @masuidrive


    Product Founder & Engineer

    View Slide

  2. @masuidrive


    Yuichiro MASUI

    View Slide

  3. τϨλ ݩCTO

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. https://masuidrive.jp/resume
    Yuichiro MASUI (masuidrive) | Product Founder & Engineer

    View Slide

  8. झຯ͸DJͰ͢

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. օ͞Μͷ࿩Λฉ͔͍ͤͯͩ͘͞
    • HTML/CSSͷܦݧ


    • Javascript


    • ଞͷϓϩάϥϛϯάݴޠ


    • jQuery


    • React

    View Slide

  15. Frontendͷมભ
    • jQuery / Prototype.js

    DOMૢ࡞


    • Angular / Backbone.js

    MVCతͳϑϨʔϜϫʔΫ / ςετ


    • React / Vue

    Reactive / ViewϨΠϠʔͷΈ

    View Slide

  16. 1ը໘಺Ͱͷঢ়ଶભҠ͕ෳࡶ
    ͗ͯ͢ਓྨʹ͸ແཧ

    View Slide

  17. Reactొ৔
    • 2010 - ಺෦ϦϦʔε


    • 2013/5 - Open SourceϦϦʔε


    • 2015 - ReactNative

    View Slide

  18. ΫϥΠΞϯτϩδοΫ
    αʔόαΠυੜ੒
    ϒϥ΢β
    ϩδοΫ (ίϯτϩʔϥ)
    ϦΫΤετ
    αʔό
    ΫϥΠΞϯτ
    Πϕϯτ (onSubmit)
    React
    αʔόϩδοΫ
    HTMLੜ੒෦ (render)
    HTMLੜ੒෦ (ςϯϓϨʔτ)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)

    View Slide

  19. Vue.js
    • ݩAngular։ൃऀͷEvan You͕Founder


    • 2014/2ʹϦϦʔε


    • "I
    fi
    gured, what if I could just extract the part
    that I really liked about Angular and build
    something really lightweight."

    View Slide

  20. React vs Vue
    • VirtualDOM,Component,ReactiveͳͲجຊ͸Ұॹ
    • Reactͷํ͕७ਮ


    • Vue͸ͪΐͬͱΰνϟΰνϟ


    • ྆ํͱ΋جຊ͸ViewϨΠϠʔ͚ͩͰɺσʔλؔ܎
    ͸ผͷπʔϧͱ૊Έ߹͑ΘͤΔඞཁ͋Γ

    View Slide

  21. ɹͳͥVueΛ࢖͏ͷ͔
    • ΫϥΠΞϯταΠυͰ΍Δ͜ͱ͕૿େ


    • Ұͭͷը໘Ͱෳ਺ͷঢ়ଶ͕ಈ͘


    • όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ


    • εϚϗͳͲෳ਺ͷ୺຤ͷαϙʔτ


    • ES6ͷߏจ͕࢖͑Δ

    View Slide

  22. ɹͳͥVueΛ࢖͏ͷ͔
    • ΋ͬͱγϯϓϧʹ࡞Γ͍ͨ


    • ࠶ར༻ੑΛߴΊ͍ͨ


    • ϧʔϧΛܾΊ͍ͨ

    View Slide

  23. ͳͥੲ͸γϯϓϧͩͬͨͷ͔
    • ը໘͕ঢ়ଶΛ࣋ͨͳ͍


    • ը໘Λॻ͖׵͑Δʹ͸ભҠͯ͠શମΛॻ͖׵
    ͑Δ

    View Slide

  24. jQuery
    • DOMΛૢ࡞͢Δ


    • ը໘ͷҰ෦෼͚ͩॻ͖׵͑Δ


    • Ͳ͔͜Βॻ͖׵͑ΒΕͨͷ͔Θ͔Βͳ͍

    View Slide

  25. ݱࡏͷWeb
    • ը໘ͷ͋ͪͪ͜ͰΠϕϯτ͕ൃੜͯ͠


    • ͕͋ͪͪ͜ඇಉظʹॻ͖׵͕͑ى͜Δ


    • όʔδϣϯΞοϓ΋ߴස౓Ͱ


    • େن໛

    View Slide

  26. Ϣʔβͷ໊લ͕มߋ͞Εͨ৔߹
    • jQueryͷ৔߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞
    Ε͍ͯΔ͔ɺid΍classͰ؅ཧͯ͠ॻ͖׵͑Δ
    ඞཁ͕͋Δɻ

    දࣔͱߋ৽͕ผͷ࢓૊Έɻ


    • Vue͸ը໘Λ΋͏Ұճॻ͖௚͢

    View Slide

  27. ԋश

    View Slide

  28. Nuxt.js
    • Vue + Vuex + Vue-Router + asyncData +
    ServerSideRendering


    • ࠓ͸Vueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔
    Βલ΄Ͳॏཁ͡Όͳ͍


    • Ͱ΋σΟϨΫτϦߏ଄΍αϯϓϧ͕ࢀߟʹͳ
    Δ

    View Slide

  29. Vuex
    • https://vuex.vuejs.org/ja/guide/


    • VueͰ࢖ΘΕΔσʔλετΞ


    • ReactͰ͍͏Redux


    • େ͖ͳάϩʔόϧม਺


    • ετΞΛߋ৽͢Δͱؔ܎͢Δίϯϙʔωϯτ͕ࣗ
    ಈతʹߋ৽͞ΕΔ

    View Slide

  30. Vue-router
    • URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά


    • pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ


    • pages/items/_id.vueͰϫΠϧυΧʔυ

    this.$route.params.idͰݺͼग़ͤΔ


    • ϦϯΫ͸͡Όͳͯ͘ͰுΔ

    View Slide

  31. asyncData
    • https://ja.nuxtjs.org/docs/2.x/features/data-
    fetching/#async-data


    • ඇಉظͰσʔλΛͱͬͯ͘Δ࢓૊Έ


    • APIݺͼग़͕͠؆୯ʹͳΔ

    View Slide

  32. ServerSideRendering
    • αʔόͰVueΛ࣮ߦͯ͠HTMLΛੜ੒ͯ͠ૹΔ


    • ݕࡧʹҾ͔͔ͬΔ


    • ಡΈࠐΈ͕଎͘ͳΔ


    • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ


    • ߟ͑ͯඳ͘ͷͩΔ͍

    View Slide

  33. ԋश

    View Slide

  34. ૯ׅ

    View Slide