Zenn
💭

フロントエンドカンファレンス東京 × Vue Fes Japan イベントレポート

に公開
イベントレポート
idea

フロントエンドカンファレンス東京 × Vue Fes Japan イベントレポート

イベント概要

本イベントをオンラインで視聴しました。

印象に残った内容

Vue・React マルチプロダクト開発を支える Vite

  • Vue と React の違いよりも、Vite と webpack の違いの方が大きかった
  • Vite で統一することで、環境設定やビルド設定の共通化が進んだ

サーバーサイドのビルド時間87倍高速化

  • クライアントとサーバーで要件が異なるため、Rollup を最適化してビルドを分けている
  • クライアント側の狙い：CWV（Core Web Vitals）を意識しつつ、ビルドの高速化
  • サーバー側の狙い：コード圧縮・未使用コード削除など
  • AST キャッシュは効果が限定的で、約 10%の改善にとどまった
  • Rollup のバンドラは CPU 負荷が高いため、代替として Rolldown（Rust で再実装されたバンドラ、Rollup との API 互換あり）を採用
    • API 互換があるため、import 変換ロジックのみで対応できた
  • Rolldown 最速と Rollup 最遅比較で約 24 倍、平均約 9 倍の高速化
    • ただし、バンドルサイズは 20〜25%増加した

実例と表現で学ぶWeb Components ~"愛される"広告表現とShadowDOM~

  • Web Components の 3 つの柱
    • Custom Elements（customElements.define('my-element', class {...})）
      • Vue や React のコンポーネントに相当
    • Shadow DOM（DOM・スタイルのカプセル化 customElements.define('my-element', class {...}）
      • Scoped CSS をブラウザのネイティブで実現する機能
      • シャドウツリー側の CSS は切り離されているため、外部の CSS の影響を受けない
      • ネイティブ実装のため、全称セレクタや要素セレクタの影響を受けない
    • Templates / Slots（<template> / <slot> による構造再利用）
      • React の props.children に相当
    • 期待効果：CSS 衝突の低減、再利用性、フレームワーク非依存化
  • ブラウザネイティブで実用段階に入っており、Declarative Shadow DOM や React の Custom Elements 強化などにつながっている
  • 採用ケースの例：埋め込み・配布可能な UI 部品、Design System の核としての共通化、コンテンツ向け埋め込みパーツ、プレイアブル広告（分離されたレンダリングが可能なため Shadow DOM との相性が良い）
  • 実例として、GitHub や YouTube で Web Components が使われていると紹介があった

普段使っているAPIが現場に届くまで

  • 標準や実装の追跡は大変だが、基礎知識があると理解が早い
  • OSS では Web 標準化に近づける取り組みが行われている
  • OSS への貢献は、サーバーサイドの Runtime（特に Node）から始めると取り組みやすい
    • Engine は複雑だが、Runtime は基本仕様に沿っているため貢献しやすい

学んだこと

  • Vite で統一することで、開発環境・ビルドの共通化が進み、マルチプロダクト運用が楽になる
  • Rolldown（Rust 実装）の導入でサーバーサイドのビルドが大幅に高速化できる一方、バンドルサイズ増加などのトレードオフがある
  • Web Components（Custom Elements / Shadow DOM / Templates）は実用段階にあり、実例も増えてきている

感想

  • 広告表現の話は、普段あまり聞けないテーマのため非常に面白かった
  • 発表者の熱量が高く、コアな話が多くて「カンファレンスを聴いている感」があった
  • 同時刻の別イベントも気になっていた。最近はカンファレンスが活発で、学びの機会が増えていると感じた

Discussion