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.5k
Vue 3.4
kazupon
13
4.5k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.5k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
990
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
550
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
距離関数を極める! / SESSIONS 2024
gam0022
0
290
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Realtime API 入門
riofujimon
0
150
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
980
Jakarta EE meets AI
ivargrimstad
0
140
C++でシェーダを書く
fadis
6
4.1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing for Performance
lara
604
68k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Producing Creativity
orderedlist
PRO
341
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Designing Experiences People Love
moore
138
23k
Automating Front-end Workflow
addyosmani
1366
200k
How GitHub (no longer) Works
holman
310
140k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ