飲食 / アプリ

オフショア製の飲食店アプリを、Laravel + React + Inertia で内製品質に作り直し

外食チェーン

オフショアで開発・運用されていた飲食店向けアプリと管理画面を、Laravel + ReactJS + InertiaJS + TypeScript + Docker でリプレイス。コードベースの読みやすさと運用安定性を取り戻した。

保守・リエンジニアリング

Before / After

プロジェクトでの変化

障害対応時間

短縮
機能追加リードタイム

短縮
コードベース

TypeScript化で型整備

Challenge

課題

既存システムは仕様書も乏しく、修正のたびに別の場所が壊れる状態。オフショア側との時差・言語のギャップもあり、軽微な修正にも数日〜数週間かかっていた。コードベースは型がなく、依存関係も明文化されていないため、社内エンジニアが手を入れることも難しい。リリースのたびに障害が起き、その対応で次のリリースが遅れる悪循環が常態化していた。「修正できる人がいない」状態を根本的に解消するため、コードベースと運用フローの両方を作り直す必要があった。

Approach

アプローチ

01 現行アプリのユースケースを画面単位でリバースエンジニアリング
02 Laravel + Inertia + React で「サーバ起点・SPA体験」の構成を採用
03 TypeScript化でAPI入出力を型で固定し、退行を防止
04 Dockerでローカル〜本番までの再現性を担保
05 社内エンジニアが手を入れられるよう、コードレビュー基準とドキュメンテーション方針を策定
06 リリースフローを GitHub Actions ベースで自動化し、手作業による事故を構造的に排除

Key Success Factors

成功要因

リバースエンジニアリング: 仕様書が乏しい現行アプリを画面単位で読み解き、機能の根拠を社内で説明できる状態に戻した。
Inertiaによる結合: InertiaJSでLaravel側ロジックとReact側UIを密結合させ、SPA体験とサーバ起点の分かりやすさを両立した。
TypeScript型での退行防止: API入出力をTypeScriptで型固定し、修正のたびに別箇所が壊れる状況を構造的に解消した。
再現可能な開発環境: Dockerでローカル〜本番の差異を抑え、調査と修正の往復コストを下げた。

Solution

ソリューション

InertiaJS をハブにして、Laravel側のロジックとReact側のUIを密に結合させつつSPA的な体験を実現。TypeScriptで型を共有することで、リプレイス後の機能追加・改修コストを下げた。リプレイス後は社内エンジニアが直接コードに触れられる状態となり、障害対応時間と機能追加リードタイムが大きく短縮。「どこに何があるか分かる」コードベースに戻った。