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
Vue.js プロジェクトの爆発させかた #ichigayageek / How to exp...
Search
potato4d(Takuma HANATANI)
June 26, 2018
Programming
26
14k
Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project
2018.06.26 に #ichigayageek で話したスライドです。
https://ichigayageek.connpass.com/event/87792/
potato4d(Takuma HANATANI)
June 26, 2018
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
280
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.9k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.8k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.3k
Other Decks in Programming
See All in Programming
Swiftコードバトル必勝法
toshi0383
0
150
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
110
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Kotlin 2.0 and Beyond
antonarhipov
2
150
What is Parser
yui_knk
9
4.1k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
680
Jakarta EE meets AI
ivargrimstad
0
380
Developer Joy == Developer Productivity (really!)
hollycummins
1
180
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
100
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
780
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Into the Great Unknown - MozCon
thekraken
29
1.4k
The Pragmatic Product Professional
lauravandoore
31
6.2k
A Philosophy of Restraint
colly
202
16k
What's in a price? How to price your products and services
michaelherold
242
11k
Web development in the modern age
philhawksworth
205
10k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Fireside Chat
paigeccino
31
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Transcript
Vue.jsϓϩδΣΫτͷ രൃ͔ͤͨ͞ 2018.06.26 Ϛδკ #ichigayageek HANATANI Takuma(@potato4d) https://unsplash.com/photos/hLUTRzcVkqg
ࣗݾհ HANATANI Takuma(@potato4d) • ϑϦʔϥϯεͷWebΤϯδχΞ • FrontEnd / Node.js /
PHP/ AWS / etc… • Vue.jsຊޠެࣜυΩϡϝϯτϝϯςφ • Vue.js Japan User Group ελοϑ • nuxt/docs ӳ/υΩϡϝϯτߩݙ • Nuxt tech book Author
JS History • Vue.js 2015 ~ • Rails & Vue,
SPA, SPA + SSR, Nuxt.js, with TypeScript • React 2016 ~ • SPA, PHP & React, Rails & React, with TypeScript, with Flow • Angular 2017 ~ • SPA, ΄΅৮ͬͯͳ͍
Vue:React:Angular=14:4:1 ͳײ͡
https://potato4d.booth.pm/items/824745
ࠓ͢͜ͱ
Vue.jsϓϩδΣΫτͷ രഁํ๏
Why?
Vue.jsΛ๙ΊΔใ ͍͘ΒͰ͋ΔͷͰ……
https://ichigayageek.connpass.com/event/87792/
໌ʹཱͨͳ͍͚Ͳ ͍͔ͭʹཱͭ
վΊͯࠓ͢͜ͱ • ʮVue.js୭Ͱ؆୯ʹ࡞ΕΔ͚Ͳখن͚ʯຊ͔ • աڈͷϓϩδΣΫτͷল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯͳͯ͘ྑ͍ຊ͔ʁ
• σβΠφʔͰ৮ΕͯҰॹʹࣄͰ͖Δຊ͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯͷͪΐ͍ೖΕʹڧ͍ຊ͔ʁ • Vue.js Λ৽نͰ͏߹ʹબ͖͢͜ͱ
ఆλʔήοτ(1) • Ϟμϯ JavaScript ͱઃܭʹ͍ͭͯ࠷ݶ͍ͬͯΔਓ • ʮReact, Vue, Angular ͕ͬͯͭਓؾͳΜͰ͠ΐʯ
• ʮVue.js؆୯ʹ͔͚ͯϋʔυϧ͕͍ॳ৺ऀ͚ͷͭͰ͠ΐʯ • ʮ FluxύλʔϯͬͯγϯάϧτϯͰҰํͳͭͰ͠ΐʯ Έ͍ͨͳࡶͳೝࣝఔͰͷΘ͔ΔͷͰOK
ఆλʔήοτ(2) • Vue.js ͰͭΒ͍ࢥ͍Λͦ͠͏ͳਓɾͨ͠ਓ • ঢ়ଶཧͰΜͰ͍Δਓ • ϓϩδΣΫτͷنײɾνʔϜײͰͲ͏ͨ͠Βྑ͍͔Θ͔Βͳ͍ਓ ͜Ε͔Βͷ։ൃΛॿ͚ʹͳΕΔͣ
ࠓ͢͜ͱ • ʮVue.js୭Ͱ؆୯ʹ࡞ΕΔ͚Ͳখن͚ʯຊ͔ • աڈͷϓϩδΣΫτͷল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯͳͯ͘ྑ͍ຊ͔ʁ
• σβΠφʔͰ৮ΕͯҰॹʹࣄͰ͖Δຊ͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯͷͪΐ͍ೖΕʹڧ͍ຊ͔ʁ • Vue.js Λ৽نͰ͏߹ʹબ͖͢͜ͱ
ʮ݁ہVue.jsͬͯখن͚ͳΜͰ͠ΐʯ
A. ͦ͏Ͱͳ͍
A. ͦ͏Ͱͳ͍͕ ʮͪΌΜͱ։ൃʯ͢Δͷʹίπ͕ඞཁ
Vue.js PHP ͱΑ͘ࣅ͍ͯΔ
͋͑ͯ໌ݴ͢Δ ಛ
Vue.js is • ʮࡶʹ͏ͱ͢Δͱͱ͜ͱΜࡶʹΉ͜ͱ͕շదʹͰ͖Δʯ • ʮࡶʹΉͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃʹ͘͠ͳΔʯ • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ
PHP ΄Ͳരൃͯ͠ࠔͬͨΛ͕ͨ͠Βͳ͍ʯ
Vue.js is • ʮࡶʹ͏ͱ͢Δͱͱ͜ͱΜࡶʹΉ͜ͱ͕շదʹͰ͖Δʯ • ʮࡶʹΉͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃʹ͘͠ͳΔʯ • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ
PHP ΄Ͳരൃͯ͠ࠔͬͨΛ͕ͨ͠Βͳ͍ʯ
ࠔͬͨ with ఆઆ
ࠓ͢͜ͱ • ʮVue.js୭Ͱ؆୯ʹ࡞ΕΔ͚Ͳখن͚ʯຊ͔ • աڈͷϓϩδΣΫτͷল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯͳͯ͘ྑ͍ຊ͔ʁ
• σβΠφʔͰ৮ΕͯҰॹʹࣄͰ͖Δຊ͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯͷͪΐ͍ೖΕʹڧ͍ຊ͔ʁ • Vue.js Λ৽نͰ͏߹ʹબ͖͢͜ͱ
աڈͷϓϩδΣΫτͷരൃ͔ΒΈΔ Vue.js ͷఆઆͷධՁ
ר͖Ͱ 3 ͭհ
1 / 3
ʮVuex ͋ͬͯͳͯ͘ྑ͍આʯ
A. 80%͙Β͍ͷ֬ͰӕʹͳΔ
VuexΘͣരൃͨ͠
Vuex ΛΘͳ͍Ͱരൃͨ͠(1) • 2016͙Β͍ͷ։ൃͷ • Vuex Λ Flux తʹ Single
source of truth ʹ͢Δ࣌ͷ΄͏͕ଟ͔ͬͨࠒͷ • Single source of truth Λ९क͢ΔͷΓ͗ͩ͢ͱࢥ͍ Pure JavaScript Object Ͱͷ Store Λ࡞ • σʔλͱͯ֬͠ఆͨ͠ใͷΈΛ֨ೲɻҰ࣌εςʔτVueίϯϙʔωϯτʹ࣋ͨͤͨ • require/import ࢀর͠ʹʹͳΔͷͰॻ͖͑Δͱ͏·͍۩߹ʹํόΠϯσΟϯ άͱטΈ߹ͬͯ͘ΕΔ
Vuex ΛΘͳ͍Ͱരൃͨ͠(2) • ॳظ։ൃ JS Object Β͍͠औΓճ͠ͱޮͷྑ͕͞͏·͘ޮ͍͍ͯͨ • ํόΠϯσΟϯάͷԸܙ͋ͬͯɺ Reactivity
Λશ໘ʹ׆༻ͨ͠ίʔ υ͕ॻ͚͍ͯͨ
Vuex ΛΘͳ͍Ͱരൃͨ͠(3) • ༷͕มΘͬͨΓɺಛఆͷ API ϦιʔεͷۃͳංେԽʹΑͬͯ Pure JS ΦϒδΣΫτ͔ΒಡΈऔΕͳ͍͜ͱ͕ଟ͘ͳͬͯ͘Δ •
ΘΕ͍ͯͳ͍֬ূΛಘΔ͜ͱ͕͘͠ɺஈʑͱ։ൃ͕ͭΒ͘…… • େ͖͘ͳΔΞϓϦέʔγϣϯ Vuex ΛೖΕ͓͖ͯͩͬͨ͘
രൃͤ͞ͳ͍ͨΊʹ
ʮVuex ΛΘͳ͍ͰരൃʯΛ͙(1) • SPA Ͱ Vuex ͳͯ͘ JS Object ετΞύλʔϯͰ͍͚Δେମӕ
• ͱΓ͋͑ͣ Vuex ඞͣೖΕ͓͍ͯͯɺεςʔτͷར༻Λߟ͑Δ • Vuex ެࣜʹSingle source of truthʹ߆Δඞཁͳ͍ͱ໌ݴ͍ͯ͠Δͷ ͰɺϩʔΧϧεςʔτͷੋඇͰ Vuex ΛೖΕΔ͔ܾΊͳ͍ͰΈ߹ΘͤΔ • ͕ࣗؔΘΔϓϩδΣΫτݱࡏશͯ Vuex + ϩʔΧϧεςʔτͰӡ༻த
ʮVuex ΛΘͳ͍ͰരൃʯΛ͙(2) • ϩʔΧϧεςʔτΛશ͘Θͳ͍։ൃർฐ͢ΔɻͦΕΛΔͳΒ React Ͱ ྑ͍ͷͰ Vue ϩʔΧϧεςʔτΛ͏·͘ѻ͏ͷͱͯ͠͏͜ͱ •
ϩʔΧϧεςʔτΛ͏͜ͱΛڐ༰͢ΔͱʮͦͷίϯϙʔωϯτͰ͔͠ΘΕ ͳ͍ʯͱ͍͏ঢ়ଶΛͬ͞͞ͱഁغͰ͖ΔͷͰ։ൃϨϕϧࠩҟΛٵऩͰ͖Δ • Vuex υϝΠϯͱࣄ࣮Λ Store ʹɺϓϨθϯςʔγϣϯͱঢ়ଶΛϩʔΧ ϧεςʔτʹ࣋ͨͤΔ͖ • ͱ͍͑ͲͷΈͪVue ͷ RAM ༰ྔ͕େ͖͍ਓ͚ͷϑϨʔϜϫʔΫͳ ͷؒҧ͍ͳ͍
༨ஊ) Vuex Λͬͯരൃͤ͞Δํ๏ • Single source of truth Λશʹ९क͢Δͱɺ Redux
΄Ͳ໊લۭؒΛࡉ͔ ׂ͘͠ͳ͍߹্େମ state ͕ա࿑ࢮ͢Δ • createPostForm ͬͯதʹϑΥʔϜͷཁૉ͍ͬͺ͍ೖͬͯΔ͚Ͳߘ࡞ͬ ͯΔՕॴͱ͔5ݸҎ্͋Δ͠Ͳ͜ͷϑΥʔϜͩΑ • ϓϨθϯςʔγϣϯͷ߹͕Կނ͔υϝΠϯʹॻ͔Ε͍ͯͨΓͯ͠ഁ ໓ͯ͘͠Δ • ϨΠϠʔ͚·͠ΐ͏
2 / 3
ʮσβΠφʔͰ৮ΕͯҰॹʹࣄͰ͖Δʯ આ
A. Ϛδদ
σβΠφʔͱҰॹʹࣄ͢Δͱ രൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ
σβΠφʔͱҰॹʹࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(1) • ਖ਼σβΠφʔ + ϚʔΫΞοϓΤϯδχΞ͕Ͱ͖Δਓ Vue ίϯϙʔωϯτ ͔͚Δ • ejs
/ erb / jade / Smarty / mustache ͱςϯϓϨʔτΤϯδϯΛ͖ͬͯͨϚʔ ΫΞοϓͷਓؒͰ͋Εॻ͘ʹ͋ͨͬͯԿͳ͍ • ʮσβΠϯҰྲྀ͚ͩͲϚʔΫΞοϓෆ׳ΕʯͰ Scoped CSS Ͱष͍ ͷʹ֖ΛͰ͖Δͷ࠷ߴ • ͜͜Ͱʮ͜͜Ͱ͔͠ΘΕ͍ͯͳ͍ͷʯΛ؆୯ʹഁغͰ͖Δࠩҟٵऩ͕ޮ ͍ͯ͘Δ
σβΠφʔͱҰॹʹࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(2) • ͍͍͕ͩͨൃੜ͢Δͷ Node ڥͷͳͷͰڥͷߏஙߦ͢Δ • Storybook ͷ stories ͷॻ͖ํ·Ͱڭ͑ͯӠʑΧϯψϯ……ͱ͔Γͩ͢ͱ
టপԽ͢Δ • దͳ Sandbox ίϯϙʔωϯτΛ࡞Δ͔ stories FE ͕ॻ͍ͯͦ͜Ͱແݶ ʹॻ͍ͯΒͬͨ΄͏͕݁ՌతʹʹͳΔ • ςετΛॻ͍ͯͨΒςετͿͬյΕΔͷͰ͢ • ͜Ε͑͞Εരൃ͠ͳ͍ʢςετരൃ͢Δ͔ʣ
3 / 3
Vue.js طଘͷ Web ΞϓϦͷ Τοδར༻ JS ͱͯ͠࠷ڧઆ
A. ͍͍ͩͨ͋ͬͯΔ
Web ΞϓϦʹ Vue.js Λ ࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ
Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ(1) ςϯϓϨʔτه๏͕ͦͦ͜͜ϞμϯͰ͍͍͢ • αʔόʔαΠυத৺ͷ(Slim Blade ͳͲ͔Β
HTML Λग़ྗ͍ͯ͠Δ)ϓϩδΣΫτʹ Ұ෦ JS ΛೖΕΔͳΒ Vue.js ࠷ߴ • [v-cloak] ΛͬͯςϯϓϨʔτͷ࿐ग़Λ͗ͭͭɺόοΫΤϯυͷςϯϓϨʔτΤ ϯδϯͱΈ߹Θ͍ͤ͢ͷ͕ૉఢʢΓ͗͢Δͱരൃ͢Δʣ • σϦϛλ( {{}} )Λࣗ༝ʹม͑ΒΕΔ( [[]] ͳͲ)ͷͰͲͷςϯϓϨʔτΤϯδϯͱ͔ͪ ߹Θͳ͍
Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ(2) ঢ়ଶཧΛࡶʹͰ͖Δͷ͕ྑ͍ • ํόΠϯσΟϯάΛར༻͢ΔͱదʹσʔλΛͿͪࠐΉͱదʹϦΞϧλΠϜͰ ө͞ΕΔ • this.setState()
Έ͍ͨͳ֓೦͕ͳ͘ɺదʹάϩʔόϧʹঢ়ଶΛల։͢ΔͱͦΕ͚ͩ ͰετΞΛల։Ͱ͖Δ • window.store Λ࡞Γग़ͯ͠ബ͍ετΞΛ࡞Δͷ͕͓͢͢Ί
Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ(1) ϩʔΧϧεςʔτͱ͍͏֓೦͕͋ΔͷͰ new Vue ͍͢͠ͷ͕ྑ͍ • ϩʔΧϧεςʔτΛڐ༰͢Δٕज़Ͱ͋ΔͨΊؾܰʹ
new Vue Λͯ͠ബ͍ಠࣗετΞ ͱΈ߹ΘͤΔͱշదʹ։ൃ͕Ͱ͖Δ • SPA ͷ߹ Vuex ͕ͳ͍ͱരൃ͕ͨ͠ɺͪΐ͍ೖΕͳΒͦ͜·ͰΫϦςΟΧϧͳӨ ڹͳ͍ • ଟ͘ͷॻ͖ํΛڐ༰͍ͯ͠ΔརΛ׆͔ͯ͠ϓϩδΣΫτنʹϚονͨ͠։ൃελ ΠϧΛऔΔͱடংΛ࡞Γ͍͢
ͦͷଞʹ…… ҎԼͷ࣌ؒͷ߹্ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙ձͰ • ϓϥάΠϯϧʔςΟϯάϑοΫ͕ΦϨΦϨߏͷ • utils σΟϨΫτϦ͕Ͱ͖ͨΓཧγεςϜ่͕յͯ͠രൃ͢Δ
ͦͷଞʹ…… ҎԼͷ࣌ؒͷ߹্ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙ձͰ • ϓϥάΠϯϧʔςΟϯάϑοΫ͕ΦϨΦϨߏͷ • utils σΟϨΫτϦ͕Ͱ͖ͨΓཧγεςϜ่͕յͯ͠രൃ͢Δ • utils ͷരൃͷŠŧŽˠ
https://slides.com/potato4d/vuejs_meetup7
ͦͷଞʹ…… ҎԼͷ࣌ؒͷ߹্ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙ձͰ • Vue + TypeScript ͰͤʹͳΖ͏ͱ͢Δ • Vuex +
TypeScript Ͱ mapGetters / mapActions ͕ any ʹͳͬͯരൃ͢ Δ
ͦͷଞʹ…… ҎԼͷ࣌ؒͷ߹্ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙ձͰ • ςετ • ॳݟͰΔͱେମരൃ͢Δ
ͦͷଞʹฉ͍ͯΈ͍ͨ ͓ؾܰʹͲ͏ͧ
ࠓ͢͜ͱ • ʮVue.js୭Ͱ؆୯ʹ࡞ΕΔ͚Ͳখن͚ʯຊ͔ • աڈͷϓϩδΣΫτͷল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯͳͯ͘ྑ͍ຊ͔ʁ
• σβΠφʔͰ৮ΕͯҰॹʹࣄͰ͖Δຊ͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯͷͪΐ͍ೖΕʹڧ͍ຊ͔ʁ • Vue.js Λ৽نͰ͏߹ʹબ͖͢͜ͱ
Vue.js Λ৽نͰ ಋೖ͢Δ߹ʹબ͖͢͜ͱ
Vue.js Λ৽نͰಋೖ͢Δ߹ʹબ͖͢͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ
Vue.js Λ৽نͰಋೖ͢Δ߹ʹબ͖͢͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ
SPA ฤ ࠷ݶ͓͖ͬͯ͘͜ͱ • ಡΈऔΓઐ༻ͷΞϓϦέʔγϣϯͰͳ͍ݶΓ Vuex ඞͣಋೖ͢Δ • ΦϨΦϨϨΠϠʔΛ࡞Γग़ͦ͠͏ͳ෦ʹ͍ͭͯۃྗΑͦͷ࣮Λࢀߟʹͯ͠ʮॻ ͍͔ͨͭ͠Θ͔Βͳ͍ʯΛආ͚Δ
• σβΠφʔʹίϯϙʔωϯτΛ࡞ͬͯΒ͏ͱ͖ॻ͘·ͰͷϋʔυϧΛ࠷େݶԼ͛ Δ • Nuxt.js Λ͏
ফͨ͘͠ͳ͍ͳΒ Nuxt.js
None
Nuxt.js ͱ • Vue based ͳϑϧελοΫϑϩϯτΤϯυϑϨʔϜϫʔΫ • SPA ઐ༻ɻͪΐ͍ೖΕෆՄɻ •
Vue + Vue Router + Vuex + SSR ڥ͕σϑΥϧτ • ΦϨΦϨϓϥάΠϯϨΠϠʔͳͲ Nuxt.js ͕ٵऩ • نϕʔεͷΞʔΩςΫνϟʹΑͬͯنΛकΔͱ୭Ͱߴ࣭ͳίʔυ ͕ॻ͚Δ
SPA ͚ͷ։ൃηοτ
Nuxt.js Λ͏ͱخ͍͜͠ͱ • ن͕ΦϨΦϨΞʔΩςΫνϟ͔ΒϓϩδΣΫτΛकͬͯ͘ΕΔ • ෭࢈ͱͯ͠ҎԼͷΑ͏ͳศརػೳ͕͍ͭͯ͘Δ • ϧʔςΟϯάͷࣗಈੜػೳʢϧʔςΟϯάཧ༻ͷϨΠϠΛফͤΔʣ • Vuex
ετΞΛѻ͍͘͢͢ΔΦʔτϩʔσΟϯάʢಋೖ͕໘͡Όͳ͍ʣ • ๛ͳϓϥάΠϯʗΤίγεςϜ
खͬऔΓૣ͘ େମͷΛղফͰ͖Δ
SPA Nuxt.js Ͱྑ͍
Vue.js Λ৽نͰಋೖ͢Δ߹ʹબ͖͢͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ
SPA ͡Όͳ͍ฤ • ͪΐ͍ೖΕͷ߹େମ͖ͬ͞·Ͱॻ͍ͨ௨Γ • ૉͳʮετΞύλʔϯʯͰ࣮͢Δ • ͲͷΈͪ jQuery ͷίʔυͳͲ͔ΒσʔλΛ͍͘͡Γճͨ͘͠ͳΔʢମݧ
ஊʣͷͰ Readonly ΛੜΈग़͢ Vuex Θͳ͍ • new Vue ({}) ͍ͭͯ͘͠ྑ͍ͷͰίϯϙʔωϯτಉ࢜ૄ݁߹Ͱ࡞Δ
SPA ͡Όͳ͍ฤ • ͜Ε͔Β࣮͢Δਓ͚ͷՃ Tips • Smarty, Slim, Blade ͳͲͱҰॹʹ͏ͳΒͰ͖Δ͚ͩҰͭͷ
HTML ߏ Λ͓ޓ͍ʹॻ͖͑ΔͷΊΔ • <script id=“initialState” type=“text/x-template”></script>Λ༻ҙͯ͠ɺ $ (‘#initialState’).innerHTML ͰऔΓग़ͯ͠ Vue ίϯϙʔωϯτʹྲྀ͠ࠐΉઃ ܭͰ࡞Δ
ऴΘΓʹ
Vue.js Մ೩ੑ
Ե4ͱ͔ͬͯΒΈ·͠ΐ͏
https://www.shoubo-shiken.or.jp/
Thank you!