Vue Fes Japan 2025 After Talk
https://gyazo.com/2fd181dfa018c57757f8320cfa448cbd
結論：自由度を下げる
世間一般のUIライブラリは汎用性が高い
コンポーネントの組み合わせを間違う、イベントハンドリングが混乱する、キーボードで操作できない、デザインが崩れる
汎用性が高いのは自由度が高い
機能開発ではそれが重要ではない
1コンポーネントに寄せる
リブランディングしたので去年を超える必要があるプレッシャー
デザイナーが多忙
見越したアーリースケジュール
グッズまで作るのは良かった
他チームとの連携が多くなって大変だった
プログラムページが大変
セッション名が長い
サブタイトルがある
トーク「複数チーム並行開発下でのコード移行戦略：手動 Codemod から『生成 AI 活用』への進化」
既存の技術スタックが開発効率のボトルネックになっていた
Nuxt 2がEoL
３つの複数チームが並行して同じアプリケーションの機能開発
Vueコンポーネント約800ファイル
コード総行数約38万行
基本方針を立てる
変更料を最小化
マージのコンフリクト避ける
切り戻しができるようにする
移行手段１
互換レイヤーを自作
互換関数を作る
移行手段２
ASTライブラリを活用してCodemodエンジンを実装
価値
Codemod自体にテストを記述可能
スナップショットで検証できる
テストケースを追加して安全なものをつくっていく
安全なリリースコントロール
1. スクリプト作成・レビュー
2. スクリプトの適応
生成AIとの連携
誰もが使えるリファクタリングできるようにする
生成AIにCodemodスクリプトを作るようにする
非決定論性を制御できる
テストで品質担保できる
実行時の決定論性が担保できる
トーク「『AIコード修正ゲーム』のプレイ記録から得た気づき」
不完全なコードと期待する結果が出ているのをAIによってコードを修正するゲーム
結論
問題設定は適切なサイズ感
指示出しは文脈を含めておく
Nuxt 4とNuxt 5は分けるようにした
v3→v4、v4→v5に２段階アップデートでスムーズになれる
変更点（変更される可能性あり）
今はViteDevServerのインスタンスをクライアントとサーバーごとに作成している
環境設定はapplyToEnviromentで行う
クライアントとサーバーを単一のviteDevServerインスタンスを使用する
Dev Server起動がログが完結になる
oxc
Linter
format
oxlintを試す
oxlint-migrate（完全移行）
eslint-plugin-oxlint（ESLintと併用するパターン）
ルールの重複防止目的
oxlint.buildFormOxlintConfigFileはoxlintrc.jsonを読み込む
導入結果
ESLint単体 約21秒
ESLint+oxlint 約20秒
oxlintは出力結果が視覚的にリッチなものになった
具体的な場所もわかりやすいので良い
トーク「Vueで学ぶコンピューターサイエンス入門〜リンクリストとキューでリアクティビティを捉える〜(仮)」
トーク「最近の Storybook を使いこなす」
これまでの課題
Control定義が大変
8.0より自動生成
vue-docgen-apiからvue-component-metaへの移行
VSCodeでスニペット入力してほぼ完成できるように設定している モック作成が大変
sb.mock APIでモック定義できる
spy: trueを設定
テストの実行環境
Vitestによるテスト実行
CLI実行
CIでも動かせる
UI上でも起動可能
最近の機能
タグ機能の強化
フィルタリング
タグでテストスキップするようにできる
現在はアルファバージョン
仕様は変わる可能性あり
nitropackからnitroへ
Web Standardのリクエスト・レスポンス
サーバーエントリの提供
レンダラーの提供
Viteプラグイン提供