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.7k
Future of Vue.js
Vue.jsの今後
kazupon
December 13, 2017
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
0
46
Vapor Revolution
kazupon
2
3.1k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.6k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
160
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
190
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
2
210
DROBEの生成AI活用事例 with AWS
ippey
0
130
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
560
Open source software: how to live long and go far
gaelvaroquaux
0
630
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
For a Future-Friendly Web
brad_frost
176
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Embracing the Ebb and Flow
colly
84
4.6k
Adopting Sorbet at Scale
ufuk
74
9.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing Experiences People Love
moore
140
23k
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ͷ࣌ͷ༷ࢠ)
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ