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 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7
Search
Toro_Unit (Hiroshi Urabe)
August 17, 2019
Technology
0
2.2k
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
6.9k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.1k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
310
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
390
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
500
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
2.9k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.5k
Other Decks in Technology
See All in Technology
生成AI活用推進の為にやったこと/やらなかったこと
ktc_wada
0
150
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
580
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
2k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
330
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
12
7.9k
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.5k
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3k
OPENLOGI Company Profile for engineer
hr01
1
2.2k
TiDBにおけるテーブル設計と最適化の事例
cygames
0
790
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
160
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
Featured
See All Featured
Unsuck your backbone
ammeep
664
57k
Building Your Own Lightsaber
phodgson
100
5.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Automating Front-end Workflow
addyosmani
1357
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Design by the Numbers
sachag
274
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Being A Developer After 40
akosma
67
580k
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