はじめに
こんにちは、ホワイトプラスでエンジニアリングマネージャーをしている仲見川です。今回は、弊社が運営する宅配クリーニングサービス「リネット」のフロントエンド開発について、レガシーコードベースからモダンな技術スタックへの移行戦略と、SPA/MPA共存環境でのモダナイゼーションの現状と取り組んでいる事例をご紹介します。
リネットでは、長年にわたって複数のフロントエンド技術スタックが共存する環境で開発を続けてきました。SPA（Single Page Application）とMPA（Multi Page Application）の両方を運用する中で、モダンな技術への移行を進めつつも、レガシーなコードベースとの共存を図る必要があります。
本記事では、フロントエンド領域の現状を整理し、今後の改善の方向性を共有します。
現状のフロントエンドアーキテクチャ概要
リネットのフロントエンドは大きく2つの領域に分かれています：
- SPA領域: React + Webpack(一部Vite)を中心とした比較的モダンなスタックで開発されるアプリケーション
- MPA領域: Laravel + Blade/Smartyを中心とした従来型のWebアプリケーション
それぞれの領域で異なる課題と取り組みがありますが、共通して目指しているのは「保守性の向上」「開発体験の向上」「セキュリティの強化」です。
SPA領域の現状
Good（良い点）
モダン化の進捗
新規プロジェクトでは、最新の技術スタックを積極的に採用しています。
- 工場で使用するとある作業画面: React 19 + Vite 6 + TypeScript + Tailwind 4 + Mantine + Jotai + React Router 7という最新のスタックを採用。さらに、Vitest/Playwrightによるテスト、Storybookによるコンポーネント開発、Biomeによるコード品質管理まで整備済みです。vite-tsconfig-pathsやプロキシ設定により、開発体験も良好です。
- お客様が注文をする画面: デザインシステムを元にしたCSSをViteで出力し、httpdocsへ配備する動線が確立されています。
レガシー統合の工夫
既存のPHPアプリケーションと共存するために、ストラングラーパターンを採用しています。
- 将来的なSPA化を見据えつつViteの
base/outDir設定やproxy設定により、既存のhttpdocs/PHPと共存する並行運用スタイルが確立されています。 - SPA一括ビルドの仕組みにより、複数アプリをCI/ローカルでまとめて処理可能になっています。開発環境の起動時に自動でSPAビルドを行うオプションも用意しています。
品質・規約の整備
- 多くのプロジェクトで型・Lint・テストが整備されています（Biome/Prettier/Vitest/Storybook/Playwright）。
- Nodeバージョンやnpm・Yarnのlockファイルで環境を固定しています。
More（改善の余地）
スタックの断片化・老朽化したスタックの残存
複数の技術スタックが同居している状態が続いています。
- 現状: Grunt、Webpack + React 17、jQuery/Bootstrap、AngularJSが混在しています。これにより保守コスト・脆弱性リスク・知識分断が増大しています。
- 対策: SPAへの集約を含めてモダナイズの検討を行っています。
ツール標準の不一致
- 現状: Lint/FormatterがBiomeとESLint+Prettierで混在、テストもJest/Vitestが混在しています。
- 対策: チーム単位で横断の共通プリセットを定義し統一して行きたいと考えています。
依存更新・セキュリティ
- 現状: Renovateによる更新は限定的で追いついていません。
- 対策: E2Eの整備を進めリグレッションテストの工数を下げることで依存パッケージの更新負荷を下げ、滞りなく更新して行きたいと考えています。
パフォーマンス・最適化
- 現状: チャンク分割が行われておらず読込とビルドのパフォーマンスが充分ではない部分があります。
- 対策: チャンク最適化を進めたいと考えています。
開発体験・運用
- 現状: devサーバ・プロキシ・
.env命名規則がパッケージごとに微妙に異なります。 - 対策: 統一されていない部分を規約化、使用するビルドツールの統一などを進めワークスペース化も視野に入れて考えています。
MPA領域の現状
アーキテクチャ概観
MPA領域は、Laravelを基盤とした従来型のWebアプリケーションです。
- テンプレート:
- Blade: 新しく作成する画面、メールについてはBladeテンプレートを使用。
- Smarty:
ytake/laravel-smarty経由で.tplを解釈。 - 生PHP: ごく一部の画面で使用されています
- アセット管理:
- Grunt/Compass/Sassでcssを生成
- Tailwindにてtemplateをスキャンしてページ別CSSを生成・設置
Good（良い点）
レガシー互換を保った移行路
BladeとSmartyの併用により、旧来テンプレート（.tpl）を稼働させつつ、新規/更新ページはBladeで実装可能になっています。段階的な移行が可能な設計です。
アセットビルドの仕組み化
Grunt/Compassによる共通CSS生成、Tailwindでサービス別CSSを生成する仕組みが整備済みです。ビルドプロセスに組み込まれています。
More（改善の余地）
テンプレートの多態性による複雑化
- 現状: Blade/Smarty/生PHPが混在し、記法・エスケープ・部品化の規約が不統一です。保守性・レビュー性・XSSリスク管理が難化しています。
- 対策: SmartyのBladeへの置き換えプロジェクトが進行中。
フロント資産パイプラインの旧態化
- 現状: Grunt/Compass・jQueryプラグイン等の旧来資産が多いです。Tailwindもv3とv4系が混在し、デザイントークンの重複/逸脱が起こりやすい状態です。
- 対策: jQueryの廃止、CSSをTailwind v4で作成したデザインシステムのコンポーネントライブラリへの統合を進めていきたいと考えています。
まとめ
リネットのフロントエンド領域は、モダンな技術スタックへの移行が進む一方で、レガシーコードとの共存も求められる複雑な状況にあります。
Good（良い点） として、新規プロジェクトでは最新の技術スタック（React 19 + Vite 6 + TypeScript等）を採用し、デザインシステムの整備やレガシー統合の工夫などが進んでいます。
一方で、 More（改善の余地） として、スタックの断片化、ツール標準の不一致、依存更新の管理、ビルド/デプロイの一貫性など、多くの課題が残されています。
これらを解決するため、従来はフルスタックでサーバーサイドからフロントエンドまで対応していた開発チームからフロントエンドの責務を分離してフロントエンドチームを新設し段階的な移行戦略を定め、優先順位をつけて改善を進めて行きたいと考えています。
レガシーコードベースとの共存は多くの開発組織が直面する課題ですが、段階的なアプローチで着実に改善を進めていきたいと考えています。同じような課題に取り組まれている方や、ご意見やご質問がある方は、ぜひお話できればと思います。採用ページよりお気軽にカジュアル面談をお申し込みください。
引き続きリネットの開発と開発のナレッジ紹介をしていきますので、次回の記事もお楽しみに。
