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
11k
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
わたしのOSS活動
kazupon
3
500
Vapor Revolution
kazupon
3
3.6k
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
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
What's new in Adaptive Android development
fornewid
0
130
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
新世界の理解
koriym
0
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing for Performance
lara
610
69k
Rails Girls Zürich Keynote
gr2m
95
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Language of Interfaces
destraynor
158
25k
Unsuck your backbone
ammeep
671
58k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Why Our Code Smells
bkeepers
PRO
337
57k
Being A Developer After 40
akosma
90
590k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Optimizing for Happiness
mojombo
379
70k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ