こんにちは、 id:sezemi です。 秋に最終巻が出た アオアシ のラストが良すぎてロスになっていた時期を過ぎ、もう年末ですね。 年末といえば恒例となった年一刊行の フットボールネーション の新刊です。 19 冊のふりかえりを始めております。
さて、遅くなってしまいましたが、 10/25 に開催された Vue Fes Japan 2025 にアンドパッドはゴールドスポンサーとして参加 and ブース出展してきました ! すでに多くの参加レポートが出ていますが、本当に楽しかったですね。 アンドパッドの面々も存分に楽しめました。
今回はその楽しかった Vue Fes Japan 2025 のふりかえりということで、アンドパッドの Vue エンジニア、六角と岡田とともに、トークや感想、ブースの様子をレポートします !
印象に残ったトークをふりかえり
【パネルディスカッション】 フロントエンドの未来を語る ─ React/Vue.js/Svelte が見据える次の 10 年
各コミュニティから豪華メンバーが集結したパネルディスカッション。 会場は満席で立ち見の方もいらっしゃるほどでした。
フロントエンドの未来を語るということで、やはり話題の中心は AI。 AI との協業やそれによって求められるフロントエンドエンジニアのスキルの変化について、考え方の違いが見られて非常に面白いものでした!
(六角)
生成AI時代のWebアプリケーションアクセシビリティ改善
Webアプリケーションのアクセシビリティを生成AI技術で改善する手法を紹介するセッションでした。 こちらのセッションも人気が高く、満席で立ち見の方もいらっしゃいました。
このセッションで特に印象に残ったのは、人間が書いたコードとLLMが生成したコードのどちらがアクセシビリティ違反が少ないかを比較・検証した結果です。 まだ人間が書いたコードの方が違反が少ないとのことでしたが、LLMに生成させたケースの中では、「特にアクセシビリティの指示を与えず単純にコード生成を行う」場合が、最も違反が少なかったそうです。 私自身の普段の経験では、生成AIには細かい指示をした方が期待通りの結果を得られることが多かったため、この結果は意外なものでした。
この他にも、セッションでは複数のMCPサーバーや、検証ツールが紹介されていて、とても勉強になりました。また、AIの活用により、アクセシビリティ対応のハードルが下がり、以前より取り組みやすくなっているという印象を受けました。
(岡田)
Vue Fes Japan 2025 の思い出
Vue コミュニティの盛り上がりと暖かさを再認識
個人的に久しぶりのイベント参加でしたが、非常に楽しい時間を過ごせました!
クリエイティブスポンサーのIE3様による、公式サイトやカンファレンス全体のデザインがとても素敵でした。 テンションが上がって、その場で限定オリジナルグッズのステッカーやクッションを買ってしまいました! タトゥースペースや縁日コーナーなど、様々な方法でイベントを楽しめるので、技術イベント初心者の方にもお勧めできるイベントだなと思います。
スポンサーブースでは黒板チームのメンバーとして黒板AI作成機能のデモを行ったのですが、 本当にたくさんの方がスポンサーブースを訪れてくださり、細かいところまで説明するには時間が足りないほどでした。 Vueコミュニティの盛り上がりを再認識しました!
ANDPADにおけるAI関連の機能開発について、もっと詳しく知りたい方はぜひカジュアル面談でお話ししましょう。
(六角)
Vue コミュニティの多様性を体感！
Vue Fesのような大規模な技術イベントへの参加は初めてでしたが、タトゥースペース、縁日、オリジナルカクテルなど楽しい企画が盛りだくさんで大いに楽しみました！
特に印象的だったのは、参加者の皆さんの国籍、性別、年代が様々で、このコミュニティの多様性を強く感じられたことです。同時通訳が実施されているセッションもあり、国際的な雰囲気に刺激を受けました。
スポンサーブースでは、ANDPADのサービスに興味を持って話しかけてくださる方もいらっしゃいました。AIを使った開発について尋ねられることもあったため、今後はテックブログなどを通じて積極的に情報発信していきたいと改めて感じました。
(岡田)
全問正解率 12% だった アンドパッド Vue クイズの解答・解説を発表 !
ここからは採用広報の id:sezemi からアンドパッドのブースを紹介します。
今回は各プロダクトで使用しているフレームワーク (Nuxt / React Router / Vite Ruby / Next.js) を紹介するのと合わせて、アンドパッドの Vue エンジニアが考えた Vue のクイズを 4 問出題しました !
クイズはできるだけ解いた楽しみを感じてもらえるよう、 初級 ~ 中級 の難易度設定をしたつもりでしたが、 Vue 以外を使用しているという方が多く、全問正解者は 12% でした。 なかなかクイズの難易度設定はムズいですね。
では、どんなクイズだったのか、解説します !
Q 1.
Vue 3 の Composition API で、プリミティブ値（数値や文字列など）をリアクティブに管理したい場合に最も適切な関数はどれですか？
- reactive
- ref
- watch
- computed
解答
b
解説
Vue 3のComposition APIでプリミティブ値（数値・文字列・真偽値など）をリアクティブに管理したい場合は、ref を使うのが最適です。
ref はプリミティブ値をラップしてリアクティブなオブジェクト（.valueでアクセス）に変換します。
reactiveはオブジェクトや配列など複数プロパティを持つ値向けです。プリミティブ値には使えません。watchは値の変化を監視するための関数で、値自体をリアクティブにするものではありません。computedは他のリアクティブ値から導出される値を定義するための関数です。
初級のクイズだったので、正解率は高めだと思っていたのですが、 67.4&% と伸び悩む結果でした。
Q 2.
Nuxt 4 の最新バージョンが対応していないバンドラーは次のうちどれでしょう？
- Vite
- Webpack
- Rspack
- Turbopack
解答
d
解説
Nuxt 3 のデフォルトバンドラーは Vite ですが、Nuxt 2 から継続して Webpack がサポートされており、 Nuxt 3.14 では Rspack に対応する @nuxt/rspack-builder がリリースされました。
Turbopack は Vercel によって開発が進められており、現時点では Next.js 専用のようになっていますが、NuxtLabs の Vercel 合流というニュースもあり、もしかしたら将来的に Turbopack をサポートすることがあるかもしれません！
Nuxt 4 のことを知っていれば、というところでしたが、こちらは正答率 40% とやや低めの正答率でした。
Q 3.
Vue 3.x で、子コンポーネントに名前付きスロットを渡す側の書き方として正しいのは次のうちどれでしょう？
<BaseLayout><template v-slot="header"><p>header</p></template></BaseLayout><BaseLayout><template name="header"><p>header</p></template></BaseLayout><BaseLayout><template #header><p>header</p></template></BaseLayout><BaseLayout><p #header>header</p></BaseLayout>
解答
c
解説
名前付きスロットを渡す側の書き方で認められているのは、 <template v-slot:header></template> または省略記法の <template #header></template> のどちらかです。
- v-slot="header"は、名前の指定ではなくスコープ付きスロットとして子のデータに親がアクセスするための変数の宣言方法です。
v-slot="slotProps"やv-slot:header="headerProps"のように組み合わせて使います。 - name="header"は、スロットを受け取る子コンポーネント側で、
<slot name="header">のように指定する際の書き方です。 - デフォルトスロット以外の名前付きスロットでは、
<template>タグを省略することはできません。
スロットの記法は間違えやすいので、Volar や eslint-plugin-vue の valid-v-slot ルールでの自動チェックを有効化するのがオススメです！
Vue 3 で書いている人であればという出題でしたが、こちらも 39.6% と低めの正答率でした。
Q 4.
Vue.js でリスト表示される多数の子コンポーネントを開発しています。 親コンポーネントのデータが更新されるたびに、実際には変更がないはずの子コンポーネントまで再レンダリングされてしまい、アプリケーション全体のパフォーマンスが低下しています。
この 不要な再レンダリングを抑制 し、パフォーマンスを最適化するために、親から子への props の渡し方として最も効果的なアプローチはどれですか？
- 子コンポーネント側で props の値を watch で常に監視し、以前の値と手動で比較してからコンポーネントの更新を判断する。
- すべての子コンポーネントに v-once ディレクティブを適用する。
- props の数を減らすため、子コンポーネントが必要とする複数のデータを1つの大きなオブジェクトにまとめて、単一の prop オブジェクトとして渡す。
- オブジェクトとしてまとめて渡す代わりに、子コンポーネントが必要とするデータ（文字列、数値、真偽値など）を、それぞれ独立したプリミティブ型の props として渡す。
解答
d
解説
この問題は実は過去のテックブログから問題をデフォルメしたもので、実際に起ったパフォーマンスの問題がテーマでした。 ぜひ解説がてら、こちらのテックブログをご覧ください !
うれしいことに、こちらの正解率は 57% と高く、アンドパッドの技術課題に挑戦する楽しさを感じてもらえたかなと思っております。
まとめ
アンドパッドの面々も楽しんだ Vue Fes Japan 2025 の参加 and ブース出展レポートでした !
おそらく参加者だけでなく運営の皆さんも楽しめたのか、先日アンドパッドも共催した、スポンサー 7 社の非公式のアフターイベント Vue Fes Japan 2025 After Talk には運営の方々もお見えになり、とても楽しかった模様を聞けました。 2026 もやっていくぞ ! ということなので、今から楽しみですね !!
アンドパッドでは Vue のエコシステムを大好きな Vue エンジニアを歓迎しております !
