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
490
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
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
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
400
20250708_JAWS_opscdk
takuyay0ne
2
140
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
650
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.8k
テスト駆動Kaggle
isax1015
1
840
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.3k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
230
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
180
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
KATA
mclloyd
30
14k
Designing for Performance
lara
610
69k
Typedesign – Prime Four
hannesfritz
42
2.7k
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Making Projects Easy
brettharned
116
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Automating Front-end Workflow
addyosmani
1370
200k
Statistics for Hackers
jakevdp
799
220k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ