UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

2025年10月25日に開催されたVue Fes Japan 2025に参加しました。
今回はその参加レポートです。

Vue Fes Japanとは

Vue Fes Japanは日本最大級のVue.jsのカンファレンスです。
2022年のオンライン開催のときに参加し、2023年や2024年は都合がつかずに断念しました。

今年こそは参加したいと思っていたので、なんとか参加できてよかったです。

場所は東京都千代田区大手町で、東京駅から歩いて行ける範囲でした。
神戸から東京駅まで新幹線で行き、夜には別のセミナーにも参加予定だったため、終わったら急いでとんぼ返りという忙しい1日を過ごしました。

セッション紹介

ここからは、私が参加したセッションをいくつか紹介します。

キーノート

Vue.jsの開発者であるEvan You氏がキーノートとして話していました。
Vue3.6で追加されるalien-signalsやVaporモードについての話や、Viteとその周辺にまつわる話を通じて、Vueの今後について話していました。

VueFesでは毎年のことではありますが、開発者本人の話を聞けるのは非常に刺激になります。

VueはAIに弱い？そんなの都市伝説です

次に聞いたのはAIに関するセッションです。
確かに生成AIを使うならReactを使っているような風潮があります。

しかし、下記のようにしっかり指示を出していけばAIも活用できると紹介されていました。

• コンポーネントごとに分割して生成させる
• 責務で区切ったレイヤーごとに明確なルールを設定する（暗黙的ルールを後出ししない）
• 明確なレビュー観点と必要十分な情報を与える

そしてこれらの話は、Vueに限った話ではなく、AIにコードを書かせるとき全般で大事なことです。
フレームワークの影響よりも「AIが働きやすい環境を作る」ことが重要です。

そして最後に「AIのおかげで好きを諦めなくてよくなった」という話をしていたのが印象的でした。

Storybook駆動開発で実現する持続可能な Vue コンポーネント設計

Storyを先に書いてから実装する「Storybook駆動開発」を実践して、得た知見や変わったことについてのセッションです。

Storyを先に書くことで、コンポーネントの見た目やStoryを確定させてから、そこに沿って実装を行うことで実装忘れや認識ズレを防止できるとのことです。

Storybookを使うメリットは、テスト仕様書など別の資料を作るとメンテナンス対象が増えますが、もともとコンポーネント管理にStorybookを使っているのであれば順番を入れ替えるだけの話になります。

ただ、開発時間の1/4をStory作成にかけていたり、そもそもStoryでテストパターンが漏れていると見落としが発生するなどの課題もまだあるとのことです。
また、実装が無い状態でStoryを書くので、要素の取得などは想像して書くことになってしまいます。

それでも開発の仕方として良いなと感じました。

生成AI時代のWebアプリケーションアクセシビリティ改善

続いてはAI × ウェブアクセシビリティについてのセッションです。

生成AIに書いてもらったコードをアクセシビリティチェッカーなどに書けたところ、アクセシビリティについて何も言わずに生成したコードの方がアクセシビリティ違反が少なかったとのことです。

「下手に指示すると、逆に元のコンテキストと衝突してしまい、アクセシビリティ違反が増えてしまうのではないか？」とのことで、意外な結果でした。
ただ、それでもまだまだ違反は見られるとのことです。

あと個人的に気になったのがPlaywright MCPです。
アクセシビリティツリーを見ながら実行できるそうで、Chrome DevtoolのMCPは現時点（2025年10月）ではアクセシビリティツリーを見ないらしく、アクセシビリティチェックとなるとPlaywright MCPを使うことになりそうです。

Inside Vitest: テストフレームワークアーキテクチャの詳細解説

Vitestは設定を最小限にして「すぐ書ける」ことを目指しているVueのテストフレームワークです。
そんなVitestのアーキテクチャの深掘り・詳細解説のセッションです。

テストライフサイクルは下記の流れになっているそうです。

• Orchestration（テスト全体の管理）
• Collection（実行するテストの収集）
• Execution（実際にテストを実行）
• Reporting（実行結果のレポート）

それぞれのサイクルでどんなことをしているかを聞けました。
ここまで深い部分の解説を聞けたのは貴重な機会でした。

最高のDX – Nuxt Typed RouterとPinia Colada

最初に話していた「ライブラリを見ることで言語の未来を想像できる」は新しい視点でした。
確かに、言語で提供されていないからライブラリが生まれるということです。

そしてこのセッションは、型安全なルーティングを実現する「Nuxt Typed Router」と宣言的データフェッチングを行う「Pinia Colada」の紹介です。

ちなみに「Nuxt Typed Pages」という公式の実験的機能もありますが、これと「Nuxt Typed Router」は別物です。

Vue 3.6時代のリアクティビティ最前線

Evan You氏がキーノートで話していたalien-signalsやVaporモードの詳細についてのセッションです。

Vue2で導入されたVDOM（Virtual DOM: 仮想DOM）は、効率的なDOM更新を可能にした反面、メモリのオーバーヘッド問題や、そもそもVDOMのランタイムコードも必要です。

Vue3になって「静的ホイスティング」や「パッチフラグ」など、改善も行われました。
改善されたものの、結局VDOMを使っている以上、VDOMのランタイムコードは必要になります。
VDOMではない新しい確信が必要です。

そこで生まれたのがVaporモードです。
Vaporは「蒸気」という意味で、VDOMを蒸発させて脱VDOMを目指しているということですね。

VDOMの差分を計算する代わりに、変更に応じて実DOMを直接更新することで、メモリ使用量の削減やバンドルサイズの縮小が期待できます。

alien-signalsはVueのrefとreactiveの代替である新しいリアクティブシステムです。
SolidJSなどのシグナルシステムをVueに持ってきたイメージだそうです。

AI駆動で進める依存ライブラリ更新

サービスの依存ライブラリ更新をAI駆動で進めた記録や、そこから得たことについてのセッションです。

TsumikiというAI駆動開発支援フレームワークを使って進めたり、Claude Codeのカスタムコマンドでチケット生成するなど、AI駆動で実際にプロジェクトを進めていました。

また、AI時代の育成についての考え方も目から鱗でした。
例えば、単にタスクを振るだけでは成長につながりません。AIに丸投げでコードの中身は理解していなくても単純なタスクならできてしまうかもしれません。

簡単なタスクによる「経験を積む」は消失したと言ってもいいでしょう。
創造性を伸ばす方向にシフトしたそうです。

「生成AI時代のWebアプリケーションアクセシビリティ改善」のセッションでも思いましたが、「AIが働きやすい環境を作る = そもそも人間が働きやすい環境」だなと感じました。

そのためには暗黙知を形式知に変え、分からない部分に向き合う必要があります。

最後に

セッションのあとにはライトニングトークもあり、Vueにまつわることを浴び続けた1日でした。
他にも企業ブースや縁日も充実しており、まさにFes（お祭り）でした。

来年も開催してタイミングが合えばぜひ参加したいです。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！