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

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

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

CaT vol.7 登壇資料です。

Toro_Unit (Hiroshi Urabe)

August 17, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

    Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
  2. ϑϩϯτΤϯυΤϯδχΞͱͯ͠ • WebαΠτͷCSSઃܭ • WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST

    API ͰΫΠζͱ͔ͷ UI ʣ • ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ • WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣ΁ͷߩ ݙɻ • ϨΨγʔͳWEBΞϓϦͷJSվम • WP Meetup Map ( React + WordPress.org API ) • etc… 5
  3. 2018೥ ๭೔ ͱ͋ΔελʔτΞοϓͷɺ • AWS Lambda + API Gateway Ͱͷ

    API • ೝূܥ͸ Cognito • ϑϩϯτΤϯυ͸ɺS3 ʹ഑ஔͯ͠ɺCloudFront Ͱ഑৴ɻ ͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲౰͢Δ͜ͱ ʹɻ 7
  4. 10

  5. σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ౳ͱ͢Δ ͱɺม਺ͱͯ͠ಈతͳURL Λ࡞੒Մೳɻ • pages/ • user/ •

    _id.vue /user/1 ౳ͷಈతͳURLΛ࡞੒Մೳɻ this.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ 14
  6. Vuex • Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ় ଶ؅ཧύλʔϯ + ϥΠϒϥϦɻ • Vue.js

    ༻ͷ Flux ࣮૷ɻ • Vue ͷίϯϙʔωϯτ͔Β੾Γ཭͠ ͨঢ়ଶ؅ཧɻ 15
  7. Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ • WebPack ͷઃఆ ( CSS / JS /

    Vue SFC ) • ϧʔςΟϯά • URL + Vue SFC ͱͷؔ࿈෇͚ ( page ) 18
  8. ૝ఆͱҟͳΔ࢓༷ɻ • ͜ͱ͹͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ • ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ • WEBαΠτ։ൃͷৗࣝ !=

    WEBαʔϏεͷৗࣝ • αΠτͱαʔϏεͷҧ͍ • ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผ෺ɻ 26
  9. ڭ܇ 1. • ΞϓϦέʔγϣϯͷશମ૾ɺۀ຿ͷϑϩʔͳͲΛ͔ͬ͠Γͭ ͔ΜͰ࢓༷ܾఆɻ • γεςϜઃܭɺۀ຿ઃܭɺ࣮૷ίετΛߟٕ͑ͨज़બఆΛɻ • ͦ΋ͦ΋ JAMStack

    Λબ୒͢Δඞཁ͕͋Δͷʁ • Rails ΍ Laravel ౳ɺϊ΢ϋ΢ͷ͋Δ WEBΞϓϦέʔγϣϯ ϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰ͸ʁ 27
  10. But Pattern <template> <div v-for="(items, i) in items" :key="i"> <div>{{

    hoge(item) }}</div> </div> </template> export default { methods: { hoge(item) {} // <-͜Ε͸୯ମ΁ͷૢ࡞ɻ } } 31
  11. ಠཱͨ͠ίϯϙʔωϯτʹɻ <template> <div v-for="(items, i) in items" :key="i"> <my-list-item :item="item"

    /> </div> </template> ୯ҰͷΞΠςϜ͸ɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ 32
  12. ͳΜͰ΋͔ΜͰ΋ Vuex Α͘ͳ͍ɻ • Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ • Vuex

    ʹࡌͤΔ΂͖͸ɺϓϨθϯςʔγϣϯ૚ɻ • Vuex ͷ Action ͸ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ 37
  13. ͍͞͝ʹ ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱ͸ݴ͍ ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ ͡Δࠓ೔͜ͷࠒɻ •

    ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ • Clean Architecture ୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ஌͕ࣝ໾ʹཱ͔ͭ΋ʁଟ෼ɻ 42
  14. 43

  15. • ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB αΠτɺCMSͷΧελϚΠζͷϊϦͰ΍Δͱ௧͍໨ΛݟΔɻ • ͦ΋ͦ΋ɺNuxt Ͱ΍Δ΂͖ʁ Λ͔ͬ͠Γߟ͑ͨબ୒Λɻ • ը໘ۦಈ։ൃ΁ͷ༠࿭Λஅͪ੾Δɻ •

    ԿͰ΋͔ΜͰ΋ Vuex ͸஍ཕɻϏδωεϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛ੾Γ෼͚ɻ • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔͸վΊͯͪΌΜͱ ษڧ͠௚ͨ͠ํ͕ྑ͛͞ɻ 45