「フロントエンドカンファレンス東京 x Vue Fes Japan コラボイベント」に参加してきました

• 2025/8/25
• https://vuejs-meetup.connpass.com/event/363753/

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

株式会社アンドパッド 小泉 佑太郎さん

• 社内ではVue/NuxtやReact/Next、React/ReactRouterなどチームごとに違った技術スタック
  • どちらかでしかできないことはないから困っていることはない
• ライブラリならではの設定が困るところ
  • バージョンアップのノウハウもそれぞれで必要
  • vue/reactというよりwebpack/viteの差異の方が困り事が多い
• ReactのプロダクトをReactRouterとviteに統一してviteに揃えるようにした

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

株式会社プレイド 川口和也さん

• フレックスエディタ
  • ノーコードでUIを作れる機能
  • 裏側でRollupを使っていた
  • クライアントサイドでは編集のアクションをプレビューする
  • サーバーサイドでは編集内容をサーバー側に保存する
• プレビューの速度を高速化したい
  • ビルド時間を最適化
  • tree-shakingを無効化
  • minify無効化
  • 平均450ms程度までできた
• サーバーサイドはJSのロードパフォーマンスを高めたい
  • minifyで圧縮
  • tree-shakingで無駄なコードを削る
  • ビルドに平均5~10秒かかってしまっていた
  • サーバー側の処理が重いとリクエストがたまったりインフラ面への影響も
• RollupはCPUコストが高い
  • Rolldownへ移行することに
  • Rollupと互換性がありRustベース
• Rolldownの検証
  • 検証のプロダクトでビルドが10s〜1mのものが100ms〜7sに改善
• 移行作業
  • import構文を書き換えるプラグイン

実践Vue Fes Web サイト入門

ubugeeeiさん

• VueFesJapanのサイト
  • 毎年作ってる
  • 多言語対応
  • 認証なども含めて
• 技術スタック
  • Nuxt4
    • 2025/7にリリース
    • 3からの移行がスムーズ
  • Vue3.6
    • 2025/7リリース
    • Vaporモード
  • rolldown-vite
    • 2025/5にリリース
    • viteからrolldown-viteへの移行は何もしなくてもできた
  • LightningCSS
    • CSSのParser/Transformer/Bundler/Minifier
  • Nuxt I18n
  • Nuxt SEO
  • Nuxt Typed Router
  • Nuxt Storybook
  • Nuxt ESLint

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

小橋はこさん

• Web Components
  • Custom Elements
  • Shadow DOM
  • Templates/Slots
• 広告での活用
  • カプセル化できるのでページ本体に影響を与えずにいろいろできる
  • iframeを使わなくてもいい
  • アクセシビリティ観点でもiframeじゃなくてよくなるので伝わりやすい

JavaScriptのAPIがどのように現場の開発者に届くのか

ユウトさん

• JS Runtime
• Novaというのを新しく作っている
• 差別化のためにHonoのAdapterにすることを目指してる

Nuxt x GSAP x Three.jsで弊社公式サイトのリニューアルをして二つのデザインアワードで受賞した話

株式会社GENEROSITY 須田 耀平さん

• 公式サイトのリニューアル
• UIが変わっていくことを考慮して共通化より冗長化
  • コピペが多くても個々のの凝集度を高める
• GSAPでアニメーション
  • 有償だったのが無償化された
• Nuxt I18nで多言語化

useSWRを使い倒して非同期状態の管理を楽にしよう

フロントエンドカンファレンス北海道2025実行委員長　n13uさん

• 既存のFlux的な状態管理を改善したい
• useSWRを使った
• CQRSパターンで取得と更新を分けた設計
• ローカルでの状態管理をやめられてキャッシュ管理っぽくなった