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.6k
まちにまった Vue.js 3
kazupon
August 25, 2020
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
510
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
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
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
為你自己學 Python - 冷知識篇
eddie
1
300
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
24
9.2k
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
110
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
940
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
250
AIでLINEスタンプを作ってみた
eycjur
1
210
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
🔨 小さなビルドシステムを作る
momeemt
2
610
OSS開発者という働き方
andpad
5
1.4k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Unsuck your backbone
ammeep
671
58k
Practical Orchestrator
shlominoach
190
11k
Done Done
chrislema
185
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
207
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ