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)
Cloudflare Meetup Nagano Vol.3
torounit
1
64
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.5k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / 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
430
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
130
製造業の会計システムをDDDで開発した話
caddi_eng
3
970
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
220
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
160
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
250
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
新卒エンジニア研修の試行錯誤と工夫/nikkei-tech-talk-31
nishiuma
0
200
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
150
LINE Notify互換のボットを作った話
kenichirokimura
0
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Building Your Own Lightsaber
phodgson
104
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
BBQ
matthewcrist
88
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
A better future with KSS
kneath
238
17k
It's Worth the Effort
3n
184
28k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Done Done
chrislema
183
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
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