SaaS 管理画面のフロントエンド刷新
jQuery で作られた管理画面を TypeScript + React に段階的に置き換え、機能追加のリードタイムを短縮しました。
課題
10 年運用されてきた管理画面が jQuery とサーバーサイドテンプレートで構築されており、画面ごとに実装方針がばらついていました。1 機能の追加に 2〜3 週間かかり、リリースのたびに既存画面のデグレが発生している状態でした。
進め方
全面書き換えではなく、画面単位で置き換える方針を取りました。既存のテンプレートの中に React のマウントポイントを置き、新しく作る画面から順に移行しています。
- 移行前に Playwright で主要導線の E2E テストを整備し、デグレを検知できる状態を作った
- 共通コンポーネント（テーブル、フォーム、モーダル）を先に設計し、画面実装のばらつきを抑えた
- ビルドを Vite に統一し、ローカルの反映を数秒に短縮
- GitHub Actions で型チェック・Lint・E2E を PR ごとに実行
結果
- 移行済み画面での機能追加リードタイムが平均 2.5 週間 → 4 日に短縮
- リリース起因の障害報告が月 3.2 件 → 0.4 件に減少
- 社内メンバーが引き継げるよう、設計判断をドキュメントとして残して納品