Vue Fes Japan2025 参加レポート【後編】

はじめに

アイスタイル Advent Calendar 2025 の18日目の記事です🎄

こんにちは、エンジニアの伊藤(itohis)です。
この記事は、Vue Fes Japan2025 参加レポート後編となります。
まだ読んでいない方は、是非前編もお読みください！

Vue Fes Japan2025 参加レポート【前編】

前編から続きます。
itohisからもセッションを1点ご紹介し、アフターパーティの様子をお届けできればと思います。

印象に残ったセッション

最高の DX -Nuxt Typed Router と Pinia Colada で実現する次世代

株式会社メイツ　ナイトウコウスケさん
登壇資料: https://naitokosuke.github.io/vue-fes-japan-2025-slide/1
Zenn: https://zenn.dev/kosuke_naito/articles/making-vuefes2025-dx-ntr-pc

開発者目線でのDX「最高のDX＝なんかいいな」
このテーマのもと開発体験DXの視点で、Nuxt Typed RouterとPinia Colada という2つのライブラリについて紹介がありました。
認知負荷の最小化、本質的な問題解決へ注目することで良いプロダクトにつながるというメッセージを感じた発表でした。
今回はNuxt Typed Routerの紹介を一部引用してご紹介したいと思います。

Nuxt Typed Router

https://nuxt.com/modules/typed-router

コミュニティ製のサードパーティモジュールです。
簡単言えば、ルーティング（ページ遷移）をTypeScriptで型安全にするための仕組みです。
デフォルトでNuxtはPagesディレクトリの構造がそのままルーティングを示し、ルーティングは単なる文字列（String）として扱われます。
これを、router.pushやNuxtLinkで指定する際は、存在しないパスを書くと実行するまで正しいルーティングかわかりません。

例として、以下のコードはIDEの補完も効かず、Typoにも気が付けない状態です。
本来のルートはuser ですが、usrとなっていたとします。

const router = useRouter()
router.push('/usr') // Typoしていても気づかない

型生成

Nuxt Typed Routerを導入すると以下のような型が生成されます。
(登壇資料より引用)

// @typed-router エイリアスから利用可能
import { RoutesNamesList, RoutesParamsRecord } from "@typed-router";

// ルート名のユニオン型
type RoutesNamesList = "index" | "user" | "user-id" | "login";

// パラメータの型辞書
type RoutesParamsRecord = {
  index: never;
  user: never;
  "user-id": { id: string };
  login: never;
};

型安全の実現

型生成により、以下のような型安全なナビゲーションが実現されます。
登壇資料では更にパラメータの要否や型までルール化しているのがわかります。(登壇資料より引用)

// RoutesNamedLocations - router.push() の型安全化
type RoutesNamedLocations =
  | { name: "index" }
  | { name: "user" }
  | { name: "user-id"; params: { id: string } }
  | { name: "login" };

// ルート名に応じて params が自動的に切り替わる
router.push({ name: "user-id", params: { id: "123" } }); // ✓ OK
router.push({ name: "user-id" }); // ✗ エラー: params が必須
router.push({ name: "login", params: {} }); // ✗ エラー: params 不要

もちろん、先程例に出した/usrのようなTypoもエラーとなり気がつけるようになります。

const router = useRouter()
router.push('/usr') // エラーとなる

こんなことが嬉しい

こうした型安全の恩恵により、以下のような恩恵が受けられます。

チーム開発で新しいメンバーが入ってもルーティングの誤りに気づける
レビューコストの低減
IDEによるエラー表示、型の補完によるスムーズな開発

Nuxt公式のTypedPages

公式Nuxtが「TypedPages」という類似機能を提供していますが、これはあくまで実験的機能という立ち位置です。
また、NuxtというよりもVueを基準に作られているらしく、非公式のNuxtTypedPagesの方が安定しているとのことでした。
サクッと現場で導入できそうな内容で関心が湧きました、弊社でも使用してみようと思います。

他にもナイトウコウスケさんのセッションでは、状態管理ツールのPiniaから発展したPinia Coladaについての紹介もありました。
是非ご興味のある方は一読の価値があると思いますので、ご覧いただければと思います。

さまざまなセッションを聞いてみて

公式の枠を超えて

私は業務都合上レガシーなシステムを含む広い範囲を触ります。
単純に最新のフレームワークを採用しているプロダクト、サービスの開発できるとそれだけで満足してしまう節もあるのですが、こういった「さらに開発体験がよくならないか？」という視点で、今に満足せず公式の枠を超えて考えていく試み、余裕のような姿勢を感じます。
素晴らしいと思いますし、みんなが考えている当たり前から一歩進み壁を壊していきたいですね。

現場感

また、公式の「TypedPages」に対する非公式の「NuxtTypedRouter」という立ち位置から、現場での使用感を言葉で直接受け取れるのがカンファレンスの強みだなあと痛感しました。初参加でしたが、VueFesに参加して良かったです。
もちろん他にも、現場から馴染みが遠いセッションや、業務からは離れた芸術的ものなどもたくさんあり、色々な刺激受けて回ることができました。
また来たいな～

アフターパーティの様子

弊社は今年シルバースポンサーです。
アフターパーティに1名の招待枠をいただきましたので参加してきました！

盛り上がる会場

うおー！
なんか「小さくておしゃれなデザートかとおもったら塩っぱい肉料理だった…」みたいな非日常的で高級感あふれる食事やドリンクが用意されていてとても豪華。
Vueでお馴染みのグリーンのVマークロゴやPiniaのパイナップルのロゴをイメージしたカクテルなんかも用意されて皆ワイワイしていましたね。

※パネル写真を収めるイベントがあり楽しく撮りました。中央が伊藤、全員初対面ですがお酒の力でニコニコでワロタでした）

交流ありがとうございました

一人ぼっちで突撃となりましたが、みなさん気さくに声をかけていただき感謝です。
各社普段の業務でどのようにVueを使っているかなど、たくさん情報交換できて楽しく過ごせました。
お話相手になっていただいた方々、VueFesを開催運営していただいた方々、ありがとうございました！

弊社でもVueを盛り上げて行こうとおもいます！（来年はボードにアイスタイルのロゴ書くぞ）
以上VueFesJapan2025参加レポートでした👋