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

Vue/Nuxt tutorial for Sendai

Vue/Nuxt tutorial for Sendai

0ec58a040e1e4e959c8566484b4bba19?s=128

Yuichiro MASUI

March 20, 2021
Tweet

Transcript

  1. Vue / Nuxt Tutorial for Sendai Yuichiro MASUI @masuidrive Product

    Founder & Engineer
  2. @masuidrive Yuichiro MASUI

  3. τϨλ ݩCTO

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

  8. झຯ͸DJͰ͢

  9. None
  10. None
  11. None
  12. None
  13. None
  14. օ͞Μͷ࿩Λฉ͔͍ͤͯͩ͘͞ • HTML/CSSͷܦݧ • Javascript • ଞͷϓϩάϥϛϯάݴޠ • jQuery •

    React
  15. Frontendͷมભ • jQuery / Prototype.js 
 DOMૢ࡞ • Angular /

    Backbone.js 
 MVCతͳϑϨʔϜϫʔΫ / ςετ • React / Vue 
 Reactive / ViewϨΠϠʔͷΈ
  16. 1ը໘಺Ͱͷঢ়ଶભҠ͕ෳࡶ ͗ͯ͢ਓྨʹ͸ແཧ

  17. Reactొ৔ • 2010 - ಺෦ϦϦʔε • 2013/5 - Open SourceϦϦʔε

    • 2015 - ReactNative
  18. ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ੒ ϒϥ΢β ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit)

    React αʔόϩδοΫ HTMLੜ੒෦ (render) HTMLੜ੒෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)
  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."
  20. React vs Vue • VirtualDOM,Component,ReactiveͳͲجຊ͸Ұॹ • Reactͷํ͕७ਮ • Vue͸ͪΐͬͱΰνϟΰνϟ •

    ྆ํͱ΋جຊ͸ViewϨΠϠʔ͚ͩͰɺσʔλؔ܎ ͸ผͷπʔϧͱ૊Έ߹͑ΘͤΔඞཁ͋Γ
  21. ɹͳͥVueΛ࢖͏ͷ͔ • ΫϥΠΞϯταΠυͰ΍Δ͜ͱ͕૿େ • Ұͭͷը໘Ͱෳ਺ͷঢ়ଶ͕ಈ͘ • όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ • εϚϗͳͲෳ਺ͷ୺຤ͷαϙʔτ •

    ES6ͷߏจ͕࢖͑Δ
  22. ɹͳͥVueΛ࢖͏ͷ͔ • ΋ͬͱγϯϓϧʹ࡞Γ͍ͨ • ࠶ར༻ੑΛߴΊ͍ͨ • ϧʔϧΛܾΊ͍ͨ

  23. ͳͥੲ͸γϯϓϧͩͬͨͷ͔ • ը໘͕ঢ়ଶΛ࣋ͨͳ͍ • ը໘Λॻ͖׵͑Δʹ͸ભҠͯ͠શମΛॻ͖׵ ͑Δ

  24. jQuery • DOMΛૢ࡞͢Δ • ը໘ͷҰ෦෼͚ͩॻ͖׵͑Δ • Ͳ͔͜Βॻ͖׵͑ΒΕͨͷ͔Θ͔Βͳ͍

  25. ݱࡏͷWeb • ը໘ͷ͋ͪͪ͜ͰΠϕϯτ͕ൃੜͯ͠ • ͕͋ͪͪ͜ඇಉظʹॻ͖׵͕͑ى͜Δ • όʔδϣϯΞοϓ΋ߴස౓Ͱ • େن໛

  26. Ϣʔβͷ໊લ͕มߋ͞Εͨ৔߹ • jQueryͷ৔߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞ Ε͍ͯΔ͔ɺid΍classͰ؅ཧͯ͠ॻ͖׵͑Δ ඞཁ͕͋Δɻ 
 දࣔͱߋ৽͕ผͷ࢓૊Έɻ • Vue͸ը໘Λ΋͏Ұճॻ͖௚͢

  27. ԋश

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

    ServerSideRendering • ࠓ͸Vueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔ Βલ΄Ͳॏཁ͡Όͳ͍ • Ͱ΋σΟϨΫτϦߏ଄΍αϯϓϧ͕ࢀߟʹͳ Δ
  29. Vuex • https://vuex.vuejs.org/ja/guide/ • VueͰ࢖ΘΕΔσʔλετΞ • ReactͰ͍͏Redux • େ͖ͳάϩʔόϧม਺ •

    ετΞΛߋ৽͢Δͱؔ܎͢Δίϯϙʔωϯτ͕ࣗ ಈతʹߋ৽͞ΕΔ
  30. Vue-router • URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά • pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ • pages/items/_id.vueͰϫΠϧυΧʔυ 
 this.$route.params.idͰݺͼग़ͤΔ •

    ϦϯΫ͸<a>͡Όͳͯ͘<NuxtLink to=“”/>ͰுΔ
  31. asyncData • https://ja.nuxtjs.org/docs/2.x/features/data- fetching/#async-data • ඇಉظͰσʔλΛͱͬͯ͘Δ࢓૊Έ • APIݺͼग़͕͠؆୯ʹͳΔ

  32. ServerSideRendering • αʔόͰVueΛ࣮ߦͯ͠HTMLΛੜ੒ͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕଎͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •

    ߟ͑ͯඳ͘ͷͩΔ͍
  33. ԋश

  34. ૯ׅ