CaT vol.7 登壇資料です。
Nuxt ؆୯ʹSPA࡞ΕΔ͚ͲɺΞϓϦέʔγϣϯ͕؆୯ʹ࡞ΕΔͱࢥͬͨΒେؒҧ͍ͩͬͨToro_Unit @ CaT vol.71
View Slide
$ whoami2
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Engineer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit3
ݝদຊࢢ͔Β͖·ͨ͠• ࠷ۙɺچ։ஐֶߍߍࣷͱ͍͏໌࣏ͷݐங͕ࠃๅʹͳΓ·ͨ͠ɻ• 8/29~9/9 ϏʔϧࡇΓ(দຊαϚʔϑΣετ)• 9/20~23 ΫϥϑτϏʔϧϑΣε4
ϑϩϯτΤϯυΤϯδχΞͱͯ͠• WebαΠτͷCSSઃܭ• WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST API ͰΫΠζͱ͔ͷ UI ʣ• ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ• WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣͷߩݙɻ• ϨΨγʔͳWEBΞϓϦͷJSվम• WP Meetup Map ( React + WordPress.org API )• etc…5
ࠓ͔Β͢ฃಆهɾࣦഊஊͰ͢ɻস͍ͳ͕Βฉ͍ͯΒ͑Ε͍͞Θ͍ɻ6
2018 ͱ͋ΔελʔτΞοϓͷɺ• AWS Lambda + API Gateway Ͱͷ API• ೝূܥ Cognito• ϑϩϯτΤϯυɺS3 ʹஔͯ͠ɺCloudFront Ͱ৴ɻͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲͢Δ͜ͱʹɻ7
• APIɺόοΫΤϯυɺΠϯϑϥઌํ͕։ൃɻ• Bootstrap ͰͷϞοΫΞοϓͳͲଘࡏɻ8
Nuxt.js + Vuex Λ࠾༻͢Δ͜ͱʹɻ9
10
Nuxt.js• Next.js ʹӨڹΛड͚ͨɺVue.js ͰΞϓϦέʔγϣϯΛ࡞ΔͨΊͷϑϨʔϜϫʔΫɻ• Ϗϧυͷઃఆͱ͔શ෦ͬͯ͘ΕΔ• Vue Router built-in.• URLͷࣗಈੜɻ$ npx create-nuxt-app 11
URL ͷࣗಈੜɻpages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞͢Δͱ• pages/• user/• index.vue• one.vue• index.vue12
͜ͷΑ͏ͳܗͰURL͕ੜ͞ΕΔɻ• /• /user/• /user/one13
σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ͱ͢Δͱɺมͱͯ͠ಈతͳURL Λ࡞Մೳɻ• pages/• user/• _id.vue/user/1 ͷಈతͳURLΛ࡞Մೳɻthis.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ14
Vuex• Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ়ଶཧύλʔϯ + ϥΠϒϥϦɻ• Vue.js ༻ͷ Flux ࣮ɻ• Vue ͷίϯϙʔωϯτ͔ΒΓͨ͠ঢ়ଶཧɻ15
Vue.js / Vuex / Nuxt.js ͍͢͝ɻ16
Vue ͕ղܾͯ͘͠ΕΔ͜ͱ• ํσʔλόΠϯσΟϯά• σʔλมߋ → HTML ͷϨϯμϦϯά• ϑΥʔϜͷมߋ → v-model ͳͲͰ؆୯ʹΛऔಘ17
Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ• WebPack ͷઃఆ ( CSS / JS / Vue SFC )• ϧʔςΟϯά• URL + Vue SFC ͱͷؔ࿈͚ ( page )18
Vuex ͕ղܾͯ͘͠ΕΔ͜ͱ• ঢ়ଶΛ Vue ίϯϙʔωϯτ͔ΒΓͯ͠ಠཱͤ͞Δɻ• ෳͷ Vue ίϯϙʔωϯτΛލ͍ͩঢ়ଶཧɻ19
͍͚͢͝Ͳɻ20
͍͢͝Μ͚ͩͲɻ• ͜ΕΒ͕ղܾ͢ΔͷɺWEBΞϓϦέʔγϣϯͷ View ͷɻ• Rails ɺ LaravelɺDjango Ͱݴ͏ MVC ͷ View ͷϨΠϠʔɻͦΕ͚ͩɻ21
case.1 ϓϩδΣΫτͷޡղ22
• ϞοΫΞοϓΛ͔ͬ͜Α͘ʹͯ͠ɺAPI ͷΛ Vue Ͱදࣔ͢Δɺͨ·ʔʹɺϑΥʔϜͰ Λૹ৴͢Δ؆୯ͳ͓ࣄͩͱࢥͬͨɻ23
ϲ݄ɾɾɾɾ• มߋ͞ΕΔཁ݅• ॳͷ໘Өͳ͍24
ઌํͷ API ઃܭɺۀϑϩʔઃܭɺͳͲ͔ͬ͠Γఆٛ͞Ε͍ͯΔϞϊͩͱࢥͬͯͨɻ• ελʔτΞοϓ + ৽نͰαʔϏεΛ্ཱͪ͛Δ࣌ͰɺͦΜͳΘ͚ͳ͍ɻ25
ఆͱҟͳΔ༷ɻ• ͜ͱ͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ• ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ• WEBαΠτ։ൃͷৗࣝ != WEBαʔϏεͷৗࣝ• αΠτͱαʔϏεͷҧ͍• ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผɻ26
ڭ܇ 1.• ΞϓϦέʔγϣϯͷશମ૾ɺۀͷϑϩʔͳͲΛ͔ͬ͠Γ͔ͭΜͰ༷ܾఆɻ• γεςϜઃܭɺۀઃܭɺ࣮ίετΛߟٕ͑ͨज़બఆΛɻ• ͦͦ JAMStack Λબ͢Δඞཁ͕͋Δͷʁ• Rails Laravel ɺϊϋͷ͋Δ WEBΞϓϦέʔγϣϯϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰʁ27
JAMStack ͳ։ൃɺطଘͷ WAF ʹൺͯ• ඇಉظॲཧͷରԠ• σʔλͷϥΠϑαΠΫϧ• ϑϩϯτΤϯυͱόοΫΤϯυͷׂͷఆٛ• etc...ɺߟ͑Δ͜ͱଟ͍ɻ28
case.2 Vue.js / Nuxt Ͱͷ։ൃʹ͓͚Δࣦഊ29
ίϯϙʔωϯτઃܭͷࣦഊɻ• Έ͍ͨͳෳͷϞϊΛѻ͏ίϯϙʔωϯτɺࡶʹ࡞ΔͱɺΧΦεʹͳΓ͕ͪɻ• ཁૉશମͷૢ࡞ͱɺ୯ମͷૢ࡞͕ͪ͝Όͪ͝Όʹɻ30
But Pattern{{ hoge(item) }}export default {methods: {hoge(item) {} // }}31
ಠཱͨ͠ίϯϙʔωϯτʹɻ୯ҰͷΞΠςϜɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ32
ڭ܇ 2.v-for ͕ग़͖ͯͨΒɺதΛಠཱͨ͠ίϯϙʔωϯτʹɻv-for ͷதΛɺmethod Ͱ͍͡Δͷɺݟ௨͠ͱ࠶ར༻ੑΛѱ͘͢Δɻ• MyList.vue• MyListItem.vueͷΑ͏ʹɺɻ33
Nuxt ศར͚ͩͲɻԿߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ංେԽɻԿϑϨʔϜϫʔΫΛΘͳ͍ PHP Έ͍ͨʹͳΔɻindex.phpedit.phpcreate.phpతͳϊϦɻ34
ڭ܇ 3.• খ͞ͳίϯϙʔωϯτ͔Β࡞ͬͯɺͦΕΛPageͰར༻ɻ• σβΠϯσʔλۦಈɺը໘ۦಈͳ։ൃτϥϒϧͷݩɻ35
case.3 Vuex ͱͷ͖߹͍ํͰͷࣦഊ36
ͳΜͰ͔ΜͰ Vuex Α͘ͳ͍ɻ• Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ• Vuex ʹࡌͤΔ͖ɺϓϨθϯςʔγϣϯɻ• Vuex ͷ Action ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ37
ྫ• Vuex Store ʹͷΈೝূܥͷใΛ࣋ͨͤΔͱɺVuex Λ௨͔ͯ͠͠ར༻Ͱ͖ͳ͍ɻ• ͳΜͰ͔ΜͰ Vuex Λܦ༝͢ΔΊʹͳͬͯݟ௨͠ͱ࠶ར༻ੑ͕࠷ѱʹɾɾɾɾ38
ڭ܇ 4• ϏδωεϩδοΫɺσʔλΞΫηεͳͲɺVuex ʹґଘ͠ͳ͍࣮ɻ• ͦΕΒΛɺVuex Action ͔Βݺͼग़ͯ͠͏ɻ39
but40
Good41
͍͞͝ʹϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱݴ͍͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ͡Δࠓ͜ͷࠒɻ• ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ• Clean Architecture ୡਓʹֶͿιϑτΣΞͷߏͱઃܭ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ͕ࣝʹཱ͔ͭʁଟɻ42
43
·ͱΊ44
• ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEBαΠτɺCMSͷΧελϚΠζͷϊϦͰΔͱ௧͍ΛݟΔɻ• ͦͦɺNuxt ͰΔ͖ʁ Λ͔ͬ͠Γߟ͑ͨબΛɻ• ը໘ۦಈ։ൃͷ༠ΛஅͪΔɻ• ԿͰ͔ΜͰ Vuex ཕɻϏδωεϩδοΫͱϓϨθϯςʔγϣϯϩδοΫΛΓ͚ɻ• DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔վΊͯͪΌΜͱษڧͨ͠͠ํ͕ྑ͛͞ɻ45
Thanks!Github: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitBlog: https://torounit.com46
torounit
takakuni
doradora09
konboi
yhana
kenichirokimura
sakaitakeshi
uzulla
pauloxnet
sosuiiii
sbtechnight
oracle4engineer
ammeep
sonatard
jonyablonski
smashingmag
destraynor
philnash
jlugia
rasmusluckow
zenorocha
scottboms
zakiyama