アイスタイル Advent Calendar 2025の18日目の記事です！😀
はじめに
こんにちは、アイスタイルのT&C所属の岡下(okashitay)です。
Vue Fes Japan 2025スポンサーとして参加
今年、株式会社アイスタイルは「Vue Fes Japan 2025」にスポンサーとして参加させていただきました。(6年振り2回目)
Vue Fes Japanは2018年に始まり、文字通り「Fes = お祭り」のように、Vue.jsを共に盛り上げ、共に学び、そして何より共に楽しむことを目的に誕生した日本最大級のVue.jsカンファレンスです。
オープニングの動画でもシルバースポンサーとして紹介されております。(音量注意)
この記事について
カンファレンスでは、Vue.jsの最新動向や各社の課題解決・開発手法、さらには音楽家が手がけたオーディオアプリといった芸術分野の話まで、多種多様なセッションがありました。
実際にセッションに参加して多くの知見や刺激を得ることができました。
特に印象的だったセッションの内容と、そこから得られた学びについてシェアできればと思います。
参加レポートでは共同執筆者として弊社エンジニアの伊藤(itohis)さんも執筆に参加(後編にてレポート)し、2名での共同執筆をさせていただいております。
印象に残ったセッション
■ フレームワークを超えて：次の10年のウェブを築く
Nuxtコアチームリード Daniel Roeさん 登壇資料
スマートフォンからリアルタイムにリアクションや質問に回答できる視聴者参加型セッションでした。会場のユーザーが直面している課題をリアルタイムに集計し、解決の糸口となるNuxtのベストプラクティスが次々と紹介されました。
Web開発の次の10年は個々の開発者の創造力と、フレームワークが提供する高度な抽象化の掛け算によって進化すると考えられています。
「あなたは替えの効かない、プロジェクトに欠かせない存在」(You are unreplaceable)であるものの、現代のWebはより複雑化していて学び続けることは欠かせなくなってきています、しかし不安にならず価値を届けていくのが重要ですと、
そしてNuxtはDX(Developer Experience)を中心に設計されたフレームワークであり、アプリケーション開発を「協力して作るもの（Build with others）」へと進化させる存在として注目され950名以上のコントリビューターとともに進化を続けています。主には、
- nuxt/fonts、最新のnuxt/fontsでは、以下のフォントにまつわる問題をフレームワークレベルで扱うフォント設定と使用状況の不一致、サードパーティoriginとpreconnect管理、font waterfallの解消、CLS(Cumulative Layout Shift)の抑制と開発者が細かい設定を手動で行う負担を減らし、安定したUXの実現
- キーバリュー・ストレージとキャッシュ、NuxtはすでにVercel KV、Cloudflare、Netlify Blobs、Redis、MongoDBなど幅広いストレージ・キャッシュの統合をサポート、フレームワークがインフラ依存のAPIを吸収することで、どこで動かすかを意識せずに最適なパフォーマンスを得られる。
- 画像最適化、Vercel、Cloudflare、Cloudinary、Imgixなど多様なプロバイダに対応し、ベンダーロックインを避けながら高品質な画像最適化の実現
- 部分的ハイドレーション、必要なコンポーネントだけをクライアント側でハイドレートし、JSの実行量を劇的に削減。初期ロードを高速化
また、サーバー側(SSR)で中断された処理をクライアント側(CSR)で再開するアプローチも探求中で、従来の「リビルド的ハイドレーション」を不要にする可能性があります。
高速バンドラ(rspack、rolldown、farmなど)、ビルド時間の短縮とDX改善のために、新しい世代の高速バンドラを積極的に評価しています。
と、これから目指しているのは複雑なWeb開発を「より速く、安全で、楽しく」する未来、それがコミュニティとともに築かれ、開発者一人ひとりの創造力が不可欠であることが知れました。
そしてセッションの終盤には、Nuxt v4.2.0をライブマージしてリリースしようとしたところ、CIがエラーを吐いて会場を沸かせる一幕があり、参加者と一体感があるセッションでした。
■ alien-signalsと自作OSSで実現するフレームワーク非依存なロジック共通化の探求
株式会社ヤプリのAose Yuuさん
歴史的経緯により、あるプロダクトではVueを用いてアプリケーションを開発・運用しているが、他のプロダクトではReactを採用しているということもあるでしょう。
そういった場合、フレームワークも異なり実装方法が異なる共通的なビジネスロジックを各プロダクトごとに実装するといったことが発生し、開発効率の低下や、ロジックの不整合リスク、また工数を確保しないといけないなどの課題が出てくると思います。
課題を解決するためのアプローチとして、alien-signalsをベースとした自作OSSの紹介がありました。
ロジックは純粋なTypeScriptのファイルとして定義し、Signalsを使って状態や副作用を管理し、各フレームワーク側でアダプターを通して呼び出す作りだそうです。
また、VueやReactで同じロジックを扱えるようにするための工夫、ライフサイクルや再レンダリングの違いへの対応などについて話されていました。
これにより、フレームワークをまたぐロジックの重複処理の削減、開発体験の向上、将来フレームワークを乗り換える際のコスト低減など、実に実践的な一つの案として参考になる内容でした。
■ chocoZAPサービス予約システムをNuxtで内製化した話
RIZAPテクノロジーズ株式会社 Kaede Katoさん
予約システムというプロダクトで、Nuxtをどう活用したのかが非常に分かりやすく紹介されていて、とても興味深い内容でした。
このシステムはSEOを必要としないサービスのため、SPAモードのクライアントレンダリングを採用していました。
ログイン前提・動的UI中心という特性もあり、SSRを使うメリットよりもSPAの軽さと制御のしやすさを優先した点に納得感があります。
Nuxt serverを用いてBFF(Backend for Frontend)を構築し、バックエンドAPIからデータを取得する方式も非常に合理的で、バックエンドのエンドポイントを直接外部に晒さず、BFF経由にすることでセキュリティやAPIの最適化を実現している点が印象的です。
さらに、認証まわりやWebViewでの挙動など、アプリ内ブラウザ特有のあるある苦労話が語られて、「あー、わかる…」と開発者として深い親近感が湧きました。
Nuxtを軸にSPA + BFF構成を内製化したこの事例は、
Web×アプリのハイブリッド開発におけるNuxtの実用性を示す良い例だと感じます。
■ 個人でデジタル庁のデザインシステムをVue.jsで作っている話
株式会社ICS にしはらさん
ReactやTailwind CSS版のコンポーネントはデジタル庁から公式で公開されている一方で、Vue.js向けの実装が存在しないという状況を受けて、発表者の方がFigmaのデザインをもとに個人でVue.js版を実装し、OSSとして公開しているという内容でした。
実装過程では、コンポーネントの粒度や責務分割の考え方など、多くの学びが得られたそうで、Vueコンポーネント設計の知見が詰まっている点が印象的でした。
また、FigmaデザインをVueコンポーネントとしてどう落とし込むかというプロセスは、これからVue.jsを学ぶデザイナーやフロントエンドエンジニアにとっても非常に参考になる内容だと感じます。
公的デザインシステムをコミュニティの力で補完していくという取り組み自体が、OSSの面白さとフロントエンドの広がりを象徴するような発表でした。
そしてVue Fes Japan 2025 レポート【後編】へ…
【後編】では、セッションの内容はもちろん、カンファレンスを彩った会場の雰囲気やアフターパーティー(懇親会)の様子も詳しくレポートします。どうぞご期待ください！！:beers:
最後まで読んでいただきありがとうございます。
