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
20k
まもなくやってくる Vue.js 3
kazupon
February 01, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
410
Vapor Revolution
kazupon
3
3.3k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.7k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
Other Decks in Programming
See All in Programming
SwiftUI API Design Lessons
niw
1
290
AI Agents with JavaScript
slobodan
0
230
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
330
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
130
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
130
状態と共に暮らす:ステートフルへの挑戦
ypresto
1
460
Sharing features among Android applications: experience feedback
jbvincey
0
110
RubyKaigi Dev Meeting 2025
tenderlove
1
130
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.7k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
640
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Cult of Friendly URLs
andyhume
78
6.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Done Done
chrislema
183
16k
Optimizing for Happiness
mojombo
377
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
It's Worth the Effort
3n
184
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
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݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ