Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
Toro_Unit (Hiroshi Urabe)
August 17, 2019
Technology
0
1.4k
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
CaT vol.7 登壇資料です。
Toro_Unit (Hiroshi Urabe)
August 17, 2019
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
torounit
4
610
torounit
11
1.9k
torounit
2
1.3k
torounit
4
1.1k
torounit
0
150
torounit
0
130
torounit
2
180
torounit
1
41
torounit
0
51
Other Decks in Technology
See All in Technology
legalforce
PRO
0
190
tatsy
0
130
sat
7
7.1k
jozono
6
1.2k
tsuyo
0
500
tatsy
2
440
kateinoigakukun
0
120
maekawa123
0
660
htomine
0
170
udzura
0
130
katsumataryo
3
830
kawaguti
2
270
Featured
See All Featured
kneath
220
15k
denniskardys
220
120k
malarkey
392
61k
ammeep
657
54k
bryan
32
3.5k
hannesfritz
29
980
sstephenson
146
12k
zenorocha
296
40k
gr2m
84
11k
bkeepers
PRO
408
58k
smashingmag
232
18k
marcelosomers
221
15k
Transcript
Nuxt ؆୯ʹSPA࡞ΕΔ͚Ͳɺ ΞϓϦέʔγϣϯ͕؆୯ʹ࡞ΕΔͱ ࢥͬͨΒେؒҧ͍ͩͬͨ Toro_Unit @ CaT vol.7 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
ݝদຊࢢ͔Β͖·ͨ͠ • ࠷ۙɺچ։ஐֶߍߍࣷͱ͍͏໌࣏ͷ ݐங͕ࠃๅʹͳΓ·ͨ͠ɻ • 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 <project-name> 11
URL ͷࣗಈੜɻ pages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞͢Δͱ • pages/ • user/ • index.vue
• one.vue • index.vue 12
͜ͷΑ͏ͳܗͰURL͕ੜ͞ΕΔɻ • / • /user/ • /user/one 13
σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _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
ίϯϙʔωϯτઃܭͷࣦഊɻ • <my-list> Έ͍ͨͳෳͷϞϊΛѻ͏ίϯϙʔωϯτɺࡶ ʹ࡞ΔͱɺΧΦεʹͳΓ͕ͪɻ • ཁૉશମͷૢ࡞ͱɺ୯ମͷૢ࡞͕ͪ͝Όͪ͝Όʹɻ 30
But Pattern <template> <div v-for="(items, i) in items" :key="i"> <div>{{
hoge(item) }}</div> </div> </template> export default { methods: { hoge(item) {} // <-͜Ε୯ମͷૢ࡞ɻ } } 31
ಠཱͨ͠ίϯϙʔωϯτʹɻ <template> <div v-for="(items, i) in items" :key="i"> <my-list-item :item="item"
/> </div> </template> ୯ҰͷΞΠςϜɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ 32
ڭ܇ 2. v-for ͕ग़͖ͯͨΒɺதΛಠཱͨ͠ίϯϙʔωϯτʹɻv- for ͷதΛɺmethod Ͱ͍͡Δͷɺݟ௨͠ͱ࠶ར༻ੑΛѱ ͘͢Δɻ • MyList.vue
• MyListItem.vue ͷΑ͏ʹɺɻ 33
Nuxt ศར͚ͩͲɻ Կߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ං େԽɻ ԿϑϨʔϜϫʔΫΛΘͳ͍ PHP Έ͍ͨʹͳΔɻ
index.php edit.php create.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
but 40
Good 41
͍͞͝ʹ ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱݴ͍ ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ ͡Δࠓ͜ͷࠒɻ •
ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ • Clean Architecture ୡਓʹֶͿιϑτΣΞͷߏͱઃܭ ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ͕ࣝʹཱ͔ͭʁଟɻ 42
43
·ͱΊ 44
• ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB αΠτɺCMSͷΧελϚΠζͷϊϦͰΔͱ௧͍ΛݟΔɻ • ͦͦɺNuxt ͰΔ͖ʁ Λ͔ͬ͠Γߟ͑ͨબΛɻ • ը໘ۦಈ։ൃͷ༠ΛஅͪΔɻ •
ԿͰ͔ΜͰ Vuex ཕɻϏδωεϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛΓ͚ɻ • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔վΊͯͪΌΜͱ ษڧͨ͠͠ํ͕ྑ͛͞ɻ 45
Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 46