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
Vapor Revolution
kazupon
2
2.7k
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
1k
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
560
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
130
バグを見つけた?それAppleに直してもらおう!
uetyo
0
180
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
340
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
460
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
390
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
450
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
260
Featured
See All Featured
Bash Introduction
62gerente
608
210k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Visualization
eitanlees
146
15k
How to Ace a Technical Interview
jacobian
276
23k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Statistics for Hackers
jakevdp
796
220k
A designer walks into a library…
pauljervisheath
204
24k
Gamification - CAS2011
davidbonilla
80
5.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Facilitating Awesome Meetings
lara
50
6.1k
Six Lessons from altMBA
skipperchong
27
3.5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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
ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํɺ࠙ձ͔͚͍ͯͩ͘͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤