LAPRASのフロントエンド改善活動ふりかえり [2024年]

• URL: https://zenn.dev/lapras_inc/articles/lapras-frontend-2024
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: フロントエンド専任エンジニアがいないLAPRASで、有志エンジニアが週1回集まるフロントエンド改善委員会を運営し、2024年に実施した複数の技術的移行をまとめた記事。JestからVitestへの移行でCIテスト実行時間が約1/3に短縮、webpackからRspackへの移行でビルド時間が約1/2に削減、SWRVからTanstackQueryへの非同期状態管理の移行も実施した。TypeScript型エラーの継続的解消やE2Eテスト（Vitest Browser Mode）の試験導入、Storybookの6系から8系へのアップデートも進めている。

詳細

組織背景

• フロントエンド専任エンジニア0人、2015年ファーストコミット、TypeScript + Vue3のSPA
• 有志のフロントエンド改善委員会が週1回1時間集まって改善活動を継続

完了した主な移行と成果

• Jest → Vitest: CIフロントエンドテスト実行時間が約1/3に短縮、ES Modulesのパッチ不要に
• SWRV → TanstackQuery: SWRVのメンテナンス停滞・機能不足が移行の動機
• webpack → Rspack: devビルド18.0s→8.0s、prodビルド24.5s→8.7s（Apple M1 Max）
• Storybook 6系 → 8系: Vue CLIビルドからViteビルドへも同時移行
• script setupの布教: Option API・Composition APIが混在していた状態をCoding Guideで整理

進行中・検討中

• Vuexからの非同期状態管理移行（TanstackQueryへ）
• yarn 1系からnpmへの移行（モジュール解決依存問題が障壁）
• AxiosからFetchへの書き換え
• E2Eテスト導入（Vitest Browser Mode試験導入中）
• Core Web Vitalsの改善（mizchiの公開パフォーマンスチューニング動画で指摘）

TypeScript対応

• PRごとに型エラー差分をGitHub ActionsでコメントするCI整備