Vue/Nuxt tutorial for Sendai

Slide 1

Slide 1 text

Vue / Nuxt Tutorial for Sendai Yuichiro MASUI @masuidrive Product Founder & Engineer

Slide 2

Slide 2 text

@masuidrive Yuichiro MASUI

Slide 3

Slide 3 text

τϨλ ݩCTO

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

झຯ͸DJͰ͢

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

օ͞Μͷ࿩Λฉ͔͍ͤͯͩ͘͞ • HTML/CSSͷܦݧ • Javascript • ଞͷϓϩάϥϛϯάݴޠ • jQuery • React

Slide 15

Slide 15 text

Frontendͷมભ • jQuery / Prototype.js   DOMૢ࡞ • Angular / Backbone.js   MVCతͳϑϨʔϜϫʔΫ / ςετ • React / Vue   Reactive / ViewϨΠϠʔͷΈ

Slide 16

Slide 16 text

1ը໘಺Ͱͷঢ়ଶભҠ͕ෳࡶ ͗ͯ͢ਓྨʹ͸ແཧ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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."

Slide 20

Slide 20 text

React vs Vue • VirtualDOM,Component,ReactiveͳͲجຊ͸Ұॹ • Reactͷํ͕७ਮ • Vue͸ͪΐͬͱΰνϟΰνϟ • ྆ํͱ΋جຊ͸ViewϨΠϠʔ͚ͩͰɺσʔλؔ܎ ͸ผͷπʔϧͱ૊Έ߹͑ΘͤΔඞཁ͋Γ

Slide 21

Slide 21 text

ɹͳͥVueΛ࢖͏ͷ͔ • ΫϥΠΞϯταΠυͰ΍Δ͜ͱ͕૿େ • Ұͭͷը໘Ͱෳ਺ͷঢ়ଶ͕ಈ͘ • όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ • εϚϗͳͲෳ਺ͷ୺຤ͷαϙʔτ • ES6ͷߏจ͕࢖͑Δ

Slide 22

Slide 22 text

ɹͳͥVueΛ࢖͏ͷ͔ • ΋ͬͱγϯϓϧʹ࡞Γ͍ͨ • ࠶ར༻ੑΛߴΊ͍ͨ • ϧʔϧΛܾΊ͍ͨ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ԋश

Slide 28

Slide 28 text

Nuxt.js • Vue + Vuex + Vue-Router + asyncData + ServerSideRendering • ࠓ͸Vueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔ Βલ΄Ͳॏཁ͡Όͳ͍ • Ͱ΋σΟϨΫτϦߏ଄΍αϯϓϧ͕ࢀߟʹͳ Δ

Slide 29

Slide 29 text

Vuex • https://vuex.vuejs.org/ja/guide/ • VueͰ࢖ΘΕΔσʔλετΞ • ReactͰ͍͏Redux • େ͖ͳάϩʔόϧม਺ • ετΞΛߋ৽͢Δͱؔ܎͢Δίϯϙʔωϯτ͕ࣗ ಈతʹߋ৽͞ΕΔ

Slide 30

Slide 30 text

Vue-router • URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά • pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ • pages/items/_id.vueͰϫΠϧυΧʔυ   this.$route.params.idͰݺͼग़ͤΔ • ϦϯΫ͸͡Όͳͯ͘ͰுΔ

Slide 31

Slide 31 text

asyncData • https://ja.nuxtjs.org/docs/2.x/features/data- fetching/#async-data • ඇಉظͰσʔλΛͱͬͯ͘Δ࢓૊Έ • APIݺͼग़͕͠؆୯ʹͳΔ

Slide 32

Slide 32 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text