·ͳͬͯ͘͘ΔVue.js 3PWA night conference 20202020.02.01@kazupon
View Slide
ࣗݾհ
PLAID, inc. Vue.js Core Team MemberVue.js Japan User Group OrganizerCreator of Vue I18n & IntlifyWebAssembly Love ❤@kazu_pon kazuponkazupon
͡Ίʹ
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-previewhttps://github.com/vuejs/vue-next-webpack-preview
vue-cli-plugin-vue-nexthttps://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όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ୈͰมΘΔՄೳੑ͋Γ
৽ػೳʹ͍ͭͯ
ίϯϙδγϣϯAPIComposition 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 ͱͷϚοϐϯάbeforeCreatecreatedbeforeMountmountedupdatedbeforeDestroydestroyederrorCapturedsetupsetuponBeforeMountonMountedonUpdatedonBeforeUnmountonUnmountedonErrorCaptured(ࠨ: 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 Ҏ߱σϑΥϧτͰαϙʔτfragmentfragmentfragment
Root ཁૉͰϥοϓ͢Δ• Invalid ͳ HTML ʹͳͬͯ͠·͏• Semantic ͳ HTML ʹͳΒͳ͍• a11yରԠ͕Ͱ͖ͳ͘ͳΔ• ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
ͷίʔυྫෆਖ਼ͳ HTML …ϨϯμϦϯά
ϑϥάϝϯτΛར༻͢Δͱ…ϨϯμϦϯάਖ਼͍͠HTML!
༨ஊ: Vue 2.x ͰؔܕίϯϙʔωϯτͰճආͰ͖ͨ
ϙʔλϧPortals
ϙʔλϧͱ• ίϯϙʔωϯτͷ͋ΔίϯςϯπΛVueͷඳըର֎ͷཁૉʹඳը͢ΔͨΊͷΈ• WICG ͷ Portals ͱࣅ͍ͯΔ͕ͪΐͬͱҧ͏ͷͰҙλʔήοτʹඳը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 ͨ͠ΒίϯϙʔωϯτΛඳը
͍ํ
ͪͳΈʹૉʹ࣮͢Δͱ
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() ٖࣅΫϥε• άϩʔόϧͳελΠϧΛ <br/>ͰఆٛͰ͖Δ<br/>• ैདྷ SFC ίϯϙʔωϯτʹ <style<br/>scoped> ͱผͷ <style> Ͱఆ͍ٛͯͨ͠<br/>
::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
άϩʔόϧ APIGlobal 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.0createApp ͰΠϯελϯεΛੜ
Vue 2.x ͱ Vue 3.0 ͷҧ͍Vue 2.x Vue 3.0productionTip 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.0Vue 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.0DOM ͷϚϯτํ๏ಉ͡
·ͱΊ
• ίϯϙδγϣϯ API ʹΑΓେن։ൃ͕Α͘ͳΓ·͢• ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ͷදݱྗ͕ߴ·Γ·͢• Vue 2.x ͔Βͷ breaking change తͳมߋ͋ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏ (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ)·ͱΊ
࠷ޙʹ
Vue Fes Japan 2020• ࠓ 2020 Γ·͢ʂ• 11݄։࠵ʹ͚ͯ׆ಈ։࢝ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
kazupon
twada
hiranabe
kotomin_m
itsmedreamwalker
jrsaruo
monicaribeiro
stanby_inc
philipschwarz
lnit
ogiwarat
murabayashi
davidbonilla
holman
kevinliebholz
bluesmoon
addyosmani
bermonpainter
jakevdp
pedronauck
garrettdimon
nonsquared
sonatard
andyhume