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
400
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.5k
Other Decks in Programming
See All in Programming
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
180
Vibe coding コードレビュー
kinopeee
0
400
構文解析器入門
ydah
7
2k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
3
380
新世界の理解
koriym
0
130
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
Featured
See All Featured
Visualization
eitanlees
146
16k
Speed Design
sergeychernyshev
32
1.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Site-Speed That Sticks
csswizardry
10
750
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
314
140k
A designer walks into a library…
pauljervisheath
207
24k
Six Lessons from altMBA
skipperchong
28
3.9k
Fireside Chat
paigeccino
37
3.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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!