giftee Tech Blog

ギフティの開発を支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信しています。

Vue Fes Japan 2023 Evan You キーノート速報レポ

こんにちは、エンジニアの egurinko です。今年は Vue Fes Japan 2023 がオフラインで 5 年振りの開催となりました。そこで行われた Evan You の Keynote の速報レポです。速報レポですので、温かい目で見ていただけると幸いです。

Vue & Vite Update

まずは、この 2~3 年の Vue の動向の共有から始まりました。

Vue v2 から Vue v3 への移行

Vue は 2020 年 9 月に v3 をリリースされましたが、その migration が場合によっては難しいことが多かったそうです。そこからいくつかの失敗と学び、さらにうまく行ったことを紹介していました。

失敗と学び

1 つ目の失敗は、「1度のリリースで breaking change を入れた」ということでした。この経験から、breaking change がある場合は、deprecate => opt-in => remove の cycle にした方が良いとのことでした。

2 つ目の失敗は、「エコシステムへのインパクトを過小評価していた」ことだそうです。コミュニティのライブラリ群が Vue の内部 API を利用しているものがあったため、簡単には Vue 3 への migration ができない状態が発生したそうです。そこで、エコシステム向けの ecosystem-ci を用意したそうです。

3 つ目の失敗は、「全てを1度にリリースしてしまった」ことだそうです。

うまく行ったこと

また、うまく行ったこともその後話されていました。

1 つ目のうまく行ったことは、「TypeScript を適用したこと」だそうです。これにより、Vue 自体のメンテナビリティが苦情したり、将来の iteration が容易になったそうです。

2 つ目は、「Composition API を用意したこと」だそうです。Vue 2 の Options API に欠けていた再利用性や、リファクタリングのしやすさが Composition API により改善され、より大規模なスケールしやすいアプリケーションが作成可能になったそうです。また、再利用性が高まったことで VueUse のようなライブラリも生まれました。

3 つ目は、「DX に投資したこと」だそうです。今では Vue 以外の用途でも利用されている Vite から始まり、ドキュメントを書き直したり、Volar による IDE の体験向上があるそうです。

最後に、「Vue3 は確かにより良いし、成長している」とのことです。確かに migration は予想より時間がかかってしまったが、より良い方向に進んでいるそうです。

Vue の今後のリリースは、以下のような点を重視していくそうです。

  • 安定性がキーである
  • Vue 2 => Vue 3 のような破壊的な変更でない
  • Reactivity や Parser の Optimization を重視していく

Vue のこれからの話

Vue 3.4 alpha

  • こちら の PR により、Reactivity に大きな改善があったそうです
    • より正確で、より効率的
    • スケジューリングや array mutation、memory 管理の面でパフォーマンス向上
  • Reactivity Transform の deprecated などもあるそうです

Vapor Mode

Vue の新しい compile mode である Vapor Mode ですが、こちらについてはまだ実験段階で、2024 1Q, 2Q くらいにリリースする目安だそうです。

Vite のこれから

Vite は Mission は「ウェブのエコシステムにおけるより高いイノベーションの shared foundation となること」だそうです。

Vite の課題

しかし、現在の Vite は以下のような課題が挙げられるそうです。

  • Rollup に依存しているので、Production Build が遅い
  • dev/prod でバンドラーが違うので不整合がある
  • 開発時に、bundle されてない ESM の network overhead がある
  • SSR に問題があった
  • chunk split の制御に制限がある
  • 1st party Module Federation が不足している

それらの課題のほとんどは bundler レイヤーで解決できるそうです。現在開発環境で利用している esbuild は、パフォーマンスこそ良いものの production build に耐えうる柔軟性はなく、反対に production build で利用している Rollup は柔軟性はあるもののパフォーマンスに難がある状態です。

Rolldown の開発

そこで現在は、Rollup を Rust で書き換えた Rolldown というものを作成中だそうです。Rolldown のフォーカスはパフォーマンスであり、なるべく Rollup への Compatibility は保つそうです。また、Rolldown のゴールは Vite から Rolldown へ Switch するときのユーザ影響を少なくすることにあるそうです。

Rolldown はまだ early WIP の状態ですが、よりバンドラーの開発経験が豊富な Rspack チームとコラボしているそうです。また、OXC という Rust で書かれた最速の JS parser を採用しているそうです。

Rolldown の開発は以下のように進んでいくそうです。

  • Stage 1: 基本的なバンドリングの機能をサポート
  • Stage 2: 高度なバンドリングのサポート。ここで Rollup の機能を置き換えるそうです
  • Stage 3: Built-in の Transform。ここで、TS/JSX/Minification/Syntax lowering をサポートするそうです
  • Stage 4: Vite を Rustify する。Vite のパフォーマンスクリティカルな箇所から Rust に書き換え、Rolldown の API を利用するようにするそうです。

まとめ

今回は Vue Fes 2023 の Evan You のキーノートを速報レポとして紹介させていただきました。

ギフティでは Vue や Nuxt に興味のあるエンジニアも絶賛募集中です。気になる方は、是非一度カジュアル面談でもなんでも良いので一度お話ししましょう!

ギフティ採用ページを見てみる