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.5k
まちにまった Vue.js 3
kazupon
August 25, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
Native-ESM powered web dev build tool
kazupon
5
1.6k
Other Decks in Programming
See All in Programming
sqlcを利用してsqlに型付けを
kamiyam
0
240
CSC509 Lecture 03
javiergs
PRO
0
140
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
130
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
120
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
200
◯◯エンジニアになった理由
gessy0129
PRO
0
650
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
1
590
Real-time message handling and notifications with API Platform and Symfony
alli83
1
100
What is TDD?
urakawa_jinsei
1
220
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
130
Интеграционное тестирование: как приручить хаос
lamodatech
0
560
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Cult of Friendly URLs
andyhume
77
6k
Speed Design
sergeychernyshev
22
480
Art, The Web, and Tiny UX
lynnandtonic
296
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Teambox: Starting and Learning
jrom
131
8.7k
In The Pink: A Labor of Love
frogandcode
139
22k
Being A Developer After 40
akosma
84
590k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ