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
2
830
Vue 3.4
kazupon
13
4k
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
940
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Other Decks in Programming
See All in Programming
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
Netty Chicago Java User Group 2024-04-17
sullis
0
180
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
エンターテイメント業界で利用されるAWS
demuyan
0
210
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Fragment Composition of GraphQL
quramy
7
1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Happy Clients
brianwarren
92
6.4k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Making Projects Easy
brettharned
108
5.5k
Faster Mobile Websites
deanohume
299
30k
Six Lessons from altMBA
skipperchong
21
3k
GraphQLとの向き合い方2022年版
quramy
32
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
A designer walks into a library…
pauljervisheath
200
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
A better future with KSS
kneath
231
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ