Vue Fes Japan 2025参加ログ
Vue Fes Japanとは
日本最大級のVue.jsカンファレンスです。VueだけでなくNuxt、Vite/Vitest、Oxcといった最新のツールチェーン、さらにはReactやSvelteの開発者も登壇し、フロントエンド全体の潮流を知ることのできるイベントです。
この度、学生支援制度によって参加することが叶いましたので、その内容をレポートします。
公式サイト
公式サイトのデザインがめちゃめちゃ良いです。今年は特に力を入れていたようで、会場のあちこちでデザインの良さを感じました。
学生支援制度について
詳しくはこちらをご覧ください。
私は利用しませんでしたが、往復の旅費・宿泊費まで負担してくれたそうで本当に凄い制度でした。実際に遠方からやってきた学生もいたので素晴らしい施策だと思います。
聞いたセッション
キーノート
VueやViteの作者であり、Vite, Vitest, Oxc, Rolldownといったツールチェインを開発する会社VoidZeroを昨年立ち上げたEvan Youさんによる講演からスタート。
「なぜJavaScriptツールチェインを作る必要があるのか？」という非JavaScriptエンジニアからの問いに答えるように、JavaScriptの歴史的経緯から、各種ツールの誕生、そしてRustベースのツールへと進化していく、といった話を展開していました。先日 Vite+ というVoidZero製ツールチェインをViteに統合していく旨が発表されていましたが、その要素としてVite+ Pluginというものが挙げられていました。これは従来のViteプラグインの上にFormatterやLinterのプラグインが統合できるもので、恐らくSvelteやAstroのようなVite上に構築されるフレームワークにおいて、単一のプラグインで開発に必要なものを全てカバーできるようになるような未来を考えているのだろう、と思いました。
またRust製のツールチェインを作るにあたって考慮する点としてJSプラグインの実装が挙げられていました。利便性などを考慮するとJavaScriptでプラグインを書けるようにするのは必要なことですが、そのまま実行してしまうと、JS部分がボトルネックとなってしまいRust製の実行の早さを活かすことができないといいます。これをASTの受け渡しやデシリアライズを工夫することで高速さを維持できるようになるかも、みたいな話をされていたようです。
一方Vueに関する話題では、SvelteやSolidのように仮想DOMを使わない「Vapor Mode」と高速な alien-signals ベースのリアクティビティシステムの紹介がされました。Vaporはずっと期待して待ってたのでいよいよ使える日が来ると思うと楽しみで仕方がないです。これらが搭載されるVue 3.6のアルファ版は既に公開されているので試してみようかな。
webpack依存からの脱却！快適フロントエンド開発をViteで実現する
クラウドサインという電子契約サービスのフロントエンドにおいて、ビルド基盤をwebpackからViteに移行した、という趣旨の講演です。
自分もCRA(Create React App, webpackベース)のプロジェクトをViteに1人で移行させた経験があったので、大変なんだよなーと思いながら聴いてました。スライドではスラスラ進んでるけど実際には色んな苦労があったんじゃないかなと想像してました。
Goのバックエンド側との連携の話も面白かったです。Viteってバックエンド側と統合するための設定とかあるんですね。
alien-signalsと自作OSSで実現するフレームワーク非依存なロジック共通化の探求
ReactとVueが混在するようなプロダクト環境において、複雑なロジックを共通化して書くことはできないか？という問題がある中でalien-signalsを活用した自作のOSSで実装を試みている、という講演です。
スライドの始めには「趣のある味わい深い実装」という、オブラートに包んでいるのか包んでいないのかよく分からないワードが出てきて笑いを誘っていました。
VueとReactで同じ書き心地を維持しながら、同じように動作するようライフサイクルなどを工夫して実装していて何やら凄いことをしているように見えました。ただ安定性が怖そうなので今後にも注目です。
学生支援スポンサーセッション
学生支援スポンサーセッションはランチタイムに開催されました。学生にはランチが提供され、それを食べながら聞く形式でした。
金兵衛のお弁当でした。魚・鳥・豚がありましたが一番売れ行きの良かった豚の生姜焼きを選択。美味しかったです。
LINE公式アカウントの技術スタックと開発の裏側
皆さんご存知LINEヤフーさんの講演です。LINEヤフーはLINEとヤフーが合併してできた会社ですが、両者は使用技術が違っていたようで、公式アカウント管理の統一画面をどのように構築するのか課題があったそうです。そこで、 Lit によるWeb Componentsを作成することで解決したのだとか。ただWeb Componentsを作るだけではなく、CEM(Custom Elements Manifest) を利用して情報の受け渡しも可能になっているんだそう。
Web Componentsを実際に運用している例はあまり見ないので参考になりました。
プレイドのユニークな技術とインターンのリアル
自社サービスの「KARTE」について、その技術基盤や実際に使っているデモや、あと解析ツールがBig Queryだと足りなくて自前でOLAPデータベース作ったとも言ってました。
Vue.jsを8年間使ってきた会社が今考えていること
StudioさんはVue/Nuxtを使い続けていることで有名ですよね。
Vueを長らく使ってきて煩雑になった状態管理などのロジックを見直す話をされていました。現在のコードは50万行以上に及ぶそうです。
そのような中で見つけたストアのアンチパターンを紹介しながら、最終的にこれはSOLID原則の依存関係逆転の法則に繋がる、という結論に持っていくのが非常に上手いな、と感じました。参考にできる本に「リーダブルコード」を示していて、やはりフロントエンドでもあの本は大活躍するんだなと思いました。
kazuponが見つけた才能たち ── Vue.jsそしてOSSエコシステムを変える開発者発掘術
kazuponさん、antfuさん、ubugeeeiさんの3人のパネルディスカッションでした。OSS始めた動機とか続けていくモチベーションの話が聞けてよかったです。
やはりOSSは楽しいから続けるんですね。OSSが趣味になってるの素敵です。
フレームワークを超えて：次の10年のウェブを築く
NuxtコアチームリードのDaniel Roeさんの講演です。
手元の端末からリアクションを送れる仕掛けがあって凄く面白かったです。これ実装してみたい。
内容としては、なぜフレームワークが必要となるのか？という問いについてでした。僕らは日々新しいツールがやってきて、複雑な設定をして、色んなベストプラクティスを吸収して…と職人のように仕事をしています。フレームワークならば、これを皆のものとして共有して進化させられると。例えばサードパーティフォントの導入のためにnuxt/fontsを作ったり、デプロイ先のintegrationを作ったり…
良いものは皆で共有してもっと良いものにしていこうという、OSSひいてはハッカー文化そのものの核のようなものを感じられるセッションでした。
最後にNuxt v4.2を目の前でマージしてリリースするというちょっとしたサプライズ(？)がありました。衝撃的なリリースだったので会場は大盛り上がりでした。
Inside Vitest: テストフレームワークアーキテクチャの詳細解説
Vitest、Vite コアチームメンバーの小川浩志さんによるVitestのアーキテクチャ解説です。ちょうど Vitest 4 がリリースされたばかりのタイミングで期待が高まります。
Vitestのテストライフサイクルについて、Orchestration→Collection→Execution→Reportingの順に説明していました。Orchestrationの項目は様々な設定とどのような動作の違いがあるのかを詳しく語っていたので面白かったです。
特にVitest 4からStableになったBrowser Modeでは、テストごとにブラウザを立ち上げるのではなく、実際にはブラウザのiframe内で実行してパフォーマンス向上を図っていると聴いて、そんな手があったのか！と舌を巻きました。こういう発見があるのが技術カンファレンスの醍醐味だと感じます。
Vue.jsでつくる実験映像
Vue Fes Japan 2025で個人的に最も良かった講演だと思ってます。映像作家の橋本麦さんが、色々な実験映像を撮影する際に、どのようにVueを使って作ったツールを利用しているかという点を紹介するものです。
クリエイティブとWebフレームワークというとかなり遠い印象がありますが、例えばコマ撮りの撮影だと、カメラの位置の把握や細かなカメラの設定の変更を行うことができるツールをVueをフロントエンドとして作成して使っているんだそうです。 WebUSB 経由で Picture Transfer Protocol を呼び出すことでカメラをコントロールできるんだそう。
また、このようなクリエイティブ向けツールを作るためのVueコンポーネントライブラリも紹介されてました。
デモ を触ってもらえれば分かると思いますが、AdobeとかBlenderとかFL Studioとかで触った記憶のあるあの独特のパラメータを弄る操作感を更に進化させたようなコンポーネントが並んでてめっちゃかっこいい。これに関しては 論文 まで書かれてるようなので興味のある方は是非。
講演はここで終わらず(盛りだくさんでした！)、Unicodeで文字アニメーションを作る試みについての説明が出てきました。これについては実際に見てもらったほうが早いんじゃないかと思います。
凄くないですかこれ。どのようにこれを作っているかというと、文字を様々な要素で類似度を算出し、巡回セールスマン問題として一筆書きするようにして繋げているんだそう。僕らのようなエンジニアだけをやっている人からは出てこない発想すぎる。
これもツールが公開されてます。
全体として、クリエイティブという非IT分野でVueを上手く用いることで新しいものが生み出されていくのが見られたのでとても満足しました。こういうジャンル外の話題はカンファレンスで見かけでもしない限り知ることもなかったと思うので、来てよかったと感じる講演でした。
フロントエンドの未来を語る── React/Vue.js/Svelte が見据える次の 10 年
VueのEvan Youさん、ReactのDan Abramovさん、Svelteのdominikgさんによるパネルディスカッションでした。
やはりメインの話題はAIを活用したコーディングについてでした。3人ともフレームワークの開発に直接用いているわけではなかったようですが、それでも小さいプロジェクトやテストコードなどの部分では活用しているようでした。
また、フレームワークとAIの関わりについてでは、Vue 2→3、Svelte 4→5でAPIを変更した際に、AIが過去のコードを生成してしまう状態が続いてしまう問題について話題に上がっていました。こうしたことを受けて、APIの大幅な変更は行わないように設計したり、AIに正しいコンテキストを渡せるようMCPなどを開発する必要性があると述べられていたのが印象的でした。
AIによって開発環境は急進的に変化する一方で、フレームワーク側はむしろ「大きな変化を起こさない」ようにシフトしているという対比は聞いていて面白いな～と思うポイントでしたね。
Introducing Vite DevTools
冒頭のキーノートで聞いたVite+の構想。その一端を担うことになるVite DevToolsについて、開発のAnthony Fuさんが説明してくださる講演です。他のトラックよりも小さい場所で行われたこともあり、超満員で立ち見どころか通路にしゃがんで見る人まで現れるほどの人気ぶりでした。
Anthonyさんがこれまで作ってきたInspectorツールなどを紹介しながら、ツールにおける透明性がいかに重要か、という話をし、その後Vite DevToolsに搭載される予定の機能の解説と、プラグインシステムの紹介、最終的にVite DevToolsが任意のフレームワークによって拡張される未来を説明していました。世は大DevTool時代でそれぞれのフレームワークがそれぞれのDevToolを開発していますから、これが1つの画面に統合されるのは大変分かりやすく嬉しい話です。
個人的にはビルド時に見れるコードの変換後との比較機能が嬉しいです。現代のバンドラーはここら辺勝手にやってくれるので楽な反面、中身を見てみたい気持ちもあったんですよね。
Vite DevToolsのプラグインは、セッション聞いている中でもいくつか実装したいアイデアが出来ているので、正式リリースが楽しみです。
見られなかったセッション
時間の都合で聴講できなかったセッションもたくさんあります。特に「知覚とデザイン short version」はUI/UXに興味のある自分にとってまさに見たかった講演なので残念・・・
公開されているスライドを見ると、知覚の根幹をなす脳の視覚野からデザインを考えるアプローチを採っていて凄く面白そうでした。
スポンサーブース
いっぱいあるので特に印象に残ったものを紹介します。
付箋にVueをどう使っているか書いて貼り付けるやつ。
爪痕も残してきました。
これはバイアスがかかりまくったアンケート。「一番使いやすいのは？」にSvelteと回答したら呼び止められました(笑)。
参加してみて
技術カンファレンスに参加するのは今回が初めてでしたが、様々な分野や国籍の方が一同に会して、トピックに関する知見を共有し合うのは新たな発見の連続でとても良い刺激になりました。また、日英の同時翻訳など、言語の違いを埋めるような取り組みも多くされていて、こういった細かい優しさがカンファレンス全体の雰囲気を形成しているのだと思いました。
スタッフの皆さん、今回はこのような場を提供してくださりありがとうございました！
おまけ
Vue Fes Japan 2025の公式Webサイトでひと際目を引くのがメインビジュアルのまるで絵の具が混ざるかのように動く丸の部分。これどうやって実装しているのかずっと気になっていました。
答えは公式のミラーレポジトリにありました。簡単な話です。全部手書きでGLSLのシェーダー書いてThree.jsで表示させるだけ！
やっぱフロントエンドの人ってこわい。
Discussion