みなさんこんにちは。 今回は10月25日に開催された Vue Fes Japan 2025 に、エンジニアの倉野、木村、デザイナーの ksm が参加してきましたのでその参加レポートをお届けします。
Vue Fes Japan 2025とは
日本最大級の Vue.js カンファレンスであり、「Fes = お祭り」のように、Vue.js を学び、楽しむことを目的として2018年から始まりました。 前回 (2024年) は国内外から約750名が参加し、今年は日本語セッションの英語翻訳提供といった国際化への取り組みも行い、より多くの方に楽しんでいただけるような試みがされていました。 セッションには Vue、Vite、Vitest をはじめに、AI、アクセシビリティやこれからのフロントエンドに関してのパネルディスカッションなど多彩なトピックを題材にしており、様々な分野からの学びを得ることができます。
シルバースポンサーとして協賛
今回、株式会社クラウドワークスは「シルバースポンサー」として協賛しました。
クラウドワークスのサービスでも Vue を利用していることもあり、ぜひこのコミュニティがもっと盛り上がって欲しい！という気持ちが強かったのもありますが、実際当日のイベントの盛り上がりを見て、こう言った形で会社として協力できたことはとてもよかったと心から感じました。
参加セッションを振り返る
Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計
コンポーネント開発において、 Storybook の Story を先に書いてからコンポーネントを作り込んでいくことで、手戻りや認識ズレを防ぐという手法のセッションでした。
個人的には TDD （テスト駆動開発）に考え方が似てるかなという印象を持ちました。 先にコンポーネントの要件を洗い出し、Storyに落とし込んでからコンポーネントを作っていくと、状態の作り忘れや props の設計漏れに気づきやすくなり、着手してから PR 作成するまでにかかる時間を短縮することができます。
弊社のコンポーネント開発でも、個人的にこの手法に近い流れで進めることがあり、答え合わせみたいな感じでセッションを拝聴していました。
弊社のデザインシステムのコンポーネントライブラリは、割と「とりあえず必要そうだから作ってしまえ」という感じで先に思い当たる要件で作成します。 そこから実際に施策チームで作成したコンポーネントを使ってもらい、使いづらいところや足りないところをFBしてもらいます。 受け取ったFBを元にチームで内容を検討してから改修していき「コンポーネントを使える状態にする」という方針でコンポーネントライブラリ構築を進めています。
最初の段階で、すべてのユースケースや要件を洗い出すとなると時間がかかってしまうため、この手法を取り入れていますが、初期のコンポーネント作成で時短できるところは時短していくことで、早期に施策チームに使ってもらうことができます。 また、デザインシステムのコンポーネントライブラリは作っていくだけでなく運用していく業務もあるので、安定する状態になるまでかなりの長期戦になります。 長期戦で手戻りが多い状態が続いてしまうと、開発する側の人間の士気にも影響してきます。そういった側面から考えても、このセッションで紹介された手法は有用だなと感じました。
生成AI時代のWebアプリケーションアクセシビリティ改善
https://yamanoku.net/vuefes-japan-2025/slide/
このセッションでは、Webアクセシビリティの観点からAIエージェントにアクセシブルなコードを書かせる方法や、既存のコードのアクセシビリティ改善のためにAIエージェントを使用する方法について紹介されています。
この概要だけを聞くと、いかにAIエージェントへのプロンプトを工夫してアクセシビリティを意識したコーディングをさせるかという話が始まりそうに思えますが、予想に反して「特にアクセシビリティに関する指示を与えない方がより良い生成結果になる」という研究結果が紹介されるところから始まります。 その上でさらに、よりアクセシブルなコードをAIに生成させるためにどのような手法が考えられるか、生成・レビューのフィードバックループを回すことや、MCP を介して正しい仕様を提示しながら実装を指示する方法などが示されています。
個人的には、これまでアクセシビリティを意識してこなかったような開発者であっても、特に明示的にプロンプトで指示を与えるわけでもなく生成AIによってある程度アクセシブルなコードを書き始めているのだとしたらそれは良い兆しであるように思いました。 一方で、AIによって意図通りのコードが生成されているかどうかについて、成果物に責任を負うことになるのは人間なので引き続きアクセシビリティについての知識を身につけていくことも続けていく必要があると思います。
Vue 関連のトピックとしては、Vue 3.5 から追加された useId() 関数についても触れられていました。
これまで WAI-ARIA の aria-describedby 属性のように要素同士の関係性を ID で表現しなければならない場面では、どのようにページ内で一意な ID を生成するかという問題があり、これが多くの開発者を悩ませてきました。
従来は UUIDv4 を使用したり内部 API の this._uid を使用したり独自にカウンターを実装したりと混沌とした時期がありましたが、これからは全てを忘れて useId() を使用していきましょう。これで SSR の環境でも Hydration mismatch の心配がない安定した ID が生成できます。
また、AI と支援技術の関わり方の一例として Playwright MCP が Web ブラウザを操作する際にアクセシビリティツリーを使用してコンテンツの構造を把握しているという話も興味深かったです。 これまでアクセシビリティツリーというものは、アクセシビリティについてある程度の知識を持つ開発者がスクリーンリーダーなどの支援技術を介してその存在を意識するようなものでした。 しかし今後は、AI エージェントが操作しやすい Web コンテンツを提供するという観点からもアクセシブルなコンテンツが求められるため、これまで以上にアクセシビリティに関心を持つことに対して良い動機が生まれていくことに期待したいです。
Introducing Vite DevTools
https://talks.antfu.me/2025/vuefes/1
先日アナウンスがあった Vite+ の主要な構成要素の一つである Vite Dev Tools （開発ツール） に焦点を当てた紹介でした。 その機能の多さだけでも驚きでしたが、セッションでは、どのような開発思想に基づいてツールが設計されているのかを丁寧に解説していただきました。 これにより、Vite Dev Tools が「開発者体験」をいかに重視しているかを深く理解することができ、実際に触れてみたいという期待感が一気に高まりました。
また、大変印象的だったのが、セッションが日本語で行われたことです。 アンソニーさんの底知れないチャレンジ精神に感銘を受けましたし、私自身も現状に満足せず、より積極的に新しいことに挑戦していかねばならないと、改めて決意を新たにする思いでした。
おわりに
運営陣と登壇者の皆様からは、参加者を楽しませようという多角的なアプローチと、技術に対する熱い情熱を強く感じました。本当に素晴らしいイベントでした。 このイベントに参加したことで、「明日からすぐに試したい」と思えるような具体的なワクワクと、開発の醍醐味を改めて思い出すことができました。 このような刺激的で貴重な機会を提供してくださった運営に関わる全ての方々に、心より感謝申し上げます。
来年以降も、今回と同じ、あるいはそれ以上の熱量を保つコミュニティであるために、私たち参加者もその一員として、日々の開発に邁進し、コミュニティを共に盛り上げていきたいと強く決意しました。
We are hiring!!
最後に、クラウドワークスでは共に働く仲間を募集しております。
ご興味のある方は以下のリンクから採用情報をご確認ください。
