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 3
Search
kazupon
February 01, 2020
Programming
38
19k
まもなくやってくる Vue.js 3
kazupon
February 01, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
920
Vue 3.4
kazupon
13
4.1k
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
940
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
8
1.1k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
使ってみよう Azure AI Document Intelligence
kosmosebi
2
350
VS Code をプロダクトにどう取り込むか
onomax
1
620
Git Rebase
bkuhlmann
11
1.6k
Polars入門
daikikatsuragawa
1
150
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
890
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
Going beyond Apache Parquet's default settings
xhochy
0
120
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Documentation Writing (for coders)
carmenintech
61
4k
It's Worth the Effort
3n
180
27k
BBQ
matthewcrist
80
8.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Testing 201, or: Great Expectations
jmmastey
29
6.4k
Product Roadmaps are Hard
iamctodd
45
9.7k
A designer walks into a library…
pauljervisheath
201
23k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Designing with Data
zakiwarfel
96
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Transcript
·ͳͬͯ͘͘Δ Vue.js 3 PWA night conference 2020 2020.02.01 @kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
͡Ίʹ
201610݄
Vue.js 2.0 ϦϦʔε https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering?slide=10
ͦΕ͔Β 3༨ΓΛྺͯ
2020 Q1
Vue.js 3.0 ϦϦʔε༧ఆ
ݱࡏ
RFCͰ࠷ऴ༷ΛݻΊͭͭணʑͱ։ൃத https://github.com/vuejs/rfcs
vue-next-webpack-preview https://github.com/vuejs/vue-next-webpack-preview
vue-cli-plugin-vue-next https://github.com/vuejs/vue-cli-plugin-vue-next
ެࣜϓϥάΠϯ/πʔϧ܊ରԠத • Vue Router • Vuex • Vue DevTools •
Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
ϝδϟʔϦϦʔεͳͷͰ ৽ػೳ & มߋ ͨ͘͞Μ͋Γ·͢
ࠓ͢͜ͱ
ࠓ͢͜ͱ • Vue.js 3 ͰೖΔ৽ػೳʹ͍ͭͯ • ίϯϙδγϣϯ API • ϑϥάϝϯτ
• ϙʔλϧ • αεϖϯε
ࠓ͢͜ͱ • ͋Δ Vue.js 2.x ͔Βͷมߋͷத͔Β… • ୯ҰϑΝΠϧίϯϙʔωϯτ • εϩοτ
• ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI
ࠓ͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ •
Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ
⚠ ҙࣄ߲ ⚠ • ࠓ͢༰ɺൃද࣌Ͱ Vue.js ຊମʹ࣮͞Ε͍ͯΔͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta
όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰมΘΔՄೳੑ͋Γ
৽ػೳ ʹ͍ͭͯ
ίϯϙδγϣϯAPI Composition API
ίϯϙδγϣϯAPIͱʁ • ؔϕʔεͰఏڙ͞ΕΔ API ܊ https://vue-composition-api-rfc.netlify.com/api.html ఏڙ͞ΕΔ API ͨͪ
ੜ·Εͨഎܠ • Vue.js Ͱେن։ൃͰ͖Δ͕͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ •
ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
ίϯϙδγϣϯAPIΛ͏͜ͱͰ… • ίϯϙʔωϯτ ͷϩδοΫΛࣗ ༝ߴ͘Έ߹ Θ࣮ͤ͢Δ͜ ͱ͕Ͱ͖Δ
େن։ൃ͕ΑΓշదʹʂ • ίϯϙʔωϯτ ͷϩδοΫߏ ͕៉ྷʹͳΓɺ ςετ͢͠ ͘ͳΔʂ
ͲΜͳͷ͔ ݟ͍͖ͯ·͠ΐ͏ʂ
ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ༰Λఏڙ͢Δͷʹྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ •
ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷೖ)
ϦΞΫςΟϒ ঢ়ଶͷૢ࡞
ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly •
ref • isRef • toRefs
৽͍֓͠೦ Ref ͕ಋೖ͞ΕΔ • ϦΞΫςΟϒͳঢ়ଶΛϥοϓͨ͠ࢀরΦ ϒδΣΫτ https://vue-composition-api-rfc.netlify.com/ ʹܝࡌ͞Ε͍ͯΔਤΑΓ
ίʔυྫ
ίϯϙʔωϯτ ͷ ৽ΤϯτϦϙΠϯτ
setup • ίϯϙδγϣϯ APIΛͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮ • return ͨ͠ͷ ͕ςϯϓϨʔτ
ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ
render ؔ / JSX ༻Ͱ͖Δ
Ҿʹ props ͱ context ͕͞ΕΔ • props: ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ •
context: ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬ • emit: Vue 2.x ͷ $emit ʹ૬ • slots: Vue 2.x ͷ $slots ʹ૬
props ͱ context ͷ༻ྫ
this ίϯϙʔωϯτͷΠϯελϯεͰͳ͍ • ίϯϙδγϣϯ API Ͱ setup Ͱίϯϙʔ ωϯτΛ࣮͢Δ߹ɺthis ͏
Θͳ͍
ϥΠϑαΠΫϧ ϑοΫ
Vue 2.x ͱͷϚοϐϯά beforeCreate created beforeMount mounted updated beforeDestroy destroyed
errorCaptured setup setup onBeforeMount onMounted onUpdated onBeforeUnmount onUnmounted onErrorCaptured (ࠨ: Vue 2.xɺӈ: Vue 3 Ҏ߱)
৽͍͠ϥΠϑαΠΫϧϑοΫͷ༻ྫ
σόοά͚ʹ৽ϑοΫ • ϨϯμϦϯάॲཧʹରͯ͠ҎԼͷϑοΫ͕ ఏڙ͞ΕΔ • onRenderTracked • onRenderTriggered
DI (Dependency Injection)
provide / inject • Vue 2.x Ͱఏ ڙ͞Ε͍ͯͨ DI Λ
Vue 3.0 Ͱಉ͡Α͏ ʹར༻Ͱ͖Δ
ϦΞΫςΟϒͳঢ়ଶڞ༗Ͱ͖Δ • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ ΫτΛ͢͜ͱͰڞ༗Ͱ͖Δ
ϓϥάΠϯ DI Ͱ࣮Λਪ • Vue 3.0 Ҏ߱ͰɺϓϥάΠϯ։ൃ provide / inject
ΛͬͨύλʔϯΛਪ • Vue 2.x ·Ͱͷ • $xxx Ͱґଘ͕ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ͍͠ • ϓϥάΠϯͰ࣮͞Εͨίϯϙʔωϯτɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍
DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτͰ provide / inject Ͱ
DI ͢ΕศརʹͳΔ͜ͱ͋Δ (͝ར༻ܭըతʹ)
طଘ API ͱͷ ซ༻ʹ͍ͭͯ
ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ
API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup Ͱ this.xxx ෆՄ • Φϓγϣϯ API ଆ͔Β ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ
ίϯϙδγϣϯ API σϝϦοτ
ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷͷ͔ɺͦΕͱ ref
Ͱϥοϓ͞Εͯͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹมͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ
ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ͍͢ • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮&ߏ ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ ͍͍ͯ͘
eslint-plugin-vue ͰϧʔϧΛఏڙ͢Δ • ΧΦεʹͳΒͳ͍ͨΊʹίϯϙδγϣϯ API ͚ͷϧʔϧΛఏڙ͢Δ༧ఆ https://github.com/vuejs/eslint-plugin-vue/issues/1035
ϑϥάϝϯτ Fragments
ϑϥάϝϯτͱ • ίϯϙʔωϯτ͕ෳͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ •
Vue 3.0 Ҏ߱σϑΥϧ τͰαϙʔτ fragment fragment fragment
Root ཁૉͰϥοϓ͢Δ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ
HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
ͷίʔυྫ ෆਖ਼ͳ HTML … ϨϯμϦϯά
ϑϥάϝϯτΛར༻͢Δͱ… ϨϯμϦϯά ਖ਼͍͠HTML!
༨ஊ: Vue 2.x ͰؔܕίϯϙʔωϯτͰճආͰ͖ͨ
ϙʔλϧ Portals
ϙʔλϧͱ • ίϯϙʔωϯτͷ͋ ΔίϯςϯπΛVueͷ ඳըର֎ͷཁૉʹඳ ը͢ΔͨΊͷΈ • WICG ͷ Portals
ͱ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
Ϣʔεέʔε • ελΠϧϨΠΞτΛ Hack ͦ͠͏ͳ߹ z-indexɺposition: absolute ۦͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ •
ϖʔδ্ͷΟδΣοτ ֎෦ͷԿΒ͔ͷΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δͷ
Vue 2.x ͰϙʔλϧΛ༻͢Δʹ ... • ϓϥάΠϯ vue-portal Λ͏ඞཁ͕͋ͬͨ
https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱ͰɺԾ DOM ϨϕϧͰϙʔ λϧ͕࣮͞Ε͍ͯΔ
͍ํ • ରͱͳΔίϯςϯπΛ Portal ίϯϙʔ ωϯτͰϥοϓ • target ϓϩύςΟͰରઌͷཁૉΛࢦఆ ͢Δ͚ͩ
͍ํ: ίʔυྫ
target ϓϩύςΟ
Portal ͱ͍͏໊લมΘΔ͔… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ༷٧ΊΔͨΊɺݱࡏ RFC
Ͱٞ த https://github.com/vuejs/rfcs/pull/112
αεϖϯε Suspense
αεϖϯεͱ • ࡶʹ͍͏ͱɺίϯϙʔωϯτͷඇಉظͳ ඳըॲཧΛ͍͍ײ͡ʹͬͯ͘ΕΔ Έ
Ϣʔεέʔε • ྫ: Spinner Λͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳͰͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ
ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը
͍ํ
͍ํ
ͪͳΈʹ ૉʹ࣮͢Δͱ
None
DEMO ଟஈඇಉظίϯςϯπͷಡΈࠐΈ
αεϖϯε͑Δʁ • alpha ൛Ͱೖ͍ͬͯΔ͕ɺϏϧυΦϓ γϣϯͰػೳ on/off Ͱ͖ΔΑ͏ʹͳͬͯ ͍Δ • αʔόʔαΠυϨϯμϦϯάͷ࣮ঢ়گ
࣍ୈ
Vue 2.x ͔Βͷ มߋʹ͍ͭͯ
୯ҰϑΝΠϧίϯϙʔωϯτ Single File Components
είʔϓ͖ CSS ͷ༷มߋ • ݱࡏ RFC Ͱ࠷ऴϑΟʔυόοΫडத https://github.com/vuejs/rfcs/pull/119
Vue 3.0 Ҏ߱ͷ৽༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ •
طଘͷه๏ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠ ޓੑΛαϙʔτ ༧ఆ
::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector) Scoped ͞Εͨࢠίϯϙʔωϯτʹελ ΠϧΛద༻͍ͨ͠߹ʹ༻ •
>>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(:Χοί ͕ແ͍ํ)ഇࢭ
::v-deep() ίʔυྫ @vue/sfc-compiler + bundler
::v-slotted() ٖࣅΫϥε • ͔Βࢠʹ͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ
πʹ໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
::v-slotted() ίʔυྫ @vue/sfc-compiler + bundler
::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ <style scoped> ͰఆٛͰ͖Δ • ैདྷ SFC
ίϯϙʔωϯτʹ <style scoped> ͱผͷ <style> Ͱఆ͍ٛͯͨ͠
::v-global() ίʔυྫ @vue/sfc-compiler + bundler
εϩοτ Slots
Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳআ͞ ΕΔ • slot
ଐੑΛ໊ͬͨલ͖εϩοτ • slot-sope ଐੑΛͬͨείʔϓ͖ε ϩοτ
ϑΟϧλ Filters
ϑΟϧλআ • ύΠϓԋࢉࢠ ( | ) ΛͬͨϑΟϧλɺ ͍ͭʹ Vue 3.0
Ͱআ͞ΕΔ • Vue 2.x ޓϏϧυ൛Ͱܯࠂग़ྗ͠ɺػ ೳαϙʔτ͞ΕΔ(༧ఆ)
ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ มͯ͠͏
• Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠͏ • @vue/compiler-core Ͱੜ͞Εͨ render ؔ ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ͏
Πϕϯτ Events
Event Emitter ܥ API ͷআ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API আ͞ΕΔ༧ఆ
• $on • $off • $once • Vue 2.x ޓϏϧυ൛Ͱܯࠂग़ྗ͠ɺػೳ αϙʔτ͞ΕΔ(༧ఆ)
ସखஈ • mitt Λ͏ https://github.com/developit/mitt
άϩʔόϧ API Global API
I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ͕͋ͬͨ •
୯ମςετ͠ʹ͍͘ ঢ়ଶͷϦηοτ͘͠ϦηοτͰ͖ͳ͍ (Vue.config.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳͷ Vue ΠϯελϯεؒͰঢ়ଶΛ ߹ͤ͞Δͷ͕͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍͋Δ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
createApp ͰΠϯελϯεΛੜ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
productionTip Vue 3.0 Ͱআ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
͜ͷล ΄΅ͦͷ··
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
Vue 3.0 Ͱ໊લΛมߋ (ओͳ༻్ TS Ͱ ܕ͚Λαϙʔτ͢ΔͨΊ)
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
ΤϯτϦϙΠϯτϨϕϧͷ provide ఏڙ͢Δ
Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0
DOM ͷ Ϛϯτํ๏ಉ͡
·ͱΊ
• ίϯϙδγϣϯ API ʹΑΓେن։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ͷදݱྗ͕ߴ·Γ·͢ • Vue
2.x ͔Βͷ breaking change తͳมߋ͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏ (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ
࠷ޙʹ
Vue Fes Japan 2020 • ࠓ 2020 Γ·͢ʂ • 11݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ