Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった...
Search
Toro_Unit (Hiroshi Urabe)
August 17, 2019
Technology
0
2.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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
180
Cloudflare Meetup Nagano Vol.3
torounit
1
75
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.8k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
440
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
870
Other Decks in Technology
See All in Technology
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
130
Devin&Cursor、それぞれの「本質」から導く最適ユースケース戦略
empitsu
8
2.4k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
libsyncrpcってなに?
uhyo
0
150
AIの電力問題を概観する
rmaruy
1
210
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
920
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
230
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
The Cult of Friendly URLs
andyhume
78
6.4k
Speed Design
sergeychernyshev
30
970
For a Future-Friendly Web
brad_frost
178
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
79
Thoughts on Productivity
jonyablonski
69
4.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Balancing Empowerment & Direction
lara
1
84
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
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