Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

Nuxt ͸ ؆୯ʹSPA࡞ΕΔ͚Ͳɺ ΞϓϦέʔγϣϯ͕؆୯ʹ࡞ΕΔͱ ࢥͬͨΒେؒҧ͍ͩͬͨ Toro_Unit @ CaT vol.7 1

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3

Slide 4

Slide 4 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ • ࠷ۙɺچ։ஐֶߍߍࣷͱ͍͏໌࣏ͷ ݐங͕ࠃๅʹͳΓ·ͨ͠ɻ • 8/29~9/9 ϏʔϧࡇΓ(দຊαϚʔϑΣ ετ) • 9/20~23 ΫϥϑτϏʔϧϑΣε 4

Slide 5

Slide 5 text

ϑϩϯτΤϯυΤϯδχΞͱͯ͠ • WebαΠτͷCSSઃܭ • WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST API ͰΫΠζͱ͔ͷ UI ʣ • ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ • WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣ΁ͷߩ ݙɻ • ϨΨγʔͳWEBΞϓϦͷJSվम • WP Meetup Map ( React + WordPress.org API ) • etc… 5

Slide 6

Slide 6 text

ࠓ͔Β࿩͢࿩͸ฃಆهɾࣦഊஊͰ͢ɻ স͍ͳ͕Βฉ͍ͯ΋Β͑Ε͹͍͞Θ͍ɻ 6

Slide 7

Slide 7 text

2018೥ ๭೔ ͱ͋ΔελʔτΞοϓͷɺ • AWS Lambda + API Gateway Ͱͷ API • ೝূܥ͸ Cognito • ϑϩϯτΤϯυ͸ɺS3 ʹ഑ஔͯ͠ɺCloudFront Ͱ഑৴ɻ ͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲౰͢Δ͜ͱ ʹɻ 7

Slide 8

Slide 8 text

• APIɺόοΫΤϯυɺΠϯϑϥ͸ઌํ͕։ൃɻ • Bootstrap ͰͷϞοΫΞοϓͳͲ΋ଘࡏɻ 8

Slide 9

Slide 9 text

Nuxt.js + Vuex Λ࠾༻͢Δ͜ͱʹɻ 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Nuxt.js • Next.js ʹӨڹΛड͚ͨɺVue.js ͰΞ ϓϦέʔγϣϯΛ࡞ΔͨΊͷϑϨʔ ϜϫʔΫɻ • Ϗϧυͷઃఆͱ͔શ෦΍ͬͯ͘ΕΔ • Vue Router ΋ built-in. • URLͷࣗಈੜ੒ɻ $ npx create-nuxt-app 11

Slide 12

Slide 12 text

URL ͷࣗಈੜ੒ɻ pages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞੒͢Δͱ • pages/ • user/ • index.vue • one.vue • index.vue 12

Slide 13

Slide 13 text

͜ͷΑ͏ͳܗͰURL͕ੜ੒͞ΕΔɻ • / • /user/ • /user/one 13

Slide 14

Slide 14 text

σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ౳ͱ͢Δ ͱɺม਺ͱͯ͠ಈతͳURL Λ࡞੒Մೳɻ • pages/ • user/ • _id.vue /user/1 ౳ͷಈతͳURLΛ࡞੒Մೳɻ this.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ 14

Slide 15

Slide 15 text

Vuex • Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ় ଶ؅ཧύλʔϯ + ϥΠϒϥϦɻ • Vue.js ༻ͷ Flux ࣮૷ɻ • Vue ͷίϯϙʔωϯτ͔Β੾Γ཭͠ ͨঢ়ଶ؅ཧɻ 15

Slide 16

Slide 16 text

Vue.js / Vuex / Nuxt.js ͍͢͝ɻ 16

Slide 17

Slide 17 text

Vue ͕ղܾͯ͘͠ΕΔ͜ͱ • ૒ํ޲σʔλόΠϯσΟϯά • σʔλมߋ → HTML ͷϨϯμϦϯά • ϑΥʔϜͷมߋ → v-model ͳͲͰ؆୯ʹ஋Λऔಘ 17

Slide 18

Slide 18 text

Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ • WebPack ͷઃఆ ( CSS / JS / Vue SFC ) • ϧʔςΟϯά • URL + Vue SFC ͱͷؔ࿈෇͚ ( page ) 18

Slide 19

Slide 19 text

Vuex ͕ղܾͯ͘͠ΕΔ͜ͱ • ঢ়ଶΛ Vue ίϯϙʔωϯτ͔Β੾Γ཭ͯ͠ಠཱͤ͞Δɻ • ෳ਺ͷ Vue ίϯϙʔωϯτΛލ͍ͩঢ়ଶ؅ཧɻ 19

Slide 20

Slide 20 text

͍͚͢͝Ͳɻ 20

Slide 21

Slide 21 text

͍͢͝Μ͚ͩͲɻ • ͜ΕΒ͕ղܾ͢Δͷ͸ɺWEBΞϓϦέʔγϣϯͷ View ͷ໰ ୊ɻ • Rails ΍ɺ LaravelɺDjango ౳Ͱݴ͏ MVC ͷ View ͷϨΠ Ϡʔɻ ͦΕ͚ͩɻ 21

Slide 22

Slide 22 text

case.1 ϓϩδΣΫτ΁ͷޡղ 22

Slide 23

Slide 23 text

• ϞοΫΞοϓΛ͔ͬ͜Α͘ʹͯ͠ɺAPI ͷ஋Λ Vue Ͱදࣔ͢ Δɺͨ·ʔʹɺϑΥʔϜͰ ஋Λૹ৴͢Δ؆୯ͳ͓࢓ࣄͩͱ ࢥͬͨɻ 23

Slide 24

Slide 24 text

਺ϲ݄ɾɾɾɾ • มߋ͞ΕΔཁ݅ • ౰ॳͷ໘Ө΋ͳ͍ 24

Slide 25

Slide 25 text

ઌํͷ API ઃܭɺۀ຿ϑϩʔઃܭɺͳͲ΋͔ͬ͠Γఆٛ͞Εͯ ͍ΔϞϊͩͱࢥͬͯͨɻ • ελʔτΞοϓ + ৽نͰαʔϏεΛ্ཱͪ͛Δ࣌఺ͰɺͦΜ ͳΘ͚ͳ͍ɻ 25

Slide 26

Slide 26 text

૝ఆͱҟͳΔ࢓༷ɻ • ͜ͱ͹͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ • ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ • WEBαΠτ։ൃͷৗࣝ != WEBαʔϏεͷৗࣝ • αΠτͱαʔϏεͷҧ͍ • ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผ෺ɻ 26

Slide 27

Slide 27 text

ڭ܇ 1. • ΞϓϦέʔγϣϯͷશମ૾ɺۀ຿ͷϑϩʔͳͲΛ͔ͬ͠Γͭ ͔ΜͰ࢓༷ܾఆɻ • γεςϜઃܭɺۀ຿ઃܭɺ࣮૷ίετΛߟٕ͑ͨज़બఆΛɻ • ͦ΋ͦ΋ JAMStack Λબ୒͢Δඞཁ͕͋Δͷʁ • Rails ΍ Laravel ౳ɺϊ΢ϋ΢ͷ͋Δ WEBΞϓϦέʔγϣϯ ϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰ͸ʁ 27

Slide 28

Slide 28 text

JAMStack ͳ։ൃ͸ɺطଘͷ WAF ʹൺ΂ͯ • ඇಉظॲཧ΁ͷରԠ • σʔλͷϥΠϑαΠΫϧ • ϑϩϯτΤϯυͱόοΫΤϯυͷ໾ׂͷఆٛ • etc... ౳ɺߟ͑Δ͜ͱ΋ଟ͍ɻ 28

Slide 29

Slide 29 text

case.2 Vue.js / Nuxt Ͱͷ։ൃʹ͓͚Δࣦഊ 29

Slide 30

Slide 30 text

ίϯϙʔωϯτઃܭͷࣦഊɻ • Έ͍ͨͳෳ਺ͷϞϊΛѻ͏ίϯϙʔωϯτ͸ɺࡶ ʹ࡞ΔͱɺΧΦεʹͳΓ͕ͪɻ • ཁૉશମ΁ͷૢ࡞ͱɺ୯ମ΁ͷૢ࡞͕ͪ͝Όͪ͝Όʹɻ 30

Slide 31

Slide 31 text

But Pattern

export default { methods: { hoge(item) {} // <-͜Ε͸୯ମ΁ͷૢ࡞ɻ } } 31

Slide 32

Slide 32 text

ಠཱͨ͠ίϯϙʔωϯτʹɻ

୯ҰͷΞΠςϜ͸ɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ 32

Slide 33

Slide 33 text

ڭ܇ 2. v-for ͕ग़͖ͯͨΒɺத਎Λಠཱͨ͠ίϯϙʔωϯτʹɻv- for ͷத਎Λɺmethod Ͱ͍͡Δͷ͸ɺݟ௨͠ͱ࠶ར༻ੑΛѱ ͘͢Δɻ • MyList.vue • MyListItem.vue ͷΑ͏ʹɺ෼཭ɻ 33

Slide 34

Slide 34 text

Nuxt ศར͚ͩͲɻ Կ΋ߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ං େԽɻ Կ΋ϑϨʔϜϫʔΫΛ࢖Θͳ͍ PHP Έ͍ͨʹͳΔɻ index.php edit.php create.php తͳϊϦɻ 34

Slide 35

Slide 35 text

ڭ܇ 3. • খ͞ͳίϯϙʔωϯτ͔Β࡞ͬͯɺͦΕΛPageͰར༻ɻ • σβΠϯσʔλۦಈɺը໘ۦಈͳ։ൃ͸τϥϒϧͷݩɻ 35

Slide 36

Slide 36 text

case.3 Vuex ͱͷ෇͖߹͍ํͰͷࣦഊ 36

Slide 37

Slide 37 text

ͳΜͰ΋͔ΜͰ΋ Vuex Α͘ͳ͍ɻ • Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ • Vuex ʹࡌͤΔ΂͖͸ɺϓϨθϯςʔγϣϯ૚ɻ • Vuex ͷ Action ͸ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ 37

Slide 38

Slide 38 text

ྫ • Vuex Store ʹͷΈೝূܥͷ৘ใΛ࣋ͨͤΔͱɺVuex Λ௨͠ ͔ͯ͠ར༻Ͱ͖ͳ͍ɻ • ͳΜͰ΋͔ΜͰ΋ Vuex Λܦ༝͢Δ͸Ίʹͳͬͯݟ௨͠ͱ࠶ ར༻ੑ͕࠷ѱʹɾɾɾɾ 38

Slide 39

Slide 39 text

ڭ܇ 4 • ϏδωεϩδοΫɺσʔλΞΫηε૚ͳͲ͸ɺVuex ʹґଘ͠ ͳ͍࣮૷ɻ • ͦΕΒΛɺVuex Action ౳͔Βݺͼग़ͯ͠࢖͏ɻ 39

Slide 40

Slide 40 text

but 40

Slide 41

Slide 41 text

Good 41

Slide 42

Slide 42 text

͍͞͝ʹ ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱ͸ݴ͍ ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ ͡Δࠓ೔͜ͷࠒɻ • ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ • Clean Architecture ୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ஌͕ࣝ໾ʹཱ͔ͭ΋ʁଟ෼ɻ 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

·ͱΊ 44

Slide 45

Slide 45 text

• ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB αΠτɺCMSͷΧελϚΠζͷϊϦͰ΍Δͱ௧͍໨ΛݟΔɻ • ͦ΋ͦ΋ɺNuxt Ͱ΍Δ΂͖ʁ Λ͔ͬ͠Γߟ͑ͨબ୒Λɻ • ը໘ۦಈ։ൃ΁ͷ༠࿭Λஅͪ੾Δɻ • ԿͰ΋͔ΜͰ΋ Vuex ͸஍ཕɻϏδωεϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛ੾Γ෼͚ɻ • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔͸վΊͯͪΌΜͱ ษڧ͠௚ͨ͠ํ͕ྑ͛͞ɻ 45

Slide 46

Slide 46 text

Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 46