Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue & Vite Rustify

kazupon
December 04, 2023

Vue & Vite Rustify

kazupon

December 04, 2023
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue & Vite


    Rustify
    Vue Fes Japan 2023 After Meetup


    2023-11-07


    (ϝυϐΞגࣜձࣾ x MNTSQגࣜձࣾ x גࣜձࣾ hacomono)


    2023-12-03


    (FukuokaJS x LINEϠϑʔίϛϡχέʔγϣϯζגࣜձࣾ)


    @kazupon

    View full-size slide

  2. 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

    View full-size slide

  3. ࠓ೔࿩͢͜ͱ

    View full-size slide

  4. ΞδΣϯμ
    • Vue Fes Japan 2023 ͷৼΓฦΓ


    • Rolldown


    • ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS


    • Oxc


    • πʔϧνΣΠϯͷಈ޲


    • Vue ʹ Rust ͷ೾͸΍ͬͯ͘Δʁ

    View full-size slide

  5. Vue Fes Japan 2023

    View full-size slide

  6. • 2023/10/28 ͍ͭʹ5೥ͿΓͷΦϑϥΠϯ։࠵ʂ
    Vue Fes Japan 2023

    View full-size slide

  7. ΞϑλʔϜʔϏʔ
    • ΞϑλʔϜʔϏʔ͕Ͱ͖ͨͷͰྲྀ͠·͢
    https://www.youtube.com/watch?v=rWIal-epFXQ

    View full-size slide

  8. State of Vue Fes Japan 2023
    • શࢀՃऀ਺: 583 ໊


    • ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ)


    • εϙϯαʔ਺: 46


    • ݸਓεϙϯαʔ਺: 44 ໊


    • ΞϑλʔύʔςΟʔࢀՃऀ਺: 300 ໊ (ຬ੮)

    View full-size slide

  9. Πϕϯτ & ࠵͠෺
    • ϋϯζΦϯ


    • ύωϧςΟΧογϣϯ


    • Vue.js ΫϦχοΫ (Q & A)


    • ΫϦΤΠςΟϒ΢Υʔϧ


    • Vue Fes Store (άοζ)


    • ελϯϓϥϦʔ & λτΡʔ

    View full-size slide

  10. Ωʔϊʔτ
    • Vue 2 ͔Β Vue 3 ͷৼΓฦΓͱ Vue ͷࠓޙʹ͍ͭͯ


    • Vite ͷࠓޙʹ͍ͭͯ

    View full-size slide

  11. Ωʔϊʔτ


    ཁ໿

    View full-size slide

  12. Ωʔϊʔτલ൒
    • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ


    • ؒҧ͍͔ΒͷֶͼɺऔΓ૊Μͩ͜ͱͦͯ͠͏·͘
    ͍ͬͨ͜ͱʹ͍ͭͯ࿩ͨ͠
    ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ

    View full-size slide

  13. Ωʔϊʔτલ൒
    • Vue ͷࠓޙʹ͍ͭͯ


    • Vue 3.4 alpha


    • computed property ͷվળ


    • Reactivity Transform ͷ࡟আ


    • TSͷܕपΓͷվળ


    • …ͳͲ

    View full-size slide

  14. Ωʔϊʔτલ൒
    • Vue ͷࠓޙʹ͍ͭͯ


    • Vue 3.5 ͷϩʔυϚοϓ


    • SSR पΓ (Suspence / Lazy hydration) ͷվળ


    • Custom Elements (Web Components) ͷվળ


    • … ͳͲ


    • Vapor Ϟʔυ


    • virtual dom Λ࢖Θͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ


    • 2024೥ 1Q / 2Q ༧ఆ

    View full-size slide

  15. Ωʔϊʔτޙ൒
    • Vite ͷࠓޙʹ͍ͭͯ


    • Vite ͷ՝୊Λղܾ͢ΔͨΊʹ Rust Խʹ஫ྗ͍ͯ͠
    ͘ͱݴٴ


    • Rolldown


    • Rust ʹΑͬͯωΠςΟϒ࣮૷͞Εͨ Rollup ޓ׵
    ͷόϯυϥʔ


    • Vite ͷ Rust Խ΋ϩʔυϚοϓʹैͬͯஈ֊తʹ
    ߦ͍ͬͯ͘

    View full-size slide

  16. Rolldownͱ͸
    • Vite ಺෦Ͱ࢖͍ͬͯΔ Rollup Λ Rust Խͨ͠΋ͷ


    • ໨త:

    Rollup ͱͳΔ΂͘ಉ͡ڍಈʹͳΔΑ͏ޓ׵ੑΛҡ࣋
    ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ


    • ΰʔϧ:

    Vite Λ࢖͏Ϣʔβʔʹ͸࠷খݶͷӨڹͰ Rollup Λ
    ஔ͖׵͑Δ

    View full-size slide

  17. ͳͥ


    RolldownΛ࡞Δͷ͔

    View full-size slide

  18. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠
    • production Ϗϧυ͕஗͍


    • development ͱ production ͱͷόϯυϧͷҰ؏ੑ


    • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ
    όʔϔου


    • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ


    • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍

    View full-size slide

  19. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠
    • production Ϗϧυ͕஗͍


    • development ͱ production ͱͷόϯυϧͷҰ؏ੑ


    • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ
    όʔϔου


    • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ


    • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍

    View full-size slide

  20. production Ϗϧυ͕஗͍
    • Rollup ͸ JS ࣮૷Ͱ΋଎͍


    • ͨͩɺJS ͸γϯάϧεϨουɺΠϕϯτۦಈ


    • όϯυϧ͸ CPU ϔϏʔ


    • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ
    parse ɺtransformɺmi
    fi
    nifyɺsource-mapͱ͍ͬͨ
    ॲཧ͕ελοΫͯ͠͠·͍஗͘ͳΔ

    View full-size slide

  21. development ͱ production ͱͷόϯυϧҰ؏ੑ


    • development Ͱ͸ esbuild ͕࢖ΘΕΔ


    • naitive & ϚϧνεϨουʹΑΓϏϧυ͸଎͍ʂ


    • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ


    • Plugin API ͕ॊೈͰ͸ͳ͍

    View full-size slide

  22. development ͱ production ͱͷόϯυϧҰ؏ੑ


    • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ


    • Plugin API ͸ॊೈ! ͢΂ͯJavaScript!


    • ESM/CJS ޓ׵ΛվળͰ͖Δ


    • ͨͩ esbuild ͱൺ΂Δͱ஗͍

    View full-size slide

  23. development ͱ production ͱͷόϯυϧҰ؏ੑ


    • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ


    • Plugin API ͸ॊೈ! ͢΂ͯJavaScript!


    • ESM/CJS ޓ׵ΛվળͰ͖Δ


    • ͨͩ esbuild ͱൺ΂Δͱ஗͍
    ͦΕͧΕͷ௕ॴΛར༻͍ͯ͠ΔͨΊɺesbuild΋͘͠͸ଞͷ
    navite bundlerʹϦϓϨʔεͰ͖ͳ͍...

    View full-size slide

  24. Rolldown ͷ։ൃ

    View full-size slide

  25. Rolldown ։ൃঢ়گ
    • status:


    • εςʔδ1:

    (Vue Fes 2023 Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4)





    • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ
    ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ

    View full-size slide

  26. 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

    View full-size slide

  27. Rolldown ͷςετ
    • Rolldown ͷςετ͸ɺطଘͷ Rollup ͷ Test
    fi
    xtures & Test ίʔυΛ࢖ͬͯςετ͍ͯ͠Δ

    View full-size slide

  28. Demo: Rolldown on Vite
    • ϒϥ΢β্Ͱ Rolldown (wasm) Ͱόϯυϧ͢ΔσϞ

    View full-size slide

  29. ίϥϘ͍ͯ͠Δ


    RspackνʔϜʹ͍ͭͯ

    View full-size slide

  30. RspackνʔϜ
    • Rspack Λ։ൃ͍ͯ͠ΔνʔϜ


    • Rspack ͸ Bytedance ͷ web-infra-dev ͱ͍͏ϑϩ
    ϯτΤϯυπʔϧνΣʔϯपΓͷ OSS ͷҰ෦

    View full-size slide

  31. web-infra-dev

    View full-size slide

  32. web-infra-dev ͱ͸
    • Bytedance͕ࣗࣾͷ੒௕ʹ޲͚ͯɺϑϩϯτΤϯυ
    ٕज़޲͚ʹΦʔϓϯͳٕज़ΤίγεςϜΛߏங͢Δ
    ͜ͱΛ໨తͱͯ͠׆ಈ͍ͯ͠Δ
    Web: https://webinfra.org/
    GitHub: https://github.com/web-infra-dev

    View full-size slide

  33. web-infra-dev ͸৭ʑ OSS ࡞͍ͬͯΔ
    • Rust ੡ Rspack Λϕʔε & ίΞपΓͷ৭ʑͳ OSS
    Λఏڙ͍ͯ͠Δ

    View full-size slide

  34. web-infra-dev͸Φʔϓϯʹ৘ใެ։͍ͯ͠Δ
    • ઃܭ΍ಛఆͷٕज़Λௐ΂ͨ͜ͱΛΦʔϓϯ͍ͯ͠Δ
    https://github.com/orgs/web-infra-dev/discussions/9

    View full-size slide

  35. Rspack
    • WebpackΤίγεςϜͱ૬ޓӡ༻Λఏڙ͢ΔRust੡
    ߴ଎όϯυϥʔ
    https://www.rspack.dev/

    View full-size slide

  36. Rspack ͕ੜ·Εͨഎܠ
    • Bytedance͕ࣗ෼ͨͪͷϏϧυύϑΥʔϚϯεΛվ
    ળ͢ΔͨΊʹ࡞ͬͨ


    • ϞϊϦγοΫͳϓϩδΣΫτͰ20෼ʙ30෼͔͔ͬ
    ͍ͯͨ


    • 2022೥4݄͔Β։ൃ։࢝ɺ2023೥3݄OSSͱͯ͠ެ
    ։

    View full-size slide

  37. Webpack ͷ໰୊఺΋͍ͬ͠ΐʹվળ
    • Webpack ͷ໰୊Ͱ͋ͬͨ dev αʔόىಈ஗͍໰୊
    ͸ωΟςΟϒΛར༻্ཱͯ͠Γ͕଎͘ͳ͍ͬͯΔ


    • ϓϩμΫγϣϯϏϧυ΋ߴ଎Խ
    https://www.rspack.dev/misc/benchmark.html#data

    View full-size slide

  38. HMR ΋ߴ଎Խ
    • 10,000 React ίϯϙʔωϯτͷέʔε:
    https://www.rspack.dev/misc/benchmark.html#data-1

    View full-size slide

  39. 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

    View full-size slide

  40. Rspackͷࠓޙ
    • ݱ࣌఺Ͱ͸webpackͷ͢΂ͯͷػೳ͸ຬ͍ͨͯ͠Δ
    Θ͚Ͱ͸ͳ͍


    • ίϛϡχςΟͱͷίϥϘϨʔγϣϯʹΑͬͯϑΟʔ
    υόοΫΛಘͭͭɺύϨʔτͷ๏ଇʹج͍ͮͯඞཁ
    ͳ෺ΛऔΓೖΕͯఏڙ͍ͯ͘͠


    • ϓϥάΠϯػೳΛڧԽ͍ͯ͘͠


    • ܧଓతͳύϑΥʔϚϯεͷ޲্

    View full-size slide

  41. The Oxidation Compiler
    • JavaScript / TypeScript ޲͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊
    Λ Rust Ͱ࣮૷ͨ͠΋ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ


    • parser


    • linter


    • formatter


    • transpiler


    • mini
    fi
    er


    • type checker
    https://github.com/oxc-project/oxc
    ࡞ऀ͸ Bytedance ͷ


    Rspack νʔϜͷਓ

    View full-size slide

  42. ࢥ૝
    • Biome (چ: Rome) ΍ Ruff ͱಉ͡


    • Biome: https://biomejs.dev/blog/annoucing-biome
    Oxc ΋πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ
    https://oxc-project.github.io/docs/guide/introduction.html

    View full-size slide

  43. Biome ͱͷҧ͍
    • Biome


    • JS / TS ͚ͩͰͳ͘ Web ։ൃʹؔ͢Δݴޠશൠ޲͚
    ͷπʔϧνΣΠϯ


    • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛ૝ఆ


    • Oxc


    • JS / TS ޲͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε


    • πʔϧΛ֦ுͰ͖Δ͜ͱΛ૝ఆ
    https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc

    View full-size slide

  44. Parser & Lint ύϑΥʔϚϯε

    View full-size slide

  45. Oxc ͸ crate Λఏڙ͍ͯ͠Δ
    • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ෼
    ͰπʔϧνΣʔϯΛ࡞Δ͜ͱ΋Ͱ͖Δ


    • oxc_ast:

    estree like ͳ AST ޲͚ͷϥΠϒϥϦ


    • oxc_parser:

    JS / TS parser ϥΠϒϥϦ


    • And etc …

    View full-size slide

  46. Oxc Playground Λࢼ͢͜ͱ͕Ͱ͖Δ
    https://oxc-project.github.io/oxc/playground

    View full-size slide

  47. Oxc ͷݱঢ়
    https://github.com/oxc-project/oxc/issues/481
    • ݱঢ় Linter ʹϑΥʔΧε͠
    ͍ͯΔ໛༷


    • Lintͷϧʔϧ͸ɺΑ͘࢖ΘΕ
    ͍ͯΔ ESLint / typescript-
    eslint ͷ recommended ϧʔ
    ϧΛఏڙ͢Δ༧ఆ


    • ϓϥάΠϯΞʔΩςΫνϟ
    ͸ɺGraphQL αϒηοτʹ
    ͍ۙ Trustfall Λ࠾༻͢Δ༧

    View full-size slide

  48. VSCode ͷ֦ு͕ఏڙ͞Ε͍ͯΔ
    • ͍ͭ࠷ۙ VSCode ֦ுΛఏڙ࢝͠Ίͨ
    https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode

    View full-size slide

  49. ଞͷπʔϧঢ়گ
    • Mini
    fi
    er


    • WIP: ϓϩτλΠϐϯάத


    • Transpiler


    • WIP: https://github.com/web-infra-dev/oxc/issues/974


    • Formatter


    • Ϧιʔε͕଍Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ


    • Type Checker


    • Ezno Λ࢖͍ͬͯΔ͕·ͩ experimental

    View full-size slide

  50. Oxc ͷࠓޙ
    • શମͷϩʔυϚοϓ͕ͳ͍ͨΊݸਓతݟղ


    • ίϛϡχςΟΛר͖ࠐΜͰπʔϧνΣΠϯΛ࣮૷
    ͯ͠ఏڙ͍ͯ͘͠ͱࢥΘΕΔ


    • Boshen ࢯ͸ Twitter (ݱ: X)ɺGitHub ͱ͍ͬͨ
    SNS ΛΑ͘࢖ͬͯίϛϡχέʔγϣϯ͠ͳ͕Βר
    ͖ࠐΜͰ͍Δ

    View full-size slide

  51. JS πʔϧνΣΠϯΛ࡞Γ͍ͨਓ޲͚ʹΨΠυ͕͋Δ
    https://oxc-project.github.io/javascript-parser-in-rust/

    View full-size slide

  52. πʔϧνΣΠϯͷಈ޲

    View full-size slide

  53. • Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ׵͑


    • Parser


    • Bundler


    • Formatter


    • Linter


    • Loader


    • … and etc
    ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ

    View full-size slide

  54. طଘπʔϧνΣΠϯͷωΠςΟϒԽͷࢼΈ
    • ESLint ͸ݕূͯ͠Έͨ݁Ռɺ೉͔ͬͨ͠໛༷…
    https://twitter.com/slicknet/status/1729157481207824702
    AST ͷ(σ)γϦΞϥΠζͷίετ͕ωΠςΟϒԽͯ͠΋
    ϖΠ͠ͳ͍

    View full-size slide

  55. ͪͳΈʹ Rollup v4 Ͱ΋ۤઓ͍ͯ͠Δ
    • JS parser ͸ Acorn ͔Β SWC ʹஔ׵͕͑ͨɺॳظ
    ࣮૷Ͱ͸͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ
    https://github.com/rollup/rollup/issues/5182

    View full-size slide

  56. 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 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ

    View full-size slide

  57. πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτ͸ʁ
    • JavaScript ޲͚ͷπʔϧνΣΠϯ͸ίʔυղੳͱ
    AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ


    • JavaScript ʙ ωΟςΟϒؒͰ΍ΓͱΓ͢ΔAST ͷ
    (σ)γϦΞϥΠζΦʔόϔουΛ೗Կʹ཈͑ͯϚϧ
    νίΞԽͰ͖Δ͔
    https://zenn.dev/hd_nvim/articles/09483b0155ebb6
    Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ

    View full-size slide

  58. ৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ
    • ৽نϓϩδΣΫτ͸ɺطଘπʔϧνΣΠϯʹ͕͠Β
    Έ͕ͳ͍ͷͰ࠾༻͍ͯ͘͠ྲྀΕ͸ى͖ͦ͏


    • தখن໛ͷϓϩδΣΫτͷέʔε͸ɺ৽͍͠πʔϧ
    νΣΠϯͷ DX ʹΑͬͯɺҠߦίετ͕ϖΠͰ͖Δ
    ͳΒɺஔ׵͑ͷྲྀΕ͸ى͖ͦ͏

    View full-size slide

  59. ৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ
    • େن໛ϓϩδΣΫτͷ৔߹͸ɺ৽͍͠πʔϧνΣΠϯ
    ΁ͷҠߦ͸͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱ͸ͳ͍


    • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜ͸ϓϥ
    άΠϯʹΑͬͯ੒Γཱ͍ͬͯΔͷ͕ଟ͍


    • ಛʹ ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ
    ϯ͸ JavaScript Ͱ࣮૷͞Ε͍ͯΔ


    • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ
    νΣΠϯͱޓ׵ੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ
    ࢥ͏

    View full-size slide

  60. ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ
    • tapjs/tsimp

    Node.js Ͱ TS ͷίʔυΛܕνΣοΫ͠ͳ͕Βίϯ
    ύΠϧͰ͖Δ loader
    https://github.com/tapjs/tsimp

    View full-size slide

  61. ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ
    • Prettier

    CLI ଆͷϑΝΠϧݕࡧ΍ parse ͷվળɺΩϟογϡ
    ͳͲʹΑΔ஍ಓͳվળ
    https://prettier.io/blog/2023/11/30/cli-deep-dive

    View full-size slide

  62. Vue.js ͱ Rust

    View full-size slide

  63. Vue ʹ Rust Խͷ೾͸΍ͬͯ͘Δʁ
    • ݸਓతݟղ: ΍ͬͯ͘Δͱࢥ͍·͢
    https://github.com/vuejs/rfcs/discussions/369#discussioncomment-1192421
    ͳͥͳΒɺ


    GitHub Discussions ͦͯ͠


    Vue Fes Japan Ͱ΋ Rust Խʹ͍ͭͯ΋ݴٴͨ͠

    View full-size slide

  64. Vue ͷ Rust Խ͸Ͳ͜ʹདྷΔͷ͔
    • Vue ͸ JavaScript ϑϨʔϜϫʔΫ


    • UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ
    ϨʔϜϫʔΫ


    • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦෼͸ҎԼͷ෦෼


    • Vue Compiler


    • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦෼

    View full-size slide

  65. ࣮͸ Rust ੡ Vue Compiler ͕͋Δʂ
    • Vue ίϛϡχςΟͷਓ͕
    ࡞͍ͬͯΔ


    • ࡞ͬͨਓ͸ Vue ίΞ
    νʔϜͰҎલ Vue ͷ TS
    पΓΛ͔ͳΓ
    Contribute ͍ͯͨ͠

    Herrington Darkholme ࢯ


    • ࠓޙϕʔεʹͳΔՄೳੑ
    ͸͋Δ͔΋
    https://github.com/HerringtonDarkholme/vue-compiler

    View full-size slide

  66. ·ͱΊ (1/4)
    • Rolldown ͷঢ়گʹ͍ͭͯ࿩ͨ͠


    • ݱঢ়ελʔτͨ͠͹͔ΓͰ·ͩ stage 1


    • Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ
    ͍ͯ࿩ͨ͠


    • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ


    • Rspack ͸ Rust Ͱ Webpack ͷޓ׵ੑ & ૬ޓӡ༻ੑΛߟྀ͠
    ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ


    • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮
    ੷Λ࣋ͪͭͭ͋Δ

    View full-size slide

  67. ·ͱΊ (2/4)
    • Rolldown Ͱ࢖͏ JS Parser ͷ Oxc ʹ͍ͭͯ࿩ͨ͠


    • Oxc ͸ JS / TS ޲͚ʹ Rust ͰϋΠύϑΥʔϚϯε
    ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ


    • Oxc ͸֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘
    crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ


    • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ
    Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ଴

    View full-size slide

  68. ·ͱΊ (3/4)
    • πʔϧνΣΠϯͷಈ޲ʹ͍ͭͯݟղΛ࿩ͨ͠


    • JavaScript πʔϧք۾Ͱ͸ωΟςΟϒԽ͕τϨϯυʹͳ͍ͬͯΔ


    • ͨͩɺطଘπʔϧνΣΠϯͷωΟςΟϒԽ͸೉͍͠


    • ίϛϡχςΟ͕৽͍͠πʔϧνΣΠϯ΁Ҡߦ͢Δʹ͸ɺطଘπʔϧ
    νΣΠϯ͕ޓ׵ੑ & ૬ޓӡ༻ੑΛαϙʔτͭͭ͠ɺ೗ԿʹύϑΥʔ
    ϚϯεΛվળͰ͖Δ͔͕ϙΠϯτ


    • ωΟςΟϒԽʹର͢Δ JavaScript ίϛϡχςΟͷΞϯνςʔθͳಈ
    ͖΋͋Δ


    • πʔϧνΣΠϯ͸ࠓޙ͸ͦͷΑ͏ͳಈ͖ͷதɺք۾ͰܹࢗΛ͏͚ͳ
    ͕Βզʑʹఏڙ͞Ε͍ͯ͘ͱ༧૝͞ΕΔ

    View full-size slide

  69. ·ͱΊ (4/4)
    • Vue ͷ Rust Խ ʹ͍ͭͯ࿩ͨ͠


    • Vite ͷ Rolldown Ͱ Evan ࢯ΋ Rust Խʹ޲͚ͯε
    λʔτ͍ͯ͠Δ


    • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler
    ͕͋Δ


    • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷ൓ڹ͕ Vue
    ΍ΤίγεςϜʹ΋΍ͬͯ͘Δͱظ଴Ͱ͖Δ

    View full-size slide

  70. ࠷ޙʹ
    • Vue Fes Japan 2024 ։࠵͠·͢ʂ


    • Vue Fes ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ΋
    ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ


    • ڵຯ͕͋Δํ͸ɺ࠙਌ձ੠͔͚͍ͯͩ͘͞ʂ

    View full-size slide

  71. ͝ਗ਼ௌ


    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ



    View full-size slide