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
Vue.jsの今後と次世代Web開発について
Search
kazupon
March 25, 2018
Programming
17
10k
Vue.jsの今後と次世代Web開発について
MANABIYA
2018-03-24 (sat) Webセッション 3時限目の発表内容
https://manabiya.tech
kazupon
March 25, 2018
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.2k
Vue 3.4
kazupon
13
4.2k
Vue & Vite Rustify
kazupon
4
1.9k
Vue.jsエコシステム動向2023
kazupon
17
7.1k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
960
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
520
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
あらゆるアプリをCompose Multiplatformで書きたい! -ネイティブアプリの「あの機能」を私たちはどう作るか-
subroh0508
1
800
CSC307 Lecture 01
javiergs
PRO
0
250
2024年版 Kotlin サーバーサイドプログラミング実践開発
n_takehata
3
920
Breaking the Ceiling: Scaling Your Impact at the Staff-Plus Level (InfoQ-DevSummit-Boston)
thiagoghisi
0
100
CSC307 Lecture 02
javiergs
PRO
0
270
日付と闘う-和暦は難しい / vs Dates - Japanese Chronology is Difficult
wkwkhautbois
0
200
スクラムチームに入れないという選択: フルサイクルチームにおける開発者のステップアップ / Why We Don’t Add Newbies to Our Scrum Team
yuk4w4
3
1.4k
Androidアプリのテスト駆動開発入門
tonionagauzzi
0
160
Ruby Function Composition
bkuhlmann
1
400
自分好みの TS バンドラを Rust で作れる!Deno の内部ライブラリの活用 – Denoで変わるランタイムの景色 実践事例 Lunch LT
pizzacat83
4
520
ソートできるUUID v7をJavaで使うときの話
yoshiori
7
5.1k
いまどきの分析設計パターン10選
masuda220
PRO
30
10k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
24
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Visualization
eitanlees
137
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
13
1.4k
Robots, Beer and Maslow
schacon
PRO
155
8k
Adopting Sorbet at Scale
ufuk
69
8.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
21k
We Have a Design System, Now What?
morganepeng
45
6.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
13
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Transcript
Vue.jsͷࠓޙ ͱ ࣍ੈͷWeb։ൃʹ͍ͭͯ MANABIYA 2018.03.24 @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
We are hiring!! ϑϩϯτΤϯδχΞ ࠾༻தʂ
͡Ίʹ
2017 ͷ Vue.js
GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-framework • ϑϩϯτΤϯυϑϨʔϜϫʔΫ: 1Ґ
GitHub Stars JavaScript ϕετɾΦϒɾβɾΠϠʔ 2017 https://risingstars.js.org/2017/ja#section-all • ૯߹Ͱ2࿈ଓͰϕετϓϩδΣΫτ
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
ॳͷެࣜ ΧϯϑΝϨϯε ։࠵
VueConf 2017 https://conf.vuejs.org
VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/
ࢿۚࢧԉͷڧԽ
Patreon https://www.patreon.com/evanyou/overview ࢧԉʹΑΔOSSશϑϧλΠϜԽ
OpenCollective https://opencollective.com/vuejs ίϛϡχςΟ׆ಈࢧԉ͚
ΤίγεςϜ
None
Storybook https://medium.com/storybookjs/announcing-storybook-3-2-e00918a1764c
Nuxt.js https://twitter.com/nuxt_js/status/950400427111206912 2018 Jan 9 ϦϦʔε
NativeScript https://nativescript-vue.org 2018 Feb 13 ϦϦʔε
ίΞνʔϜ ͷ ڧԽ
…
ࠓ͢͜ͱ
• ίΞνʔϜମ੍ʹΑΔ։ൃঢ়گ • ࣍ੈͷWeb։ൃʹ͚ͯ
ίΞνʔϜମ੍ ʹΑΔ ։ൃঢ়گ
• Core • Vue Test Utils • Vue CLI 3.0
• eslint-plugin-vue 4.0 • vue-component-compiler • Style Guide • Cookbook Vue Project Roadmap https://github.com/vuejs/roadmap
Style Guide
ެࣜελΠϧΨΠυ • Vue.jsΛͬͨ։ൃͷखॿ͚ͱͳΔ ελΠϧΨΠυΛఏڙ
• Ϧʔυ: @chrisvfritz
betaϦϦʔεࡁΈ ݱࡏ eslint-plugin-vue ͷରԠͪ
Cookbook
ެࣜΫοΫϒοΫ • Α͋͘Δམͱ݀͠ͳͲͷରॲ͕ॻ ͔ΕͨυΩϡϝϯτ
• Ϧʔυ: @sdras
͍ͭ࠷ۙbetaϦϦʔε https://vuejs.org/v2/cookbook/
ݱࡏϨγϐ͕Ճ͞Ε͍ͯΔ https://github.com/vuejs/vuejs.org/pull/1464
eslint-plugin-vue 4.0
ެࣜESLintϓϥάΠϯ • Vue.js͚ͷίʔυΛϦϯτͯ͘͠ ΕΔϓϥάΠϯ
• Ϧʔυ: @michalsnik @mysticatea
v4.0 ϦϦʔεࡁΈ https://twitter.com/michalsnik/status/947502214591012864
ݱࡏͷঢ়گ https://github.com/vuejs/eslint-plugin-vue/issues?q=is%3Aissue+is%3Aopen+label%3A%22Present+in+Style+Guide%22 • ελΠϧΨΠυͷશରԠத
Vue Test Utils
୯ମςετ͚ͷެࣜϥΠϒϥϦ
• Ϧʔυ: @eddyerburgh
• ίϛϡχςΟʹΑΔ༁Ͱ֤ݴޠ ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔ υΩϡϝϯτ https://vue-test-utils.vuejs.org/
• ݱࡏ 1.0.0-beta.12 1.0 ʹ͚ͨ࠷ऴ࡞ۀத https://github.com/vuejs/vue-test-utils/issues/246
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
• Ϧʔυ: @znck @eddyerburgh
• ·ͩ։ൃதɻϦϦʔεεέδϡʔϧ ະఆɻ ݱࡏͷঢ়گ https://github.com/vuejs/vue-component-compiler/pull/29
Vue CLI 3.0
• Ϧʔυ: @yy990803
3.0 beta ϦϦʔε • ݱࡏ: v3.0.0-beta.6
ৄࡉ༰ ͜ͷޙͰʂ
Core
• Ϧʔυ: @yy990803
ࠓޙͷόʔδϣϯ 2.x 2.x-next 2.5
• ϦϦʔεܭը: 20183݄ • ରԠ༰: • ඇಉظपΓͷΤϥʔॲཧվળ • SSRपΓͷվળ •
ίϯύΠϧΤϥʔͷվળ • v-for ͷΠςϨʔλʔαϙʔτ 2.6
• ϒϥβ͚ͷESMαϙʔτ 2.6 https://github.com/vuejs/vue/pull/7110
• ϦϦʔεܭը: 20184݄ or 5݄ • Vue 3.0 ީิ (֬ఆͰͳ͍Ͱ͢)
• APIͷେ͖ͳഁյతมߋ͠ͳ͍ํ • 2.x ܥͱฒߦͯ͠όʔδϣϯཧ 2.x-next
• ωΠςΟϒʹES2015Λαϙʔτ͢Δϒ ϥβͷΈʂ ରϒϥβ
• ES2015 Proxy Ͱॻ͖͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.x-next Ҏ߱
Core ະ֬ఆ
• Class Fields ͱ Decorators ͕ stage-4ʹ ͳͬͨͱ͖ରԠ͢Δ͔͠Εͳ͍ ΫϥεϕʔεͷAPIఏڙ
• WASMଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ ʹͳͬͨΒ͏͔͠Εͳ͍ WebAssemblyରԠ https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
࣍ੈͷ Web։ൃʹ ͚ͯ
Vue CLI 3.0
WebϑϩϯτΤϯυ։ൃ https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj
ਏ͍ɻɻɻ
ͱ͍͏ ࠓͰ·ͩௌ͘
͜Εʹର͢ΔιϦϡʔγϣϯ • Vue CLI • ެࣜςϯϓϨʔτͷఏڙ npm install -g vue-cli
vue-cli init webpack my-app cd my-app npm install npm run dev
Be a Happy!
͔͠͠
͍Ζ͍Ζ͕ ग़͖ͯͨɻɻɻ
ΧΦεԽͨ͠ςϯϓϨʔτϩδοΫ ղͳϩδοΫͰϝϯς͕େม…
CLI͔ΒΘΕΔ࣭߲ • ࣭߲͕ଟ͍ͱμϧ͍ • ຖճೖྗ͕ඞཁ ESLint Jest NightWatch … ޙͲΜ͚ͩ
͋Δͷʁ
ϓϩδΣΫτΛੜ͢ΔͷΈ • ΞοϓάϨʔυ͢ΔΈ͕ͳ͍ ҰϓϩδΣΫτΛੜ͢ΔͱςϯϓϨʔτͷߋ৽༰Λ ϓϩδΣΫτଆʹಉظ͢Δ͜ͱ͕Ͱ͖ͳ͍ vue init webpack my-app cd
my-app npm install npm run dev ςϯϓϨʔτ ϓϩδΣΫτ ❌ ੜ ߋ৽ ⚙
3.0Ͱ࠶ઃܭ • ͜͏ͨ͠ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589
৽ ΞʔΩςΫνϟ
ϓϦηοτϞσϧ • ~/.vuerc ʹ࣭߲ ɺπʔϧͷઃఆɺ ϓϥάΠϯͳͲͷ ใ͕อଘ͞ΕΔ • ϦϞʔτͷϓϦηο τࢀরՄೳ
{ "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "version": "^3.0.0", "config": "airbnb", "lintOn": ["save", "commit"] } } }
σϑΥϧτθϩίϯϑΟά • webpackɺbabelɺ eslintͳͲͷઃఆ ͳΔ͘Ӆṭ͞Ε ΔΑ͏ʹͳ͍ͬͯΔ • .vue ϑΝΠϧʹΑ ΔϓϩτλΠϐϯ
άैདྷͲ͓Γఏ ڙ { // package.json "eslintConfig": { "root": true, "extends": [ "plugin:vue/essential", "eslint:recommended" ] }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
ઃఆͷॊೈੑ • vue.config.jsʹΑ ΔઃఆͷΧελϚ ΠζΛఏڙ • APIϓϩΩγ • webpack •
ͳͲ… module.exports = { // ... // webpackͷΧελϚΠζ chainWebpack: () => {}, configureWebpack: () => {}, // ։ൃαʔόͷΧελϚΠζ devServer: { proxy: null, before: app => {} }, // Vue CLI ϓϥάΠϯͷΧελϚΠζ pluginOptions: { // ... } }
ϓϥάΠϯʹΑΔ֦ுੑ • Service • Generator • Prompt . !"" README.md
!"" generator.js # generator (optional) !"" prompts.js # prompts file (optional) !"" index.js # service plugin #"" package.json
• WebComponents Ϗϧυͷαϙʔτ • ϨΨγʔίϚϯυ vue init ఏڙ ͦͷଞ
DEMO جຊతͳ͍ํ
DEMO WebComponents Ϗϧυ
DEMO Vue CLI UI
ͦͷଞ ͷ औΓΈ
Vue DevTools ⚙
ڧԽ͞ΕͨσόοΨ 4.0 Ͱ͍Ζ͍Ζͱศརػೳ͕Ճ
ελϯυΞϩϯ൛ͷఏڙ༧ఆ https://github.com/vuejs/vue-devtools/issues/451
TypeScript ؔ࿈
ςϯϓϨʔτͷܕαϙʔτ͞ΕΔ͔ ίΞνʔϜktsn͞Μ͕ͨͪؤுͬͯΔʂ https://github.com/vuejs/vetur/pull/681
·ͱΊ
• ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ • ͦͷऔΓΈͷ͏ͪͷ࣍ੈWeb։ൃʹ ͚ͯɺVue CLI 3.0 ͰɺWebϑϩϯτΤ ϯυͷ։ൃʹઐ೦Ͱ͖ΔΑ͏ػೳڧԽ
• Vue CLI 3.0 ۙʑϦϦʔε͢Δ༧ఆ
• ·ͨɺίΞνʔϜͷϝϯόɺͦͯ͠ίϯτ ϦϏϡʔλʹΑͬͯɺWebϑϩϯτΤϯυ ͷDXΛ্ͤ͞ΔͨΊʹɺ༷ʑͳ։ൃ͕ ͢͢ΊΒΕ͍ͯΔ
Vue ͷ ϛογϣϯ
࡞ऀͷVueʹର͢Δࢥ Simple Made Easy!! https://twitter.com/youyuxi/status/735109888930648064 https://www.vuejs.amsterdam
։ൃମݧΛΑ͘͢ΔͨΊʹ ࠓޙऔΓΜͰ͍͘
One more thing …
• 201811݄3()։࠵ܾఆʂ https://vuefes.jp Vue Fes Japan 2018
• 20184݄20։࠵༧ఆ (teratail͞Μαϙʔτ) Vue.jsॳ৺ऀ͚ϋϯζΦϯ
• 20185݄։࠵ܾఆʂ • 1 ηογϣϯ(Nuxt) + 8 LT Λ༧ఆ •
ۙʑΞφϯε༧ఆʂ Vue.js Tokyo v-meetup #7
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ