Vue.jsの今後
Future of Vue.jsVue.js v-meetup #62017.12.13@kazupon
View Slide
ࣗݾհ
kazuponVue.js Core TeamVue.js japan users group organizervue-i18n, vuejs/jp.vuejs.org maintainerstorybook vue support memberCUUSOO SYSTEM CTO@kazu_pon kazupon
͡Ίʹ
രൃͨ͠2017
Google Trend
• 2016GitHub Stars
• 2017GitHub Stars
ॳͷެࣜΧϯϑΝϨϯε։࠵
VueConf 2017https://conf.vuejs.org
VueConf 2017Photo Reference by Laravel-Vuejshttps://www.laravel-vuejs.com/what-we-learned-at-vueconf/
Progressive ʹਐԽ͢ΔVue.js
2017.02.26v2.2Initial D2017.04.27v2.3JoJo’s Bizarre Adventure2017.07.13v2.4Kill la Kill2017.10.13v2.5Level E
2017.02.26v2.2Initial D• SSRͷվળ• ΤϥʔϋϯυϦϯάͷվળ• ίϯϙʔωϯτ͚v-modelͷΧελϚΠζ• Provide / Inject
2017.04.27v2.3JoJo’s Bizarre Adventure• SSRͷվળ• ඇಉظίϯϙʔωϯτͷվળ• ؔܕίϯϙʔωϯτͷվળ
2017.07.13v2.4Kill la Kill• SSRͷϑϧରԠ• ༰қͳϥούίϯϙʔωϯτͷ࡞αϙʔτ (inheritAttrs, $attrs, $listeners)• ύϑΥʔϚϯεվળ
2017.10.13v2.5Level E• TypeScript ܕఆٛͷվળ• ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ• SFCͷؔܕίϯϙʔωϯτͷαϙʔτ
͞Βʹൟӫ͢ΔΤίγεςϜ
StorybookͰαϙʔτ
͞ΒͳΔڧྗͳίΞνʔϜϝϯόͷδϣΠϯ
…
ͦΜͳத
2017.09.26
AMA with Vue.js Teamhttps://hashnode.com/ama/with-vuejs-team-cj7itlrki03ae62wuv2r2005s
Vue.jsίΞνʔϜ͚ͩͲͳΜ͔ฉ͖͍ͨ͜ͱ͋Δʁ
কདྷʹΉ͚ͨϩʔυϚοϓΛެ։https://github.com/vuejs/roadmap
ࠓ͢͜ͱ
Vue.jsͷࠓޙ
• Core• vue-test-utils• vue-cli• eslint-plugin-vue• vue-component-compiler• Style Guide• CookbookVue Project Roadmap
Style Guide
ެࣜελΠϧΨΠυ• Vue.jsϓϩδΣΫτͰͷ։ൃͷखॿ͚ͱͳΔελΠϧΨΠυΛఏڙ
• Lead: @chrisvfritz• beta
ެࣜυΩϡϝϯτʹެ։ࡁΈ
ESLintͱͷΠϯςάϨʔγϣϯ• eslint-plugin-vueͰࣗಈνΣοΫͰ͖ΔΑ͏ڞಉ࡞ۀதhttps://github.com/vuejs/eslint-plugin-vue/issues/77
Cookbook
ެࣜΫοΫϒοΫ• Α͋͘Δམͱ݀͠ͷରॲ͕ॻ͔ΕͨυΩϡϝϯτ
• Lead: @chrisvfritz
ணख͜Ε͔Β• ελΠϧΨΠυͷରԠ͕͋ΔͨΊɺ·ͩ࡞ۀʹணखͰ͖͍ͯͳ͍• ͜Ε͔Βணख͢Δͱ͍ͬͨঢ়گ
eslint-plugin-vue
ެࣜESLintϓϥάΠϯ• Vue.js͚ͷίʔυΛϦϯτͯ͘͠ΕΔϓϥάΠϯ
• Lead: @michalsnik @mysticatea• v4.0.0-beta.2
ެࣜελΠϧΨΠυରԠதhttps://twitter.com/michalsnik/status/934340597720154113
4.0CommingSoon…
༰ʹ͍ͭͯ͜ͷޙͷൃදͰʂ
vue-test-utils
୯ମςετ͚ͷެࣜϥΠϒϥϦ
എܠhttps://github.com/vuejs/vue-test-utils/issues/1
• Lead: @eddyerburgh• v1.0.0-beta.7
• ίϛϡχςΟʹΑΔ༁Ͱ֤ݴޠ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔυΩϡϝϯτhttps://vue-test-utils.vuejs.org/
1.0 ʹ͚ͨ࠷ऴௐhttps://github.com/vuejs/vue-test-utils/issues/246
1.0CommingSoon…
vue-component-compiler
SFCͷίϯύΠϥ• όϯυϥʹͱΒΘΕͳ͍APIΛϥΠϒϥϦͱͯ͠ఏڙvue-component-compilerAPI
ҎԼͷ՝ղܾΛత• SFCίϯύΠϧϩδοΫͷॏෳͷআڈ• ϝϯςφϯεͷվળvue-loader rollup-plugin-vuevueifyparse / compile parse / compile parse / compilevue-template-compilervue-template-compilervue-template-compiler
• Lead: @znck @eddyerburgh• WIP
• ࠷ॳͷ࣮େମऴΘ͍ͬͯΔঢ়گݱࡏϨϏϡʔͪhttps://github.com/vuejs/vue-component-compiler/pull/29
ParcelରԠ͢Δ͔https://github.com/parcel-bundler/parcel/issues/5
vue-cli
VueϓϩδΣΫτߏஙCLI• ݱࡏͷ࠷৽όʔδϣϯ: v2.9.2ָʹ։ൃڥΛߏஙͰ͖͙ͯ͢ʹ։ൃͰ͖Δʂ
͔͍͠͠Ζ͍Ζͱ͕͋Δ
ςϯϓϨʔτͷϝϯς͕େม• ϓϩδΣΫτͷมߋͱςϯϓϨʔτͷมߋͷಉظ• ςϯϓϨʔτͷόʔδϣϯཧ
CLI͔ΒΘΕΔ࣭߲• ࣝΛཁ͢Δͷ͕͋ͬͯॳ৺ऀʹ༏͘͠ͳ͍• ࣭߲͕ଟ͗͢ΔESLintʁJestʁNightWatchʁ… ޙͲΜ͚ͩ͋Δͷʁ
3.0Ͱ࠶ઃܭ• ͜͏ͨ͠ʹରԠ͢ΔͨΊ࠶ઃܭhttps://github.com/vuejs/vue-cli/issues/589
• Lead: @yy990803 @egoist• WIP
3.0ΞʔΩςΫνϟ⚠ݱࡏ·ͩઃܭதͷஈ֊ͷͷͰ͢ʂ
৽͍͠ΞʔΩςΫνϟ• ϓϦηοτϞσϧͷ࠾༻• ίϚϯυͰΦϯσϚϯυͰϓϦηοτͷՃՄೳ• ϓϦηοτຖʹnpmͰཧՄೳ• ϓϦηοτଆͰscaffoldingΛఆٛՄೳ
৽͍͠ΞʔΩςΫνϟ• ϕʔεwebpackςϯϓϨʔτ• browserifyഇࢭ͍ͯ͘͠༧ఆ
৽͍͠ΞʔΩςΫνϟ• configϑΝΠϧʹΑΔूதཧ• ڥม• APIϓϩΩγ• webpack-chainʹΑΔϨϕϧઃఆ• …ͳͲ
৽͍͠ΞʔΩςΫνϟ• vue-cliͷ• ैདྷͷ vue build ΞυΦϯ͢ΔܗͰར༻Ͱ͖ΔΑ͏ʹ͢Δ
Core
• Lead: @yy990803• called `2.x-next`• 2018 earlyVue 3.0 ?
• େ͖ͳഁյతมߋ͠ͳ͍༧ఆ• 2.xܥͱฏߦͯ͠ϝϯς͞ΕΔAPIͷޓੑͱ2.x2.x2.x-next2.5
• ωΠςΟϒʹES2015Λαϙʔτ͢ΔϒϥβͷΈʂରϒϥβ
• ES2015 Proxy Ͱॻ͖͑Δ༧ఆϦΞΫςΟϒγεςϜͷվળ2.x2.x-next Ҏ߱
όοΫϩά(ະఆ)
• SFC͔Βม͢ΔCLIΛαϙʔτ͢Δ͔͠Εͳ͍WebComponentsରԠhttps://www.youtube.com/watch?v=wZN_FtZRYC8&t=2397s
• Class Fields ͱ Decorators ͕ stage-4ʹͳͬͨͱ͖ରԠ͢Δ͔͠Εͳ͍ΫϥεϕʔεͷAPIఏڙ
• WebAssemblyଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ʹͳͬͨΒ͏͔͠Εͳ͍WebAssemblyରԠhttps://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
2018ΧϯϑΝϨϯε
• Vue.js Conference Amsterdm• VueConf US 2018• Vue.js London 2018• VueConf EU 2018ͦͯ͠ຊ։࠵ʹ͚ͯ४උதʂʂ
·ͱΊ
• ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹΑͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ• ελΠϧΨΠυɺࠓޙΫοΫϒοΫʹΑΓ͞ΒʹυΩϡϝϯτ͕ॆ࣮͍ͯ͘͠• vue-test-utilsɺeslint-plugin-vueɺͦΖͦΖਖ਼ࣜϦϦʔε͞ΕΔ·ͱΊ
• vue-component-compilerʹΑΓɺSFCͷίϯύΠϧΛ͢ΔͨΊʹɺόϯυϥʹͱΒΘΕͳ͍APIͱͯ͠ఏڙ͞ΕΔΑ͏ʹͳΔ༧ఆ• vue-cli 3.0 Ͱɺ࠶ઃܭ͞ΕΔ͜ͱʹΑΓɺϓϦηοτͱconfigϑΝΠϧʹΑΔɺϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩδΣΫτ։ൃڥͷߏங͕ՄೳʹͳΔ༧ఆ·ͱΊ
• Vue ίΞͷ2.x-nextͰɺAPIͷޓੑ͕อͨΕͭͭɺվળ͞ΕͨϦΞΫςΟϒγεςϜ͕ఏڙ͞ΕΔ༧ఆ• ͨͩ͠ɺݱ࣌ͰαϙʔτରͱͳΔϒϥβωΠςΟϒʹES2015Λαϙʔτ͍ͯ͠ΔͷͷΈ͕ର༧ఆ·ͱΊ
Vue.jsͷϛογϣϯ։ൃମݧΛΑ͘͢ΔͨΊʹࠓޙऔΓΜͰ͍͘
One more thing …
• 20183݄·ͨ4݄։࠵༧ఆ• teratail͞ΜαϙʔτVue.jsॳ৺ऀ͚ϋϯζΦϯ͜Μͳײ͡Ͱू·ͬͯΓ·͢ʂ(React.jsͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ