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
Future of Vue.js
Search
kazupon
December 13, 2017
Programming
10
8.9k
Future of Vue.js
Vue.jsの今後
kazupon
December 13, 2017
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
520
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Deep Dive into Kotlin Flow
jmatsu
1
360
私の後悔をAWS DMSで解決した話
hiramax
4
210
Rancher と Terraform
fufuhu
2
550
testingを眺める
matumoto
1
140
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for humans not robots
tammielis
253
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Writing Fast Ruby
sferik
628
62k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Scaling GitHub
holman
463
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
Future of Vue.js Vue.js v-meetup #6 2017.12.13 @kazupon
ࣗݾհ
kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,
vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
͡Ίʹ
രൃͨ͠ 2017
Google Trend
• 2016 GitHub Stars
• 2017 GitHub Stars
ॳͷެࣜ ΧϯϑΝϨϯε ։࠵
VueConf 2017 https://conf.vuejs.org
VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/
Progressive ʹ ਐԽ͢ΔVue.js
2017.02.26 v2.2 Initial D 2017.04.27 v2.3 JoJo’s Bizarre Adventure 2017.07.13
v2.4 Kill la Kill 2017.10.13 v2.5 Level E
2017.02.26 v2.2 Initial D • SSRͷվળ • ΤϥʔϋϯυϦϯάͷվળ • ίϯϙʔωϯτ͚v-modelͷΧελϚΠζ
• Provide / Inject
2017.04.27 v2.3 JoJo’s Bizarre Adventure • SSRͷվળ • ඇಉظίϯϙʔωϯτͷվળ •
ؔܕίϯϙʔωϯτͷվળ
2017.07.13 v2.4 Kill la Kill • SSRͷϑϧରԠ • ༰қͳϥούίϯϙʔωϯτͷ࡞αϙʔτ (inheritAttrs,
$attrs, $listeners) • ύϑΥʔϚϯεվળ
2017.10.13 v2.5 Level E • TypeScript ܕఆٛͷվળ • ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ •
SFCͷؔܕίϯϙʔωϯτͷαϙʔτ
͞Βʹ ൟӫ͢Δ ΤίγεςϜ
None
StorybookͰαϙʔτ
͞ΒͳΔڧྗͳ ίΞνʔϜϝϯό ͷδϣΠϯ
…
ͦΜͳத
2017.09.26
AMA with Vue.js Team https://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 • Cookbook Vue 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.0 Comming Soon…
༰ʹ͍ͭͯ ͜ͷޙͷൃදͰʂ
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.0 Comming Soon…
༰ʹ͍ͭͯ ͜ͷޙͷൃදͰʂ
vue-component- compiler
SFCͷίϯύΠϥ • όϯυϥʹͱΒΘΕͳ͍APIΛϥΠ ϒϥϦͱͯ͠ఏڙ vue-component-compiler API
ҎԼͷ՝ղܾΛత • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse /
compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-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 early Vue
3.0 ?
• େ͖ͳഁյతมߋ͠ͳ͍༧ఆ • 2.xܥͱฏߦͯ͠ϝϯς͞ΕΔ APIͷޓੑͱ2.x 2.x 2.x-next 2.5
• ωΠςΟϒʹES2015Λαϙʔτ͢ ΔϒϥβͷΈʂ ରϒϥβ
• ES2015 Proxy Ͱॻ͖͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.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ͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ