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

プロジェクトでの変化

• 障害対応時間
  短縮
• 機能追加リードタイム
  短縮
• コードベース
  TypeScript化で型整備

課題

直すたびに、別のどこかが壊れる。仕様書もほとんど残っていませんでした。オフショア側とは時差と言語の壁があり、ちょっとした修正でも数日から数週間かかります。コードには型がなく依存関係もどこにも書かれていないため、社内のエンジニアが手を入れることもできません。リリースのたびに障害が出て、その対応で次のリリースが遅れる。この繰り返しになっていました。修正できる人がいないという状態を断ち切るには、コードベースと運用の流れを両方作り直すしかありませんでした。

アプローチ

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

成功要因

リバースエンジニアリング

仕様書が乏しい現行アプリを画面単位で読み解き、機能の根拠を社内で説明できる状態に戻しました。

Inertiaによる結合

InertiaJSでLaravel側ロジックとReact側UIを密結合させ、SPA体験とサーバ起点の分かりやすさを両立しました。

TypeScript型での退行防止

API入出力をTypeScriptで型固定し、修正のたびに別箇所が壊れる状況を構造的に解消しました。

再現可能な開発環境

Dockerでローカル〜本番の差異を抑え、調査と修正の往復コストを下げました。

ソリューション

InertiaJS を間に置き、Laravel のロジックと React のUIをつなぎながらSPAの体験を作りました。型は TypeScript で共有します。ここが効いて、後から機能を足すときの手戻りが目に見えて減りました。作り直した後は社内のエンジニアが直接コードを触れるようになり、障害対応も機能追加も短くなっています。どこに何があるか分かる。その状態に戻せたことが、いちばんの成果です。