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 & Vite Rustify
Search
kazupon
December 04, 2023
Programming
4
2.1k
Vue & Vite Rustify
kazupon
December 04, 2023
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.5k
Vue.jsエコシステム動向2023
kazupon
17
7.5k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
990
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
550
まちにまった Vue.js 3
kazupon
14
5.5k
Native-ESM powered web dev build tool
kazupon
5
1.6k
Other Decks in Programming
See All in Programming
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
Realtime API 入門
riofujimon
0
150
Contemporary Test Cases
maaretp
0
140
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
CSC509 Lecture 09
javiergs
PRO
0
140
初めてDefinitelyTypedにPRを出した話
syumai
0
420
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
620
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
940
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
950
Featured
See All Featured
RailsConf 2023
tenderlove
29
900
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
97
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Embracing the Ebb and Flow
colly
84
4.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Producing Creativity
orderedlist
PRO
341
39k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Transcript
Vue & Vite Rustify Vue Fes Japan 2023 After Meetup
2023-11-07 (ϝυϐΞגࣜձࣾ x MNTSQגࣜձࣾ x גࣜձࣾ hacomono) 2023-12-03 (FukuokaJS x LINEϠϑʔίϛϡχέʔγϣϯζגࣜձࣾ) @kazupon
ࣗݾհ
PLAID, inc. Vue.js Japan User Group Organizer Vue.js Core
Team Member Nuxt Community team Creator of Vue I18n & Intlify Maintainer of Nuxt I18n @kazu_pon kazupon kazupon
ࠓ͢͜ͱ
ΞδΣϯμ • Vue Fes Japan 2023 ͷৼΓฦΓ • Rolldown •
ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS • Oxc • πʔϧνΣΠϯͷಈ • Vue ʹ Rust ͷͬͯ͘Δʁ
Vue Fes Japan 2023
• 2023/10/28 ͍ͭʹ5ͿΓͷΦϑϥΠϯ։࠵ʂ Vue Fes Japan 2023
ΞϑλʔϜʔϏʔ • ΞϑλʔϜʔϏʔ͕Ͱ͖ͨͷͰྲྀ͠·͢ https://www.youtube.com/watch?v=rWIal-epFXQ
State of Vue Fes Japan 2023 • શࢀՃऀ: 583 ໊
• ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ) • εϙϯαʔ: 46 • ݸਓεϙϯαʔ: 44 ໊ • ΞϑλʔύʔςΟʔࢀՃऀ: 300 ໊ (ຬ੮)
Πϕϯτ & ࠵͠ • ϋϯζΦϯ • ύωϧςΟΧογϣϯ • Vue.js ΫϦχοΫ
(Q & A) • ΫϦΤΠςΟϒΥʔϧ • Vue Fes Store (άοζ) • ελϯϓϥϦʔ & λτΡʔ
Ωʔϊʔτ • Vue 2 ͔Β Vue 3 ͷৼΓฦΓͱ Vue ͷࠓޙʹ͍ͭͯ
• Vite ͷࠓޙʹ͍ͭͯ
Ωʔϊʔτ ཁ
Ωʔϊʔτલ • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ • ؒҧ͍͔ΒͷֶͼɺऔΓΜͩ͜ͱͦͯ͠͏·͘
͍ͬͨ͜ͱʹ͍ͭͯͨ͠ ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ
Ωʔϊʔτલ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.4 alpha • computed
property ͷվળ • Reactivity Transform ͷআ • TSͷܕपΓͷվળ • …ͳͲ
Ωʔϊʔτલ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.5 ͷϩʔυϚοϓ • SSR
पΓ (Suspence / Lazy hydration) ͷվળ • Custom Elements (Web Components) ͷվળ • … ͳͲ • Vapor Ϟʔυ • virtual dom ΛΘͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ • 2024 1Q / 2Q ༧ఆ
Ωʔϊʔτޙ • Vite ͷࠓޙʹ͍ͭͯ • Vite ͷ՝Λղܾ͢ΔͨΊʹ Rust Խʹྗ͍ͯ͠ ͘ͱݴٴ
• Rolldown • Rust ʹΑͬͯωΠςΟϒ࣮͞Εͨ Rollup ޓ ͷόϯυϥʔ • Vite ͷ Rust ԽϩʔυϚοϓʹैͬͯஈ֊తʹ ߦ͍ͬͯ͘
Rolldown
Rolldownͱ • Vite ෦Ͱ͍ͬͯΔ Rollup Λ Rust Խͨ͠ͷ • త:
Rollup ͱͳΔ͘ಉ͡ڍಈʹͳΔΑ͏ޓੑΛҡ࣋ ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ • ΰʔϧ: Vite Λ͏Ϣʔβʔʹ࠷খݶͷӨڹͰ Rollup Λ ஔ͖͑Δ
ͳͥ RolldownΛ࡞Δͷ͔
Vite ๊͕͑Δ՝Λղܾ͍ͨ͠ • production Ϗϧυ͕͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ
• development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
Vite ๊͕͑Δ՝Λղܾ͍ͨ͠ • production Ϗϧυ͕͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ
• development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
production Ϗϧυ͕͍ • Rollup JS ࣮Ͱ͍ • ͨͩɺJS γϯάϧεϨουɺΠϕϯτۦಈ
• όϯυϧ CPU ϔϏʔ • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ parse ɺtransformɺmi fi nifyɺsource-mapͱ͍ͬͨ ॲཧ͕ελοΫͯ͠͠·͍͘ͳΔ
development ͱ production ͱͷόϯυϧҰ؏ੑ • development Ͱ esbuild ͕ΘΕΔ •
naitive & ϚϧνεϨουʹΑΓϏϧυ͍ʂ • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ • Plugin API ͕ॊೈͰͳ͍
development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ Rollup Λͬͯόϯυϧ͢Δ •
Plugin API ॊೈ! ͯ͢JavaScript! • ESM/CJS ޓΛվળͰ͖Δ • ͨͩ esbuild ͱൺΔͱ͍
development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ Rollup Λͬͯόϯυϧ͢Δ •
Plugin API ॊೈ! ͯ͢JavaScript! • ESM/CJS ޓΛվળͰ͖Δ • ͨͩ esbuild ͱൺΔͱ͍ ͦΕͧΕͷॴΛར༻͍ͯ͠ΔͨΊɺesbuild͘͠ଞͷ navite bundlerʹϦϓϨʔεͰ͖ͳ͍...
Rolldown ͷ։ൃ
Rolldown ։ൃঢ়گ • status: • εςʔδ1: (Vue Fes 2023
Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4) • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ
Rolldown ϨϙδτϦ • GitHub organization https://github.com/rolldown-rs • ݱࡏ private
repo Ͱ։ൃத • JS / TS parser Rust Oxc • magic-string ͷ Rust ൛ string_wizard public ʹ ఏڙ͞Ε͍ͯΔ https://github.com/rolldown-rs/string_wizard
Rolldown ͷςετ • Rolldown ͷςετɺطଘͷ Rollup ͷ Test fi xtures
& Test ίʔυΛͬͯςετ͍ͯ͠Δ
Demo: Rolldown on Vite • ϒϥβ্Ͱ Rolldown (wasm) Ͱόϯυϧ͢ΔσϞ
ίϥϘ͍ͯ͠Δ RspackνʔϜʹ͍ͭͯ
RspackνʔϜ • Rspack Λ։ൃ͍ͯ͠ΔνʔϜ • Rspack Bytedance ͷ web-infra-dev
ͱ͍͏ϑϩ ϯτΤϯυπʔϧνΣʔϯपΓͷ OSS ͷҰ෦
web-infra-dev
web-infra-dev ͱ • Bytedance͕ࣗࣾͷʹ͚ͯɺϑϩϯτΤϯυ ٕज़͚ʹΦʔϓϯͳٕज़ΤίγεςϜΛߏங͢Δ ͜ͱΛతͱͯ͠׆ಈ͍ͯ͠Δ Web: https://webinfra.org/ GitHub: https://github.com/web-infra-dev
web-infra-dev ৭ʑ OSS ࡞͍ͬͯΔ • Rust Rspack Λϕʔε &
ίΞपΓͷ৭ʑͳ OSS Λఏڙ͍ͯ͠Δ
web-infra-devΦʔϓϯʹใެ։͍ͯ͠Δ • ઃܭಛఆͷٕज़Λௐͨ͜ͱΛΦʔϓϯ͍ͯ͠Δ https://github.com/orgs/web-infra-dev/discussions/9
Rspack
Rspack • WebpackΤίγεςϜͱ૬ޓӡ༻Λఏڙ͢ΔRust ߴόϯυϥʔ https://www.rspack.dev/
Rspack ͕ੜ·Εͨഎܠ • Bytedance͕ࣗͨͪͷϏϧυύϑΥʔϚϯεΛվ ળ͢ΔͨΊʹ࡞ͬͨ • ϞϊϦγοΫͳϓϩδΣΫτͰ20ʙ30͔͔ͬ ͍ͯͨ • 20224݄͔Β։ൃ։࢝ɺ20233݄OSSͱͯ͠ެ
։
Webpack ͷ͍ͬ͠ΐʹվળ • Webpack ͷͰ͋ͬͨ dev αʔόىಈ͍ ωΟςΟϒΛར༻্ཱͯ͠Γ͕͘ͳ͍ͬͯΔ • ϓϩμΫγϣϯϏϧυߴԽ
https://www.rspack.dev/misc/benchmark.html#data
HMR ߴԽ • 10,000 React ίϯϙʔωϯτͷέʔε: https://www.rspack.dev/misc/benchmark.html#data-1
Webpack ͷޓੑ & ૬ޓӡ༻ੑͲͷ͙Β͍͔ • babel-loaderɺless-loaderɺsass-loader ͱ͍ͬͨ Webpack ͰΘΕ͍ͯΔجຊతͳ Loader
αϙʔτ https://www.rspack.dev/guide/loader-compat.html • Webpack ͕ఏڙ͍ͯ͠ΔϓϥάΠϯαϙʔτ https://www.rspack.dev/guide/plugin-compat.html
Rspackͷࠓޙ • ݱ࣌Ͱwebpackͷͯ͢ͷػೳຬ͍ͨͯ͠Δ Θ͚Ͱͳ͍ • ίϛϡχςΟͱͷίϥϘϨʔγϣϯʹΑͬͯϑΟʔ υόοΫΛಘͭͭɺύϨʔτͷ๏ଇʹج͍ͮͯඞཁ ͳΛऔΓೖΕͯఏڙ͍ͯ͘͠ • ϓϥάΠϯػೳΛڧԽ͍ͯ͘͠
• ܧଓతͳύϑΥʔϚϯεͷ্
Oxc
The Oxidation Compiler • JavaScript / TypeScript ͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊ Λ Rust
Ͱ࣮ͨ͠ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ • parser • linter • formatter • transpiler • mini fi er • type checker https://github.com/oxc-project/oxc ࡞ऀ Bytedance ͷ Rspack νʔϜͷਓ
ࢥ • Biome (چ: Rome) Ruff ͱಉ͡ • Biome:
https://biomejs.dev/blog/annoucing-biome Oxc πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ https://oxc-project.github.io/docs/guide/introduction.html
Biome ͱͷҧ͍ • Biome • JS / TS ͚ͩͰͳ͘ Web
։ൃʹؔ͢Δݴޠશൠ͚ ͷπʔϧνΣΠϯ • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛఆ • Oxc • JS / TS ͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε • πʔϧΛ֦ுͰ͖Δ͜ͱΛఆ https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc
Parser & Lint ύϑΥʔϚϯε
Oxc crate Λఏڙ͍ͯ͠Δ • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ ͰπʔϧνΣʔϯΛ࡞Δ͜ͱͰ͖Δ •
oxc_ast: estree like ͳ AST ͚ͷϥΠϒϥϦ • oxc_parser: JS / TS parser ϥΠϒϥϦ • And etc …
Oxc Playground Λࢼ͢͜ͱ͕Ͱ͖Δ https://oxc-project.github.io/oxc/playground
Oxc ͷݱঢ় https://github.com/oxc-project/oxc/issues/481 • ݱঢ় Linter ʹϑΥʔΧε͠ ͍ͯΔ༷ • LintͷϧʔϧɺΑ͘ΘΕ
͍ͯΔ ESLint / typescript- eslint ͷ recommended ϧʔ ϧΛఏڙ͢Δ༧ఆ • ϓϥάΠϯΞʔΩςΫνϟ ɺGraphQL αϒηοτʹ ͍ۙ Trustfall Λ࠾༻͢Δ༧ ఆ
VSCode ͷ֦ு͕ఏڙ͞Ε͍ͯΔ • ͍ͭ࠷ۙ VSCode ֦ுΛఏڙ࢝͠Ίͨ https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode
ଞͷπʔϧঢ়گ • Mini fi er • WIP: ϓϩτλΠϐϯάத • Transpiler
• WIP: https://github.com/web-infra-dev/oxc/issues/974 • Formatter • Ϧιʔε͕Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ • Type Checker • Ezno Λ͍ͬͯΔ͕·ͩ experimental
Oxc ͷࠓޙ • શମͷϩʔυϚοϓ͕ͳ͍ͨΊݸਓతݟղ • ίϛϡχςΟΛר͖ࠐΜͰπʔϧνΣΠϯΛ࣮ ͯ͠ఏڙ͍ͯ͘͠ͱࢥΘΕΔ • Boshen ࢯ
Twitter (ݱ: X)ɺGitHub ͱ͍ͬͨ SNS ΛΑͬͯ͘ίϛϡχέʔγϣϯ͠ͳ͕Βר ͖ࠐΜͰ͍Δ
JS πʔϧνΣΠϯΛ࡞Γ͍ͨਓ͚ʹΨΠυ͕͋Δ https://oxc-project.github.io/javascript-parser-in-rust/
πʔϧνΣΠϯͷಈ
• Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ͑ • Parser • Bundler • Formatter •
Linter • Loader • … and etc ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ
طଘπʔϧνΣΠϯͷωΠςΟϒԽͷࢼΈ • ESLint ݕূͯ͠Έͨ݁Ռɺ͔༷ͬͨ͠… https://twitter.com/slicknet/status/1729157481207824702 AST ͷ(σ)γϦΞϥΠζͷίετ͕ωΠςΟϒԽͯ͠ ϖΠ͠ͳ͍
ͪͳΈʹ Rollup v4 Ͱۤઓ͍ͯ͠Δ • JS parser Acorn ͔Β
SWC ʹஔ͕͑ͨɺॳظ ࣮Ͱ͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ https://github.com/rollup/rollup/issues/5182
Rollup v4 ࠷৽൛ͰύϑΥʔϚϯεվળ͍ͯ͠Δ • ϝϞϦΞϩέʔλʔͷ࠷దԽ https://github.com/rollup/rollup/pull/5201 • parse ॲཧͷඇಉظ
& ฒྻԽ https://github.com/rollup/rollup/pull/5202 • parse ΞϧΰϦζϜͷॲཧύεͷ࠷దԽ https://github.com/rollup/rollup/pull/5207 PR#5207 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ
πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτʁ • JavaScript ͚ͷπʔϧνΣΠϯίʔυղੳͱ AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ • JavaScript
ʙ ωΟςΟϒؒͰΓͱΓ͢ΔAST ͷ (σ)γϦΞϥΠζΦʔόϔουΛԿʹ͑ͯϚϧ νίΞԽͰ͖Δ͔ https://zenn.dev/hd_nvim/articles/09483b0155ebb6 Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ
৽͍͠πʔϧνΣΠϯͷҠߦՃ͢Δʁ • ৽نϓϩδΣΫτɺطଘπʔϧνΣΠϯʹ͕͠Β Έ͕ͳ͍ͷͰ࠾༻͍ͯ͘͠ྲྀΕى͖ͦ͏ • தখنͷϓϩδΣΫτͷέʔεɺ৽͍͠πʔϧ νΣΠϯͷ DX ʹΑͬͯɺҠߦίετ͕ϖΠͰ͖Δ ͳΒɺஔ͑ͷྲྀΕى͖ͦ͏
৽͍͠πʔϧνΣΠϯͷҠߦՃ͢Δʁ • େنϓϩδΣΫτͷ߹ɺ৽͍͠πʔϧνΣΠϯ ͷҠߦ͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱͳ͍ • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜϓϥ άΠϯʹΑͬͯΓཱ͍ͬͯΔͷ͕ଟ͍ • ಛʹ
ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ ϯ JavaScript Ͱ࣮͞Ε͍ͯΔ • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ νΣΠϯͱޓੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ ࢥ͏
ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖Ͱ͖ͯͨ • tapjs/tsimp Node.js Ͱ TS ͷίʔυΛܕνΣοΫ͠ͳ͕Βίϯ ύΠϧͰ͖Δ loader
https://github.com/tapjs/tsimp
ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖Ͱ͖ͯͨ • Prettier CLI ଆͷϑΝΠϧݕࡧ parse ͷվળɺΩϟογϡ ͳͲʹΑΔಓͳվળ https://prettier.io/blog/2023/11/30/cli-deep-dive
Vue.js ͱ Rust
Vue ʹ Rust Խͷͬͯ͘Δʁ • ݸਓతݟղ: ͬͯ͘Δͱࢥ͍·͢ https://github.com/vuejs/rfcs/discussions/369#discussioncomment-1192421 ͳͥͳΒɺ GitHub
Discussions ͦͯ͠ Vue Fes Japan Ͱ Rust Խʹ͍ͭͯݴٴͨ͠
Vue ͷ Rust ԽͲ͜ʹདྷΔͷ͔ • Vue JavaScript ϑϨʔϜϫʔΫ •
UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦ҎԼͷ෦ • Vue Compiler • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦
࣮ Rust Vue Compiler ͕͋Δʂ • Vue ίϛϡχςΟͷਓ͕ ࡞͍ͬͯΔ
• ࡞ͬͨਓ Vue ίΞ νʔϜͰҎલ Vue ͷ TS पΓΛ͔ͳΓ Contribute ͍ͯͨ͠ Herrington Darkholme ࢯ • ࠓޙϕʔεʹͳΔՄೳੑ ͋Δ͔ https://github.com/HerringtonDarkholme/vue-compiler
·ͱΊ
·ͱΊ (1/4) • Rolldown ͷঢ়گʹ͍ͭͯͨ͠ • ݱঢ়ελʔτ͔ͨ͠ΓͰ·ͩ stage 1 •
Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ ͍ͯͨ͠ • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ • Rspack Rust Ͱ Webpack ͷޓੑ & ૬ޓӡ༻ੑΛߟྀ͠ ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮ Λ࣋ͪͭͭ͋Δ
·ͱΊ (2/4) • Rolldown Ͱ͏ JS Parser ͷ Oxc ʹ͍ͭͯͨ͠
• Oxc JS / TS ͚ʹ Rust ͰϋΠύϑΥʔϚϯε ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ • Oxc ֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘ crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ
·ͱΊ (3/4) • πʔϧνΣΠϯͷಈʹ͍ͭͯݟղΛͨ͠ • JavaScript πʔϧք۾ͰωΟςΟϒԽ͕τϨϯυʹͳ͍ͬͯΔ • ͨͩɺطଘπʔϧνΣΠϯͷωΟςΟϒԽ͍͠ •
ίϛϡχςΟ͕৽͍͠πʔϧνΣΠϯҠߦ͢Δʹɺطଘπʔϧ νΣΠϯ͕ޓੑ & ૬ޓӡ༻ੑΛαϙʔτͭͭ͠ɺԿʹύϑΥʔ ϚϯεΛվળͰ͖Δ͔͕ϙΠϯτ • ωΟςΟϒԽʹର͢Δ JavaScript ίϛϡχςΟͷΞϯνςʔθͳಈ ͖͋Δ • πʔϧνΣΠϯࠓޙͦͷΑ͏ͳಈ͖ͷதɺք۾ͰܹΛ͏͚ͳ ͕Βզʑʹఏڙ͞Ε͍ͯ͘ͱ༧͞ΕΔ
·ͱΊ (4/4) • Vue ͷ Rust Խ ʹ͍ͭͯͨ͠ • Vite
ͷ Rolldown Ͱ Evan ࢯ Rust Խʹ͚ͯε λʔτ͍ͯ͠Δ • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler ͕͋Δ • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷڹ͕ Vue ΤίγεςϜʹͬͯ͘ΔͱظͰ͖Δ
࠷ޙʹ • Vue Fes Japan 2024 ։࠵͠·͢ʂ • Vue Fes
ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํɺ࠙ձ͔͚͍ͯͩ͘͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤