Mobile Factory Tech Blog

技術好きな方へ！モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします！

Vue Fes Japan 2025 行ってみた！ 〜初めての技術カンファレンス〜

イベントレポート Vue.js

概要

こんにちは、駅メモ！開発チームエンジニアの id:hayayanai です！

2025/10/25 に開催された Vue Fes Japan 2025 の参加レポートです。

講演を聴いたり会場を見て回ったりして、業務で活かせないかな〜と考えたことを書き残しています。 スライドから得られた情報のメモと、感想が混じっています🙇

入口のオブジェ

Vue Fes Japan 2025 - Vue Fes Japan 2025 - タイムテーブル

参加を決めた理由

ふと技術カンファレンスに行ったことないなと思い、どんな感じなのか興味が出ました。 イベント後に公開される資料を見ることはありますが、リアルタイムで聴くのとはまた違うかなと。 そんなときにVue Fesの開催情報を見かけました。

駅メモ！のフロントエンドでVue.jsを使っているのもあり、トレンドや社外の情報を知る良い機会になると考えました。 チームのSlackで情報を共有したところ、興味のあるエンジニアが数人集まったため、皆で参加することにしました。

さらに、自身が技術広報を推進するチームのメンバーでもあるので、技術イベントでスポンサーがどんな取り組みをしているかを見たいなと思いました。

聴いた講演

オープニング

  • カッコいいカウントダウン映像でスタート
  • 来場者が800人超えとのこと
    • いくつか部屋があるからかそこまで人数多いとは感じなかった
  • 全ての発表で英語と日本語で文字起こし+同時翻訳がある

キーノート

  • Babel, gulpは古いという話
    • プロダクトから剥がしたいなと強く思った
  • ナウいツールたちの話
    • Rust, Go製のツールが強くて高速
  • そしてVite Plus
    • デファクトになってほしい気持ち
    • ただエンタープライズ向けには有料だったり
    • 今はOSS中心のツールを利用しているわけですが、開発部分で商業ツールに依存するのはどうだろう？という雑談をした
      • Perforceは有償ですけど業界によってはGit同様に利用されているのだから、値段次第で選択肢には入ってきそうという気持ち
    • リリースされたら試したいけど、先に古いものの整理か
      • アーリーアクセスちょっと気になってる

webpack 依存からの脱却！快適フロントエンド開発を Viteで実現する

  • 10年という歴史があるところも含め、自分が関わっているプロジェクトと似た課題があったような印象
    • MPAで100以上のページが存在
    • HTMLテンプレートに対してcreateAppでVueコンポーネントをマウントするところ
  • ViteのBackground Integration など、設計的にも今後に活かせそうな部分が多いと感じた
  • ベンチマーク指標は以下とのこと
    • ビルド時間
    • 開発サーバー起動時間
    • HMR反映時間

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

  • 既にストーリーを作成する運用があった状態
  • ストーリーを書くのを実装の前に持ってきたという変更
    • ストーリー書くときは、コンポーネントはスケルトンでpropsのみ
  • メリット
    • props ファーストで整理される
    • 実装忘れや認識ズレが消える
    • 表の情報と、裏のロジックが整理される

設計やデータの流れが実装前に整理されそうなのが良さげに感じた。

昼食

  • お弁当などは無いので近くで食べることに
    • （お弁当が出るタイプのカンファレンスもあるということを知る）
  • 会場のビル内でナンとダルカレーを頼んだ
  • 土曜日だからかレストラン全然空いてなかった 😇

ナンとダルカレー

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

  • WCAGについて
  • コード生成手法の比較
    • 指示なし
    • Zero-Shot: 配慮するように指示
    • Few-Shot: 正誤コード例を提示
    • Self-Criticism: 生成したコードをレビューし１回修正
  • LLM > 人間でアクセシブルなコードが作れる
  • 特に指示しないほうが良い結果になった
  • Few-Shotは一番悪かった
    • AIに悪い例与えると逆に悪いコード書くみたいなこと、たまによくある。
  • 過剰にアクセシビリティ情報を適用して違反が増えたことも
    • 過剰なaltとか自分も見覚えあったので共感
  • WAI-ARIA対応
  • Chrome DevTools MCPより、Playwright MCPのほうがアクセシビリティのチェックには現状有用
  • Linterでもチェック可能
    • eslint-plugin-vuejs-accessibility
    • Markuplint

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

Vitestの中身の話

  • Browser Modeだと実際にブラウザ上でテストが動くのを見られる
    • Vitest v4でVRTもできるようになったし、どんどん便利になってる印象
  • isolationやpoolの話
    • 今のところデフォルト設定で速度は困ってないなと
    • 今後高速化考えるなら、今のうちに他のオプションで動くような書き方にするのもアリかも？と思ったりした

Vue で 3D を楽しむ

  • スライドに合わせて投票ができて、画面に反映される仕組み
  • リアクションも送ることができて、上から絵文字が降ってくる 😄

投票画面

Vueで3D扱うなら…という紹介があって、TresJSでの実際の例に進んだ

Understand 3D Scenes in Vue

型など開発する上で色々問題があったけれど…

glTFのオブジェクトの例

それを解決するツールキットを作ったとのこと。

GitHub - toddeTV/gltf-type-toolkit: This plugin generates type-safe glTF file representations in TypeScript and optimizes the loading and bundling of models in web projects, while being bundler-agnostic (Vite, Rollup, Webpack, esbuild, Rspack, ...).

  • デモの中で実際にFirefox, Chromeの違いが出ていて、動作確認の重要性がわかった
  • 影やライティングなど、細かい部分で使い方は把握する必要がありそう
  • パフォーマンスやバンドルサイズが気になるところ
    • 基本2Dなプロジェクトに、ちょっとリッチな表現を行うために3Dを導入するとかあり？
  • 聴講者とコミュニケーション取れる感じの発表、流行っていく？

Vue.jsでつくる実験映像

  • 映像の制作ツールをVue(PWA)で作っている
  • UIツールも作っている
  • 直接Vueを使う場面もある
  • 目的達成のための手段としてのVue（プログラミング）の例をたくさん見られた
  • カメラ活用含め、ブラウザやnodeで触れられるAPI増えてるなという印象
  • 映像作ると聞いてProcessingで考えが止まっていたけど、もっと色々できるなと気付かされた

AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録

  • プロジェクトの進め方
  • AI時代の新人育成
    • ペアプロでどんなプロンプト書いてるか見るとか
  • AIの活かし方

など、結構盛りだくさんだった

  • Composition API化が全120ファイルで２週間
    • 昔一度検討して実行しなかったことがあるけど、やってみて駄目だったらブランチごと捨てるというのも良いなと思った
      • 最近のツールなら膨大な作業も完遂しやすそう
  • 現在Claude Code使ってるのもあって、tsumikiフレームワークが導入しやすそうだったので取り入れたいなと思う

ライトニングトーク

下記以外にもいくつか聴きましたが、気になったものを少しピックアップ

アウトプットから始めるOSSコントリビューション〜eslint-plugin-vueの場合〜

  • きっかけって大事だなと
  • OSSで一個バグ見つけてるの思い出したから、PR作ってみようかなと思った

個人でデジタル庁のデザインシステムをVue.jsで作っている話

  • React+Tailwindしか存在しないと思ってたので、Vueのみで作られてるものがあるのは学び
  • デジタル庁のデザインシステムを使っておけば、大きな間違いは無いよなという謎の信頼を持っている

React Nativeならぬ"Vue Native"が実現するかも？新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう

chocoZAPサービス予約システムをNuxtで内製化した話

  • 戻るボタン対応の話が、共感の嵐だった
    • あれは大変…。
    • 自前で履歴管理のスタックを用意したとのこと

Introducing Vite DevTools

満員で入れず。そんなことあるんだ

Vue Quiz

  • 大敗北
  • WatchEffectとflushオプションは何かに使えるかも？
  • 自分の経験したプロジェクトもそうだけど、reactiveじゃなくてref使ってる方が多いみたい？

スポンサーブース

主に昼休憩で回ったからか結構混んでた。 時間の関係でくじ引きまでできず…。

見かけた出し物：

  • Vueクイズ
  • バグを見つけよう！
  • くじ引き ウェブアプリ
  • Xのフォローやポストで何かもらえるよ系
    • 2次元コードだけじゃなくて、NFCタグでXアカウントに飛べるところも
  • シール貼ってアンケート
  • 付箋書いてボードに貼るタイプ
  • ビラ配布

スポンサー繋がりで気付いたこととしては、企業Tシャツ着て講演聴いてる方もいらっしゃったなと。

頂いたラムネを食べながらこのドキュメントを書き上げました。

懇親会

０回戦敗退。

チケットは早めに取ろう。 Vue FesのXもフォローしたし来年は大丈夫なはず…！

感想

  • Viteとその周辺がトレンド
  • スポンサーしている会社は記憶に残った
  • 自分はインプットもアウトプット、どっちも足りてない
    • もう少し体系的に学んでいきたい
    • 登壇できるまでの心理的・技術的ハードルを超えていきたい
  • 会場が東京駅周辺で便利
  • オフラインの技術イベント初参加だったけれど、しっかり楽しめた
    • メモを取る端末どうしようかなという悩みは生まれた
  • 登壇者と話す時間も確保されていて、色々質問できて良かった
    • オンラインでも質問できることはあるけど、直接話せるのはやはり良い

モバファクでは中途採用・新卒採用ともに絶賛募集中です。 会社の情報については、モバファクブログでも発信しています。 技術好きな方、モバファクにご興味をお持ちの方は、ぜひご応募ください！