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
480
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.8k
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
VS Code Update for GitHub Copilot
74th
2
580
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
260
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Team operations that are not burdened by SRE
kazatohiei
1
290
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
Deep Dive into ~/.claude/projects
hiragram
11
2.3k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.8k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
470
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Visualization
eitanlees
146
16k
Why Our Code Smells
bkeepers
PRO
337
57k
Fireside Chat
paigeccino
37
3.5k
Balancing Empowerment & Direction
lara
1
400
Git: the NoSQL Database
bkeepers
PRO
430
65k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ