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
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
370
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.3k
CSC509 Lecture 03
javiergs
PRO
0
330
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
CSC305 Lecture 03
javiergs
PRO
0
230
開発生産性を上げるための生成AI活用術
starfish719
1
150
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
340
dynamic!
moro
9
6.2k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
187
28k
Fireside Chat
paigeccino
40
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Documentation Writing (for coders)
carmenintech
75
5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
The Language of Interfaces
destraynor
162
25k
A Modern Web Designer's Workflow
chriscoyier
697
190k
GitHub's CSS Performance
jonrohan
1032
460k
KATA
mclloyd
32
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Done Done
chrislema
185
16k
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!