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
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.4k
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
780
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
150
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
130
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
570
React 使いじゃなくても知っておきたい教養としての React
oukayuka
15
4.4k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
490
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
430
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
520
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
It's Worth the Effort
3n
185
28k
What's in a price? How to price your products and services
michaelherold
246
12k
Six Lessons from altMBA
skipperchong
28
3.9k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Code Review Best Practice
trishagee
69
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
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ͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ