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.3k
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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.2k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.5k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.5k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
360
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
520
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
840
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3k
Other Decks in Technology
See All in Technology
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
180
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1.1k
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
Taming you application's environments
salaboy
0
190
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
130
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Code Reviewing Like a Champion
maltzj
520
39k
4 Signs Your Business is Dying
shpigford
180
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
BBQ
matthewcrist
85
9.3k
Music & Morning Musume
bryan
46
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
We Have a Design System, Now What?
morganepeng
50
7.2k
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