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
15k
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
340
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.1k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.8k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.9k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
290
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.2k
AHC041解説
terryu16
0
320
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.7k
Flatt Security XSS Challenge 解答・解説
flatt_security
0
700
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2k
ドメインイベント増えすぎ問題
h0r15h0
2
560
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
rails newと同時に型を書く
aki19035vc
5
700
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Visualization
eitanlees
146
15k
Statistics for Hackers
jakevdp
797
220k
How to train your dragon (web standard)
notwaldorf
89
5.8k
The Language of Interfaces
destraynor
155
24k
The Cult of Friendly URLs
andyhume
78
6.1k
BBQ
matthewcrist
85
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Designing for humans not robots
tammielis
250
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Your Own Lightsaber
phodgson
104
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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!