Vue Fes Japan 2024 に行ってきた
はじめに
Vue Fes Japan 2024 に行ってきました。
昨年も参加して、色々刺激をもらってきたのですが、今年も参加してみて、また色々と刺激をもらうことができたので、この熱い気持ちが冷めないうちに感想を記事にしておきたいと思います。
会場
昨年は中野セントラルパークというところで開催されていたのですが、今年は大手町プレイス ホール＆カンファレンスというところで開催されました。
去年もでかい会場だなーと思っていたのですが、今年はさらに大きい会場で、グレードアップした感じがしました。
オープニング
昨年同様、Vue.js 日本ユーザーグループ代表の @kazupon さんのオープニングで始まりました。
去年は日本語でスピーチされてたかと思うのですが、今年は英語でスピーチされていて、なんかグローバル化しているなーと思いました。
英語のスピーチでも、日本語翻訳が各自の席にあるイヤホンで聞くことができて、英語わからん自分でもスピーチを聞くことができて良かったです。
参加したセッション
自分が聴講したセッションは主に以下のものです。
- キーノート
- Vue と Vite で作る UI コンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~
- IT 未経験者を Vue.js で開発できる IT コンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み
- AI とともに歩んだライブラリアップデートの道のり
- Pinia の現状と今後
- Oxc - The JavaScript Oxidation Compiler
- Vapor モードを大規模サービスに最速導入して学びを共有する
- 次世代フロントエンドクロストーク
- Demystifying Vite Internals
- Deep dive into Nuxt Server Components
欲張りなので、参加チケットの元を取らないと！という気持ちが先行し、かなり詰め込み気味で聴講していました 😅
キーノート
Vue.js の作者である Evan You さん のキーノートでした。
Vue3.5 による改善の話や、Volar2.0 や Vue Devtools の話などがありました。
自分は現在 Vue.js で開発はしているものの、Vue3.5 などの最新のバージョンなどは全然触っていなかったので、最新版だとそんなに便利になってるのか〜と感心しながら聞いてました。
特に useTemplateRef や defineCustomElement などは、そういった機能はあるっていうのは噂には聞いていたものの、実際にどんなものなのかよくわかっていなかったので、そのあたりの理解が深まったのは良かったと思います。
今実験的機能として実装されている Vaporモード の話もありました。
仮想 DOM を使わないということで、パフォーマンスが上がるという機能で、これは注目していきたい機能だなと思いました。
Vue3.6 では Suspense 周りの改善があるといった話や、リアクティビティ周りの改善があるといった話などがありました。
そして自分が一番興味があったのが Vite 周りの話で、Vite の今の現状や今後の展望などの話がありました。
Rolldown といった新しいバンドラーの話は昨年のキーノートでもチラッと話しをされており、そのときはイマイチ何の話かよくわからなかったのですが、今年はそのあたりの話も詳しく聞けて、JavaScript を取り巻くエコシステムの話や今後の展望なども Vite の作者本人から聞けたのは良かったと思います。
Vue と Vite で作る UI コンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~
弁護士ドットコムさんが、自社で開発した UI コンポーネントを導入したというお話でした。
今、自分が働いている会社でもまさに UI コンポーネントの開発に取り組んでいて、課題感や導入しようとした背景も含め、全く同じような状況で、まさに自分が関わってるプロジェクトでも同じような状況だったりもしたので、非常に興味深く聞いてました。
開発した UI コンポーネントをパッケージとして配布するといったことなんて、この前自分が対応してたやつだー！と思いながら聞いてました。
使用しているツールなんかはちょっと参考にしたいと思うところがあったので、そのあたりを調べてみようと思いました。
IT 未経験者を Vue.js で開発できる IT コンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み
Vue.js を社内の新人研修で使用するようになり、どのような開発体制を作っているのかといったお話でした。
こういうモダンな開発フレームワークを新人研修で手厚く受けられるのはすごく羨ましいなと思いました。
AI とともに歩んだライブラリアップデートの道のり
Vue2 で負債化したコードを AI を活用して修正を行ったというお話でした。
面白いなと思ったのは、aider という AI ツールを使って、可能な限り自動化してコードを修正したというところで、
CLI からプロンプトを読み込ませて、AI に反復的にコードを修正させるといったことをやっていて、このツールはかなり便利そうだなと思いました。
テストコードを自動生成させて、さらにテストでエラーになった箇所をフィードバックさせて更に学習させるといったワークフローがすごく面白くて、これは自社の業務にも何か活かせそうな予感がしました。
例えば、Storybook の自動生成や、VRT のテストコードなんかもこのツールで自動生成できるんじゃないかと思いました。
Oxc - The JavaScript Oxidation Compiler
Oxc という JavaScript のコンパイラの話でした。
Oxc というツールを今日初めて聞いたのですが、Parser、Linter、Resolver などの機能を持ったツールのようです。
ツールは Rust で書かれていて、パフォーマンスがかなりよいのと、Vite や Rolldown といった JavaScript のエコシステム周りでも連携されるみたいで、今後注目していきたいツールだなと思いました。
作者は Rust が大好きなようで、「Rust の勉強はやるべきだ」と言っていたので、いつか自分も Rust に入門したいと思います。
Vapor モードを大規模サービスに最速導入して学びを共有する
キーノートでも触れられていた Vaporモード を自社のプロダクトに導入してみたというお話でした。
Vapor モードは仮想 DOM を使わない、Vue の新たなコンパイルモードで、
- 実行速度が速い
- メモリ使用量が少ない
- バンドルサイズが小さい
といった特徴があるそうです。
この試験的な機能を自社のプロダクトに導入した時に行った検証や発生したエラーをどのように対応してきたかというお話が聞けました。
この Vapor モードは Options API では対応していないため、コンポーネントをすべて Composition API に書き換える必要があり、それを AI や手作業などで対応したそうです。
検証した結果、バンドルサイズや FCP などのパフォーマンス面でも Vapor モードの方が軽くて速いという結果になり、
特にループ処理が多く、描画ステップが多いようなページではパフォーマンス差が顕著に出ていたのは驚きでした。
まだ試験機能なので、これの正式版がリリースされたら、パフォーマンス改善に大いに役立つということがわかったのが非常に良かったです。
次世代フロントエンドクロストーク
OSS で JavaScript のエコシステムの開発を行っている 5 名のエンジニアによるトークセッションで、普段自分たちが開発で使用しているツールの開発者のお話を聞くことができました。
ESLint、Prettier、Biome、Vite、Oxc といった超有名ツールの開発者で、今後のフロントエンド開発のエコシステムはどのように変わっていくのかといったテーマのお話を聞くことができました。
最近だと開発ツール周りは、パフォーマンス面を考慮して Rust で開発されることが多いが、そういった流れをどう思うかといった話を、開発者から直接聞くことができたのは良かったと思います。
ここでも、「やはり Rust か・・・・」と感じたので、Rust はやはり避けて通ることはできないのか・・・・と感じました。
あと、このセッションで MC 兼通訳をされていた Kia King Ishii さんのトークの回しっぷりがすごかったです！
会話もスムーズだったし、翻訳した内容もすごくわかりやすかったです！
Demystifying Vite Internals
Vite Dev Serverがどういう仕組みで動いているか といったお話でした。
自分も Vite を使って開発を行っていますが、あの爆速なビルドは内部でどういったプロセスで動かしているのか、といったお話を聞くことができました。
ビルドツールの内部でどういった処理が走っているのかなんて、全然気にしたことがなく、「ビルド速ぇ〜！ありがてぇ〜！」という感じで普段使っていましたが、
内部処理がどういった順番で実行されるかといったことを図解入りで解説されていたので、すごく勉強になりました。
かなり内容が濃かったのですが、まだ全貌を話したわけではないらしいので、残りの話も聞いてみたいと思いました。
ざっくりメモった内容
Vite Dev Server がどういう仕組みで動いているか
- イニシャライズ
- インラインコンフィグを渡して起動する
- コンフィグの解決
- コンフィグを esbuild でビルドして書き出す
- 書き出したファイルをダイナミックインポートする
- ビルドしたコンフィグファイルを削除
- vite.config と起動時のインラインコンフィグをマージ
- .env の設定を読み込む
- サーバー設定に接続
- ミニマムなサーバーを起動して middleware を実行
- transformMiddleware
- indexHtmlMiddleware
- ミニマムなサーバーを起動して middleware を実行
- Dependency Pre Bundling
- node_modules の依存パッケージをバンドルして.vite/deps の中にバンドルファイルを配置
- Dev サーバーを起動
- ただし、このときにアプリケーション自体はビルドしない
- そのため、起動が早くなる
- ただし、このときにアプリケーション自体はビルドしない
Plugin システム
- Rollup プラグインのインターフェースを拡張して使用している
- Dev モードのときは Plugin Container を使ってビルドしている
- Prod モードのときは Rollup を使ってビルドしている
Plugin Container
- Rollup のエミュレーター
- Rollup をエミュレートして Dev で起動している
Vite で TypeScript がビルドできるのはなぜか
- Vite 自体にビルトインされている esbuild でビルドしているため
- Vue の場合はパーサーがビルトインされていないので、プラグインを設定して Vue のビルドをしている
Deep dive into Nuxt Server Components
Nuxt Server Components のレンダリングの仕組みについてのお話でした。
Next.js と同じように Nuxt.js でもサーバーコンポーネントという機能が実装されている（今はまだ試験的機能）のは知ってはいたのですが、
具体的にどういった仕組みで動いているのはよくわかっていませんでした。
components/island ディレクトリにコンポーネントを配置すると、 NuxtIslandコンポーネント というふうに認識されるだとか、
そのコンポーネントでどのようにレンダリングされるのかという仕組みを知ることができました。
React Server Components では DOM の情報は RSC ペイロードというものをサーバーからブラウザに返却して、それをレンダリングするということに対して、
Nuxt Server Components では DOM 情報を HTML の文字列として返却し、インタラクションなどが発生するようなクライアントコンポーネントを、
Vue.js の Teleport という仕組みを使ってクライアントでレンダリングするということをしているそうです。
これはすごく目から鱗な仕組みだと思いました。
これもまだ試験的な機能になっていますが、正式リリースされたらパフォーマンス向上が期待できる機能なので、今後注目していきたい機能です。
Next.js とも比較されてくると思うので、そのあたりとの差別化も期待したいと思いました。
まとめ
今年も Vue Fes Japan 2024 に参加して、とても楽しかったです。
やはりこういった大規模なカンファレンスに参加することで、自分の知らない世界がどんどん広がっていくので、こういったイベントに参加するのは非常に有意義だなと思いました。
来年も参加したいと思います！
Discussion