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
500
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
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
コーディングエージェント概観(2025/07)
itsuki_t88
1
480
Jakarta EE Meets AI
ivargrimstad
0
540
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.4k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
階層化自動テストで開発に機動力を
ickx
1
460
構文解析器入門
ydah
7
2k
decksh - a little language for decks
ajstarks
4
21k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
790
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.1k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
340
リッチエディターを安全に開発・運用するために
unachang113
1
340
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
KATA
mclloyd
31
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
BBQ
matthewcrist
89
9.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Git: the NoSQL Database
bkeepers
PRO
431
65k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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ͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ