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.4k
Vue 3.4
kazupon
13
4.5k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
まちにまった 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
Synchronizationを支える技術
s_shimotori
1
150
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Server Driven Compose With Firebase
skydoves
0
400
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
510
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
CSC509 Lecture 09
javiergs
PRO
0
100
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
130
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Navigating Team Friction
lara
183
14k
Building an army of robots
kneath
302
42k
Why Our Code Smells
bkeepers
PRO
334
57k
Statistics for Hackers
jakevdp
796
220k
The Cult of Friendly URLs
andyhume
78
6k
Automating Front-end Workflow
addyosmani
1365
200k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Side Projects
sachag
452
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
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
ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํɺ࠙ձ͔͚͍ͯͩ͘͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤