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 3
Search
kazupon
August 25, 2020
Programming
14
5.4k
まちにまった Vue.js 3
kazupon
August 25, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
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
930
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
Native-ESM powered web dev build tool
kazupon
5
1.4k
まもなくやってくる Vue.js 3
kazupon
38
19k
Other Decks in Programming
See All in Programming
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.9k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.1k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
270
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Semantic search with Django and pgvector
pauloxnet
0
240
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
870
Featured
See All Featured
Building an army of robots
kneath
300
41k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
39k
Being A Developer After 40
akosma
56
580k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
For a Future-Friendly Web
brad_frost
171
8.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Building Applications with DynamoDB
mza
88
5.6k
Done Done
chrislema
178
15k
Making Projects Easy
brettharned
108
5.5k
Transcript
·ͪʹ·ͬͨ Vue.js 3 Vue.js v-tokyo meetup #11 2020.08.25 @kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
͡Ίʹ
20207݄18
Vue.js 3.0 RC ϦϦʔεʂ https://github.com/vuejs/rfcs/issues/189 ͜ͷ issue Ͱ Evan ࢯ͕ࠓޙʹ͍ͭͯද໌
߹ΘͤͯެࣜυΩϡϝϯτެ։ (β) https://v3.vuejs.org/
ެࣜϓϥάΠϯɾπʔϧ΄΅४උ͕͍ͭͭ͋Δ • vue-router v4.0.0-beta6 • vuex v4.0.0-beta4 • vue-cli v4.5.0
(vue 3 preset) • vue-devtools v6.0.0-beta.1 • eslint-plugin-vue v7.0.0-beta.2 • @vue/test-utils v2.0.0-beta.2 • vue-class-component v8.0.0-alpha.6 • vue-loader v16.0.0-beta.5 • rollup-plugin-vue v6.0.0-beta.8
σγδϣϯπϦʔͷެ։ https://github.com/vuejs/rfcs/issues/183
͍Α͍Α ϦϦʔεؒۙʂ
ࠓ͢͜ͱ
ͦͷલʹ
20202݄1
None
Vue 3 ʹ͍ͭͯͨ͠
εϥΠυͪ͜Β https://speakerdeck.com/kazupon/mamonakuyatutekuru-vue-dot-js-3
ͱ͍͏͍Θ͚Ͱ
ࠓ͢͜ͱ • 2݄ͷൃද͔Βͷ Diff (ࠩ) • Vue 3 ؔ࿈पΓͷΞοϓσʔτใ •
SFC • Vite • @vuedx • ͦͷଞ
SFC
Evan ࢯ͕ SFC վળ ͷ PR ΛԼ https://twitter.com/youyuxi/status/1277695108268339208
Լͨ͠ RFC 3ͭ • 1. ίϯϙʔωϯτͷΠϯϙʔτҥߏจ • 2. Composition
API ͷ DX վળ • 3. CSS มΠϯδΣΫγϣϯ https://github.com/vuejs/rfcs/pull/182
ίϯϙʔωϯτ ͷ Πϯϙʔτҥߏจ
<component> • SFC ʹ<component>ϒϩοΫΛಋೖ
<component> ͰԿ͕ྑ͘ͳΔͷ͔ʁ
͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • Ұൠతͳίϯϙʔωϯτ ैདྷ RFC ίϯϙʔωϯτΛ͏ͨΊʹ ͍͍ͪͪ <script> ϒϩοΫͰ import
͢Δඞཁ͕ͳ͘ͳΔ
͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • ඇಉظͳίϯϙʔωϯτ ඇಉظίϯϙʔωϯτΛϩʔυ͢ΔͨΊʹ dynamic import Ͱ components Φϓγϣϯʹ ࢦఆ͢Δඞཁ͕ͳ͘ͳΔ
ैདྷ RFC
ίϯϙʔωϯτΛผ໊ʹͰ͖Δ • as Λ͏͜ͱͰผ໊ʹͰ͖Δ ES modules ͷ import ߏจͷ as
ͱಉ͜͡ͱ͕Ͱ͖Δ
Composition API ͷ DX վળ
<script setup> • <script> ʹ setup ͕Ճ
<script setup> Ͱ Ͳ͏DX͕ྑ͘ͳΔʁ
ΑΓ؆ܿʹ࣮Ͱ͖Δʂ setup ؔͰϩδοΫΛ࣮ͯ͠ɺϨϯμϦϯά ͢ΔͨΊʹίϯςΩετฦ͢ඞཁ͕ͳ͘ͳΔʂ ैདྷ RFC
͍ํ
ίϯςΩετͰϨϯμϦϯά͢ΔͨΊʹʁ • export ͢Δ ES Modules ͷ export ߏจΛ͏͚ͩ
setupؔͷҾͲ͏͏ʁ • setup ͷଐੑʹࢦఆ͢Δ ैདྷ RFC
ίϯϙʔωϯτΦϓγϣϯʁ ैདྷ RFC props ͳͲͷ ίϯϙʔωϯτΦϓγϣϯΛ ͏߹ export default ͢Δඞཁ͕͋Δ
TypeScript ʁ • declare Λͬͯܕఆٛ declare Ͱ props Λ͢Δͱɺ SFCίϯύΠϥ͕
props ࣮ࡍͷఆٛίʔυͱ TS ͷܕਪ͞ΕΔΑ͏ʹίϯύΠϧ͢Δ
<script> ͱ <script setup> ΛҰॹʹ͑Δ ༻్: - άϩʔόϧͳॲཧΛҰ͚ͩ ࣮ߦ͍ͨ͠߹ -
SFC Ͱ named export ͳͷΛ ఏڙ͍ͨ͠߹
CSS ม ΠϯδΣΫγϣϯ
<style vars> • style ϒϩοΫʹ vars ͕Ճ
<style vars> Ͱ Ͳ͏ྑ͘ͳΔʁ
script ଆ͔ΒΛͤΔʂ vars ʹఆٛͨ͠มΛ Webඪ४ͷCSSมͷཁྖͰ ελΠϧͱͯ͠ ׂΓͯΔ͜ͱ͕Ͱ͖Δʂ ͭ·ΓɺಈతͳελΠϧΛ੍ޚͰ͖Δʂ όΠϯσΟϯάʂ
<style scoped>ͱ͍ͬ͠ΐʹར༻Մೳ vars Λ scoped ͱ ͍ͬ͠ΐʹར༻͍ͨ͠߹ɺ ෦ͷCSSมϩʔΧϧͱݟͳ͢ ͭ·Γɺ͜ͷέʔεͰ --color
͕Өڹ͢Δͷ ͜ͷίϯϙʔωϯτʹͷΈ
άϩʔόϧͳCSSมͷར༻ʁ --global ϓϦϑΟοΫεΛͬͯ CSSมΛར༻͢Δ
͜ΕΒRFCͷ࠾ʹ͍ͭͯ • <script setup>, <style vars> ʹͭ ͍ͯ RC ʹ࣮ࡁΈ
• <script setup> ͳ͑͘Δ • <style vars> CSS ม͕͑ΔϞ μϯͳϒϥβͰར༻Ͱ͖Δ
͜ΕΒRFCͷ࠾ʹ͍ͭͯ • <compontent> ʹ͍ͭͯ·ͩະ࣮ • SFC ʹ৽ͨͳϒϩοΫॻ͖ํ͕ՃΘΔ ͷͰɺෳࡶੑͱֶशίετ͕૿͢ΜͰ ʁ •
Vetur ͱ͍ͬͨςϯϓϨʔτղੳΛ͢Δ πʔϧӨڹ͕େ͖͗͢ΔͷͰʁ
ͱ͍͏Θ͚ͰɺVue 3.0 Ͱ… • ·ͩ RFC Ͱ͍Ζ͍ΖͱٞɺϑΟʔυόο Ϋ͕͋ΔͨΊ SFC ͷਖ਼ࣜػೳͰͳ͍
• ͜ͷ SFC վળ Experimental (࣮ݧత) ͳ ػೳͱͯ͠ఏڙ͞ΕΔ • ͳ͚Εɺv3.1 ? Ͱ࠾͞ΕΔ༧ఆ
Vite
Evan ࢯ͕৽͍͠Ϗϧυπʔϧެ։ • ಡΈํ: `/vit/` https://github.com/vitejs/vite
6݄ʹViteʹ͍ͭͯͨ͠ https://speakerdeck.com/kazupon/native-esm-powered-web-dev-build-tool ϓϥάΠϯ࡞Γ͍ͨਓ ෦࣮ʹ͍ͭͯΓ͍ͨํͥͻʂ
Vite ͷಛ • ES Modules ϕʔεͷ։ൃαʔόΛඋ͑ͨϞμϯͳ Ϗϧυπʔϧ • dev server
ߴ • ىಈ࣌ʹͯ͢όϯυϧ͠ͳ͍ • ߴͳ ESbuild ʹΑΔ on the fly ίϯύΠϧ • Hot Module Replacement (HMR) γϯϓϧͳ ͨΊ͍
ػೳ • Bare Module Resolving • Hot Module Replacement •
TypeScript • CSS / JSON Importing • Asset URL Handling • PostCSS • CSS Modules https://github.com/vitejs/vite#features • CSS Pre-processors • JSX • Custom Blocks • Config File • Dev Server Proxy • Production Build • Modes and Environment Variables
ػೳ • Web Assembly • Inline Web Workers • HTTPS/2
https://github.com/vitejs/vite#features
ੜ·Εͨഎܠ • VuePress ͷىಈ͕ͯ͘ΠϥΠϥͨ͠ • SFC Λ ES Modules Ͱಈ͔͍ͨ͠ͱ͍͏Ξ
ΠσΞ͕ੲ͔Β͋ͬͨ • Snowpack ͳͲͷ৽͍͠ ES Modules ϕʔ εͷόϯυϥ͕ग़ݱ͖ͯͨ͠
ͦΜͳதΞΠσΞ͕͍߱Γ͖ͯͯੜ·Εͨ https://twitter.com/youyuxi/status/1252173663199277058
Vite ͷݱঢ় • v1.0.0 RC ͱͯ͠ϦϦʔε͞Ε͍ͯΔͷ Ͱɺۙʑਖ਼ࣜ v1.0 ͕ϦϦʔε͞ΕΔݟࠐ Έ
• ϓϩμΫγϣϯ͚ͷϏϧυɺ࣮࣭ rollup ͰϏϧυ͢ΔͷͰ͑Δͣʂ...
Vue ͱ Vite ͱͷؔ • Vue 3 ͚ͷެࣜυΩϡϝϯτͰ Vite Λ
ͬͨΠϯετʔϧʹ͍ͭͯॻ͍ͯ͋Δ • ͳͷͰɺVue ͚ʹαϙʔτ͞Ε͍ͯ͘ ͷؒҧ͍ͳ͍
։ൃڥ͕͙͢ʹ͏ʂ • npm init vite-app ͷΑ͏ͳίϚϯυ TypeScript ͱ͔ॾʑͷڥ͕͏ʂ • ͷͰɺΈͳ͞Μɺ͍͖ͬͯ·͠ΐ͏ʂ
@vuedx
Vue developer experience • Vue ͷ DX ΛΑ͘͢Δ ͨΊͷπʔϧ •
ίΞνʔϜͷ Rahul ࢯ (znck) ͕࡞த • ·ͩ Experimental https://twitter.com/znck0
༨ஊ: ͪͳΈʹ Rahul ࢯ 2018 ຊʹདྷ͍ͯΔ • Vue Fes Japan
2018 • ίϯύΠϥपΓ͕ಘ ҙ • rollup-plugin-vue ͷ ։ൃऀ https://vuefes.jp/2018/speakers/znck/
GitHub ϦϙδτϦ • @vuedx Rahul ࢯͷݸਓϦϙδτϦͰ։ ൃਐΊΒΕ͍ͯΔ https://github.com/znck/vue-developer-experience
@vuedx ͲͷΑ͏ͳ ͷ(DX)Λఏڙ͢Δͷ͔
@vuedx ͕ఏڙ͢Δͷ • @vuedx ͷΰʔϧͱͯ͠ҎԼΛఏڙ͢Δ͜ͱ • <template> ͰͷܕνΣοΫ • ίʔυิ
• ϦϑΝΫλϦϯάػೳ • SFC ͷ ES Modules Խ
<template> ͰͷܕνΣοΫ https://twitter.com/znck0/status/1290278773049286657/photo/1
ϦϑΝΫλϦϯάػೳ • <template>ͱ<script>ͱͷಉظ • Props ͷมߋ • ίϯϙʔωϯτλάͷมߋ • ϑΝΠϧ໊มߋͱίϯϙʔωϯτͷநग़
• ม໊ͷมߋ • … ͳͲ
σϞ • ྫ: ίϯϙʔωϯτλάͷมߋ https://twitter.com/znck0/status/1290577650398846976
@vuedxͰ ͜ΕΛͲ͏͍ͬͯΔͷ͔
ΞʔΩςΫνϟ VS Code ͷ Language Service ʹύον͢Δ ײ͡Ͱ SFC Λॲཧ͍ͯ͠Δ
Vue Virtual TextDocument • SFC ֤ϒϩοΫΛԾϑΝΠϧͱͯ͠ॲཧ component.vue component.vue____script.ts component.vue____template.ts component.vue____render.ts
TS ͷίʔυ ͱͯ͠ॲཧ͢Δ
@vuedxɺ Vetur ͱಉ͡Α͏ ͳπʔϧͰʁ
Vetur ࠓޙͲ͏ͳΔʁ
ࠓޙ౷߹͍ͯ͘͠༧ఆ https://github.com/vuejs/vetur/issues/2016 Vetur ʹ @vuedx ͷTSϓϥάΠϯΛऔΓೖ ΕͯϦϑΝΫλϦϯάػೳΛஔ͖͑Δ
ͦͷଞ
Reactivity API
Ҏલͷ2݄ͷൃදͷͱ͖ • reactive • computed • watch • readonly •
ref • isRef • toRefs ্هͷΑ͏ͳجຊతͳAPI͔͠ͳ͔͕ͬͨ…
͞ΒʹҎԼͷAPI͕૿͑ͨ • shallowReactive • shallowRef • markRaw • triggerRef •
isReactive • isProxy • toRaw ओʹύϑΥʔϚϯεͷ࠷దԽɺߴͳ͜ͱ ͍ͨ͠ਓ͚ʹެ։͞Εͨ
ৄ͍͠ৄࡉެࣜυΩϡϝϯτͰ Reactivity API ͷ߲ʹࡌ͍ͬͯ·͢ https://v3.vuejs.org/api/basic-reactivity.html#reactive
Vue.js ίΞνʔϜͷهࣄಡΉͱΑ͍ • Reactive ͷྺ࢙Λަ͑ͳ͕Βղઆ͍ͯ͠Δ https://dev.to/jinjiang/understanding-reactivity-in-vue-3-0-1jni
͔Γ͍͢ Reactivity API ʹ͍ͭͯͷࢿྉ • Ref ͱ Reactive Λ͍͚͕ຊޠͰ͔ Γ͘͢ॻ͍ͯΔ
https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in
@vue/ composition-api
v1.0.0 ͕ϦϦʔε͞Εͨ • δϣΠϯͨ͠ Anthony ࢯ Carlos ࢯʹΑͬͯ։ൃ͕ਐ Μͩ •
vue-next ͔ΒΓͳ ͍API͕όοΫϙʔ τ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ
͜ΕͲ͏͍͏͜ͱʁ
ॳظͷࠒҙॻ͖͕͋ͬͨ https://github.com/vuejs/composition-api/commit/bde4d1b1900c98e13d7ec3e555425e19afc1b3f1#diff-04c6e90faac2675aa89e2176d2eec7d8 ຊ൪ڥͰ͏ͷਪ͠ͳ͍ʂͱ
։ൃ͕ਐΉΑ͏ʹͳ͔ͬͯΒ… • όοΫϙʔτ͢Δ͏ͪʹ͜ͷҙॻ͖ ͳ͘ͳͬͨ https://github.com/vuejs/composition-api/commit/7e6598cddebfc2c7ec307838b3eae8a1fcc0ce8b#diff-04c6e90faac2675aa89e2176d2eec7d8
ͭ·Γɺຊ൪ڥͰ͑Δ͜ͱΛҙຯ͠·͢ • Vue 3 RC ϑΣʔζ • Vue 2
ͱ Vue 3 Λ ޓΛอͭϥΠϒ ϥͳͲ࡞͍ͬͯΔ ࡞ऀʹΑ࣮ͬͯূ ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ
ͭ·Γɺຊ൪ڥͰ͑Δ͜ͱΛҙຯ͠·͢ • ެࣜతʹஅݴ͍ͯ͠ͳ͍͕ɺόοΫ ϙʔτޭͨ͠ͱʂ໌ݴ͍ͯ͠Δ
͝ར༻ܭըతʹ • ੍ݶࣄ߲͕͋Δ https://github.com/vuejs/composition-api#limitations
͝ར༻ܭըతʹ • ύϑΥʔϚϯε͕ؾʹͳΒͳ͍͔Ͳ͏͔ https://antfu.github.io/vue-composition-api-benchmark-results/
·ͱΊ
• Ҏલ͕ࣗൃද͔ΒɺVue 3 RC ͕ϦϦʔε͞ΕΔ·Ͱʹ͍Ζ ͍Ζͱਐల͕͋ͬͨ • SFC վળ RFC
• Vite ര • @vuedex ͷ։ൃ • @vue/composition-api 1.0 ϦϦʔε • ࠓޙਖ਼ࣜϦϦʔε·Ͱʹਐల͕͋Δͱࢥ͏ͷͰɺใ ΩϟονΞοϓ͍͚ͯͨͩ͠Εɻ ·ͱΊ
࠷ޙʹ
• ΑΓOSS։ൃͷ׆ಈ͍͖͍ͯͨ͠ͷͰɺα ϙʔτͯ͘͠ΕΔͱ͏Ε͍͠Ͱ͢ʂ GitHub Sponsors https://github.com/sponsors/kazupon
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ