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
400
Vapor Revolution
kazupon
3
3.2k
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
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
160
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
生成AIの使いどころ
kanayannet
0
100
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
AI Agentを利用したAndroid開発について
yuchan2215
0
210
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
410
ニックトレイン登壇資料
ryotakurokawa
0
140
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
350
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
580
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
Featured
See All Featured
BBQ
matthewcrist
88
9.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
94
6.3k
We Have a Design System, Now What?
morganepeng
51
7.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Designing for Performance
lara
606
69k
Faster Mobile Websites
deanohume
306
31k
Agile that works and the tools we love
rasmusluckow
328
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
How STYLIGHT went responsive
nonsquared
99
5.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
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݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ