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
Vapor Revolution
kazupon
2
2.7k
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
1k
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
560
Other Decks in Programming
See All in Programming
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
200
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
450
Jakarta EE meets AI
ivargrimstad
0
230
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
270
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
fs2-io を試してたらバグを見つけて直した話
chencmd
0
220
良いユニットテストを書こう
mototakatsu
5
1.9k
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Documentation Writing (for coders)
carmenintech
66
4.5k
Practical Orchestrator
shlominoach
186
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Side Projects
sachag
452
42k
Bash Introduction
62gerente
608
210k
Code Reviewing Like a Champion
maltzj
520
39k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ