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
510
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
State of CSS 2025
benjaminkott
1
120
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
990
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
200
AIエージェント開発、DevOps and LLMOps
ymd65536
1
340
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
Langfuseと歩む生成AI活用推進
licux
3
300
AIコーディングAgentとの向き合い方
eycjur
0
220
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
Introduction to Git & GitHub
latte72
0
120
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Speed Design
sergeychernyshev
32
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Unsuck your backbone
ammeep
671
58k
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ͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ