Vue.js 3 ʹ͚ͨVue.js ೖMicrosoft Ignite The Tour2019.12.06@kazupon
View Slide
ࣗݾհ
PLAID, inc. Vue.js Core Team MemberVue.js Japan User Group OrganizerVue I18n AuthorWebAssembly Love ❤@kazu_pon kazuponkazupon
͡Ίʹ
201910݄
Vue.js 3 pre-alpha ެ։ʂhttps://twitter.com/vuejs/status/1180159603507638274
vuejs/vue-next Ͱެ։https://github.com/vuejs/vue-next
2020Q1ʹ͚ͯ։ൃத• RFCͰ༷ΛݻΊͭͭ։ൃhttps://github.com/vuejs/rfcs
Vue.js 3 Ͱͷ৽ػೳ• ίϯϙδγϣϯ API• ϑϥάϝϯτ / ϙʔλϧ• TypeScript ϑϧαϙʔτ• … ͳͲͳͲhttps://github.com/vuejs/rfcs
v2 → v3
͍Ζ͍Ζͱػೳ͕૿͑ͯ
ഁյతมߋ͋Δͱ
͜ͷ࣌ظʹೖ͢Δͱେมͦ͏…
ͦ͏ݟ͑ͦ͏Ͱ͕͢
৺͠ͳͯ͘େৎͰ͢ʂ
ओཁػೳ
΄΅ͦͷ··Ͱ
ಈ͖·͢ʂ
ͱ͍͏Θ͚Ͱ
ࠓ͢͜ͱ
• Vue.js ͷಛͱઃܭࢥ• Vue.js 3 Ͱ௨༻͢Δߏจɾػೳͷհ• ࠷৽҆ఆόʔδϣϯ v2.6.10 Ͱઆ໌• Vue.js 3 ͷۄػೳ ίϯϙδγϣϯAPIʹ͍ͭͯܰ͘հࠓ͢͜ͱ
Vue.jsʹ͍ͭͯ
Vue.js• ࡞ऀ: Evan You• viewͷϥΠϒϥϦ• 2013ݸਓϓϩδΣΫτͱͯ͠։࢝• 20142݄ʹv0.8ެࣜϦϦʔε
2015.04.20Laravel Ͱ࠾༻ܾఆ2015.10.26v1.0Evangelion2016.10.01v2.0Ghost in the Shell2019.02.05v2.6Macross2019.12.06 ݱࡏ࠷৽: v2.6.10ྺ࢙
• ߴͳٕज़εΩϧ͕ແͯ͑͘Δ• ίϯϙʔωϯτࢦʹΑΔUIߏԽ• ϦΞΫςΟϒͳσʔλόΠϯσΟϯάಛ
• HTML / JavaScript / CSS ͷجຊ͕ࣝ͋Ε͙͢ʹ͑Δ• index.html ͷ script λά͔Β͏͜ͱ͕Ͱ͖Δߴͳٕज़εΩϧ͕ͳͯ͑͘Δ
• ίϯϙʔωϯτͱ͍͏෦ΛΈཱͯͯɺUI ΛΈͨͯΔίϯϙʔωϯτࢦʹΑΔUIߏԽ
• DOM ্ͷσʔλͱJavaScript͕࣋ͭσʔλؒͰόΠϯυͯ͠ಉظΛऔΔ͜ͱ͕Ͱ͖ΔϦΞΫςΟϒͳσʔλόΠϯσΟϯά
ϑϨʔϜϫʔΫͱͯ͠ͷઃܭࢥ
ϓϩάϨογϒϑϨʔϜϫʔΫ
VSϑϨʔϜϫʔΫͷෳࡶ͞ΞϓϦέʔγϣϯͷෳࡶ͞
ෆेͳέʔε
ෆेͳέʔεͷൺᄻ
Φʔόʔͳέʔε
Φʔόʔͳέʔεͷൺᄻ
ϑϨʔϜϫʔΫͷෳࡶੑΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ेͳίετΛPayͰ͖ΔͷͰͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β࣮ࡍͷݱ…
Ϗδωεཁ݅ઈ͑ͣม͢Δ
ϑϨʔϜϫʔΫ͜ΕʹରԠͰ͖ͳ͚ΕͳΒͳ͍
͜Μͳײ͡Ͱελʔτͯ͠viewίΞ
ن͕େ͖͘ͳ͖ͬͯͨͱ͖viewίΞʴϧʔςΟϯάɺঢ়ଶཧ͕ඞཁʂ
αϙʔτͰ͖ΔϥΠϒϥϦͳ͚Ε…
ϑϩϯτΤϯυ։ൃਏ͍…
http://ejje.weblio.jp/content/progressive
ΞϓϦέʔγϣϯͷஈ֊తͳมԽཁٻʹԠͯ͡ղܾͰ͖Δํ๏Λఏڙ͢Δ
Vue.jsຊମ Vue Router Vuex Vue CLI
Vue.jsͰWebΞϓϦΛ࡞ͬͯΈΔ
• Vue ΠϯελϯεΛ࡞• UIදࣔʹඞཁͳσʔλ(ঢ়ଶ)Λఆٛ• ςϯϓϨʔτͰ UI Λએݴ• Vue ΠϯελϯεΛDOM ʹϚϯτWebΞϓϦΛ࡞ΔྲྀΕ
ϝοηʔδΛදࣔͤ͞ΔΞϓϦ
• Vue ίϯετϥΫλ Ͱ new ͢ΔVueΠϯελϯεΛ࡞
• data ΦϓγϣϯʹσʔλΛఆٛUIදࣔʹඞཁͳσʔλΛఆٛ
• template Φϓγϣϯʹ HTML Λهड़ςϯϓϨʔτʹUIΛએݴ
• $mount ϝιουͰର DOM ʹϚϯτVueΠϯελϯεΛDOMʹϚϯτ
࣮ߦ͢Δͱ…
͍͔͕Ͱͨ͠Ͱ͠ΐ͏͔ʁ
ςϯϓϨʔτߏจ
• ΠϯλʔϙϨʔγϣϯ (Interpolation)• σΟϨΫςΟϒ (Directive)ςϯϓϨʔτߏจ
ΠϯλʔϙϨʔγϣϯʹ͍ͭͯ
• ϓϩάϥϜʹ͓͍ͯɺ͋ΔมͱҰॹʹߏ͞Εͨσʔλʹ͓͍ͯɺίϯύΠϧ࣌ɺ·࣮ͨߦ࣌ʹม͕ల։͞ΕΔ͜ͱ• ྫ: JavaScript ςϯϓϨʔτϦςϥϧΠϯλʔϙϨʔγϣϯͱʁ
• JavaScript Ҏ֎ʹςϯϓϨʔτଘࡏ͢Δ• ςϯϓϨʔτͰҎԼΛαϙʔτ• ςΩετ• HTMLͷଐੑ• JavaScript ͷࣜVue.jsʹ͓͚ΔΠϯλʔϙϨʔγϣϯͱʁ
σΟϨΫςΟϒʹ͍ͭͯ
• ϓϩάϥϛϯάݴޠɺιϑτΣΞͷจ຺ʹ͓͍ͯɺ໋ྩίϚϯυΛ࣮ߦ͢ΔͨΊʹࢦࣔߏจ• ྫ: nginx (Webαʔό)ͷઃఆϑΝΠϧσΟϨΫςΟϒͱʁ
• ςϯϓϨʔτʹ͓͍ͯɺWebඪ४༷ʹͳ͍ಛผͳ໋ྩΛ༩͑ΔͨΊͷߏจ• v-if / v-show: ཁૉͷදࣔɾඇදࣔͷͨΊͷ݅ఆ• v-for: ཁૉʹର͢Δ܁Γฦ͠ॲཧ• v-bind: ཁૉʹର͢ΔσʔλͷόΠϯυ(ଋറ)• v-on: ཁૉͷΠϕϯτϋϯυϦϯά• v-model: ೖྗडՄೳͳཁૉͱσʔλؒํʹόΠϯυVue.jsʹ͓͚ΔσΟϨΫςΟϒͱʁ
• v-if• v-showv-if / v-show
v-for
v-bind
v-on
v-model
• v-slot• v-text• v-once• v-pre• v-cloakͦͷଞͷσΟϨΫςΟϒ
ࢉग़ϓϩύςΟ
• Ұൠతʹɺఆٛ͞Εͨσʔλ(ঢ়ଶ)ͷΛݩʹɺͦΕΒσʔλͷࢉग़͞Εͨσʔλͷ͜ͱ ྫ: JavaScript ͷ getterࢉग़ϓϩύςΟͱʁ
• ͨͩ୯ʹܭࢉͯ͠ฦ͢σʔλ͚ͩͰͳ͘ɺσʔλͷͷมߋΛಈతʹݕͯ͠දࣔʹөͰ͖ΔΑ͏ʹ͍ͯ͠ΔVue.jsʹ͓͚Δࢉग़ϓϩύςΟͱʁ
• ςϯϓϨʔτʹΠϯλʔϙϨʔγϣϯ͕ෳࡶʹͳ͖ͬͯͨͱ͖ࢉग़ϓϩύςΟͷϢʔεέʔεࢉग़ϓϩύςΟ෦ͰΩϟογϡ͢ΔͷͰύϑΥʔϚϯε্͢Δʂ
Υονϟ
• Vue.jsͰఆٛ͞ΕͨσʔλΛࢹͯ͠ɺมߋ௨Λఏڙ͢ΔΥονϟͱʁ
• ࢉग़ϓϩύςΟɺΥονϟͰػೳΛఏڙ͍ͯ͠ΔΥονϟͱʁ
ΥονϟΛͬͨίʔυྫ
• ࢉग़ϓϩύςΟͷܭࢉෛՙ͕ߴ͍• ྫ: ڊେͳσʔλ͔Βࢉग़͢Δ͕ຖճҟͳͬͯ͠·͏• ࢉग़ϓϩύςΟͰͰ͖ͳ͍͜ͱΛΓ͍ͨͱ͖• ྫ: αʔό͔Βඇಉظʹऔಘͨ͠σʔλΛݩʹࢉग़͍͍ͯͨ͠ͱ͖ΥονϟͷϢʔεέʔε
ίϯϙʔωϯτ
• ҰൠతͳιϑτΣΞͷจ຺ʹ͓͍ͯɺϓϩάϥϜΛ࠶ར༻ʹ͢ΔͨΊϞδϡʔϧͱͯ͠෦Խ͞Εͨͷ• ϒϩοΫͷΑ͏ʹίϯϙʔωϯτΛΈཱͯͯߏ͍ͯ͘͠ίϯϙʔωϯτͱʁ
• UI ΛػೳใߏʹैͬͯϞδϡʔϧԽͨ͠ͷ• ίϯϙʔωϯτΛΈ߹ΘΔ͜ͱͰࣗવͱπϦʔ্ʹߏ͞ΕΔVue.jsʹ͓͚Δίϯϙʔωϯτͱʁ
Vue.jsಠࣗͷίϯϙʔωϯτ֓೦• ୯ҰϑΝΠϧίϯϙʔωϯτ (Single-filecomponents)• Vue ίϯϙʔωϯτͱݺͿ͜ͱ{CSS}({JS})
• ଞͷίϯϙʔωϯτͱΓऔΓ͢ΔͨΊʹΠϯλʔϑΣʔεΛఏڙ͢Δ• ϓϩύςΟ (props)• Πϕϯτ (emits)• εϩοτ (slots)ίϯϙʔωϯτI/FΛఏڙ͢Δ
ϓϩύςΟ(Props)• ଞͷίϯϙʔωϯτ͔ΒσʔλΛड͚औΔͨΊͷΠϯλʔϑΣʔεChild ίϯϙʔωϯτParent ίϯϙʔωϯτPropsܦ༝Ͱ͢
Πϕϯτ (emits)• ίϯϙʔωϯτΛ͏ଆ()ʹσʔλΛͨ͢ΊͷΠϯλʔϑΣʔεChild ίϯϙʔωϯτParent ίϯϙʔωϯτ$emitͰΠϕϯτΛൃߦ
εϩοτ (slots)• ίϯϙʔωϯτʹ͏ଆ()͔ΒίϯςϯπΛࠩ͠ࠐ·ͤΔͨΊͷΠϯλʔϑΣʔεChild ίϯϙʔωϯτParent ίϯϙʔωϯτʹࠩ͠ࠐ·ΕΔ
ίϯϙʔωϯτؒσʔλͷΓऔΓͷϧʔϧ• σʔλ͕ྲྀΕΔํΛنΛઃ͚Δ͜ͱͰෳࡶʹͳΔͷΛආ͚Δ
ଞʹ৭ʑ͋Γ·͕͢
͜ͷล͓͓͍͍͑ͯͯͩ͘͞͞ʂ
Vue.js 3ίϯϙδγϣϯAPI
ίϯϙδγϣϯAPIͱʁ• ؔϕʔεͰఏڙ͞ΕΔ API• ίϯϙʔωϯτΛϩδοΫΛࣗ༝ߴ͘Έ߹Θ࣮ͤ͢Δ͜ͱ͕Ͱ͖Δ
ੜ·Εͨഎܠ• Vue.js Ͱେن։ൃͰ͖Δ͕͕͋ͬͨ• ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ͘͘ͳΔ• ίʔυ࠶ར༻ͷύλʔϯԽ͠ʹ͍͘• TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
ίϯϙδγϣϯAPIΛ͏ͱ…• ίϯϙʔωϯτͷϩδοΫ͕៉ྷʹͳΓɺΛղܾ͢Δʂ
ྫ: ΧϯτΞοϓ
ৄࡉ͕ؾʹͳΔํRFCΛ͝ཡ͍ͩ͘͞ʂ• υΩϡϝϯτ https://vue-composition-api-rfc.netlify.com/
Vue.js v2 Ͱ͓ࢼ͠Ͱ͑Δ• vuejs/composition-api https://github.com/vuejs/composition-api
ऴΘΓʹ
• ͖ͨΔ Vue.js 3 ʹ͚ͯ• Vue.js ͷಛͱઃܭࢥ• Vue.js 3 Ͱ௨༻͢Δߏจɾػೳ• Vue.js 3 ͷۄػೳ ίϯϙδγϣϯAPIࠓͨ͜͠ͱ
• ΦϯϥΠϯ: Vue.js ެࣜυΩϡϝϯτ https://jp.vuejs.org• ॻ੶: Vue.js ೖ (ٕज़ධࣾ)͞Βʹ Vue.js ೖ͍ͯ͘͠ʹʁ
࠷ޙʹ
ίϛϡχςΟʹࢀՃ͠Α͏ʂ• Vue.jsຊϢʔβʔάϧʔϓӡӦ• Slack https://vuejs-jp-slackin.herokuapp.com• VuejsຊޠެࣜαΠτܦ༝ͰδϣΠϯͰ͖·͢ http://jp.vuejs.org• Vue.js Meetup (connpass) https://vuejs-meetup.connpass.com
དྷ 2/1 ʹ Vue.js 3 ʹ͍ͭͯ͠·͢• 2020-02-01 PWA Night CONFERENCE 2020 https://conf2020.pwanight.jp/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
kazupon
kamilahsantos
findyinc
kasacchiful
irof
codemountains
nano72mkn
parttimenerd
koic
ivargrimstad
yusukebe
katsu8686
suzukimar
frogandcode
thekraken
speakerdeck
aki_iinuma
thoeni
brianwarren
shpigford
trishagee
holman
orderedlist
sugarenia
mza