移行とは“再設計”ではなく“再解釈”である：Laravel + Vue2からReact + Serverlessへの構造的転換

## はじめに：移行は単なる刷新ではない

「Laravel + Vue2」から「TypeScript + React + Serverless」への移行。
それは単に“古い技術を新しくする”ことではない。

本記事では、この移行プロセスを **技術的視点** だけでなく、**構造的・思想的な転換**として捉え直し、
「レガシー」から「モダン」への道のりに潜む **設計哲学のシフト** を明確にします。

なぜ私たちはVue2とLaravelという強力なフレームワークの組み合わせに限界を感じ、
Reactとサーバーレスという一見バラバラな技術の組み合わせを選んだのか？
そこには単なるトレンドではなく、“設計哲学の選択”があったからです。

---

## 1. なぜLaravel + Vue2は“レガシー”化したのか？

LaravelやVue2は、当時としては非常にモダンなフレームワークでした。
しかし、現在の観点から見ると以下のような特徴が「構造疲労」を起こしやすい原因となっています：

- **命令的UI構築**（DOMと状態が密結合）
- **非同期処理の分離困難**（Vueのmethodsにロジック集中）
- **サーバー中心モデル**（Laravel Controllerに副作用が密集）
- **型安全性の欠如**（動的言語としてのPHPの限界）

これらは「**分離されていない責務**」に起因し、コードの予測可能性・保守性・再利用性を阻害します。

特に中長期的なメンテナンスを考えると、状態・副作用・ロジックの境界線が曖昧であることは、
新しいエンジニアが参入しにくくなる要因でもありました。
結果として、採用難易度の上昇、ドキュメントや仕様の陳腐化、セキュリティリスクの増大へとつながります。

---

## 2. 新スタックが目指す“構造的安全性”とは？

React + TypeScript + Serverless は単なる最新技術の寄せ集めではありません。
その本質は以下のような **構造設計思想の結晶** にあります：

| 技術 | 設計的意義 |
|------|-------------|
| React | UIを**状態の反映として宣言的に構築** |
| TypeScript | 設計情報（型）を**コードに埋め込むことで整合性を保証** |
| Serverless | **責務を最小粒度の関数に分解し、構造を明示化** |

このように、新スタックは「責務の分離」と「予測可能性の最大化」に特化しています。

特に注目すべきは「副作用の扱い方」です。LaravelやVue2では、ロジック・副作用・表示が同一ファイルに混在するケースが多く、
処理の追跡が困難になりがちでした。それに対してReact Hooksでは副作用（useEffectなど）を明示的に分離し、
TypeScriptで型を定義することで、状態やデータの流れを“設計段階”で予測可能にできます。

---

## 3. Marmaid図：構造的転換の比較

```mermaid
flowchart TD
  subgraph 旧構成
    A1[Laravel Controller] --> A2[Model操作]
    A1 --> A3[メール送信]
    A1 --> A4[Viewへの返却]
    A4 --> A5[Vue2 Template]
    A5 --> A6[v-model双方向バインディング]
  end

  subgraph 新構成
    B1[React + Hooks] --> B2[状態管理]
    B1 --> B3[Fetch API呼び出し]
    B3 --> B4[Serverless Function]
    B4 --> B5[DB操作 / 外部API]
    B4 --> B6[メール送信]
    B1 --> B7[TS型保証]
  end
```

この図からわかるように、
旧構成は**責務が集約・混在**しているのに対し、
新構成は**機能ごとに構造的に分離**されており、保守性・拡張性・採用のしやすさが大きく改善されます。

---

## 4. コードで見る構造の違い

### Laravel + Vue2 の登録処理

```php
// Laravel Controller
public function register(Request $request) {
  $user = User::create($request->all());
  Mail::to($user->email)->send(new WelcomeMail($user));
  return response()->json($user);
}
```

```vue
<template>
  <form @submit.prevent="register">
    <input v-model="name" />
    <input v-model="email" />
  </form>
</template>

<script>
export default {
  data() {
    return { name: '', email: '' };
  },
  methods: {
    async register() {
      await axios.post('/api/register', { name: this.name, email: this.email });
    }
  }
}
</script>
```

### React + Serverless の登録処理

```tsx
// RegisterForm.tsx
const RegisterForm = () => {
  const [form, setForm] = useState({ name: '', email: '' });

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm({ ...form, [e.target.name]: e.target.value });

  const onSubmit = async () => {
    await fetch('/api/register', {
      method: 'POST',
      body: JSON.stringify(form),
    });
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
      <input name="name" onChange={onChange} />
      <input name="email" onChange={onChange} />
    </form>
  );
};
```

```ts
// serverless/api/register.ts
export const handler = async (event) => {
  const { name, email } = JSON.parse(event.body);
  await saveUserToDB(name, email);
  await sendWelcomeEmail(email);
  return { statusCode: 200 };
};
```

ここで注目すべきは、UI・ロジック・副作用の**完全な責務分離**です。
React側は状態管理とUIだけに専念し、Serverless Functionが副作用（メール送信・DB操作）を受け持ちます。

---

## 5. 採用・育成観点からの効果

新しい技術スタックは、学習曲線がある一方で、**設計が明示的であるがゆえに属人化しにくい**という利点があります。

TypeScriptの導入により、チーム内での設計共有がコード上で成立し、PRレビューやオンボーディングもスムーズになります。
また、ReactやServerlessはエコシステムとしても拡張性が高く、**モジュール分割・再利用性・テスト容易性**にも優れます。

採用面でも、「モダンな構成を使っているチーム」としての訴求力は大きく、エンジニアからの注目度も高まります。

---

## 結論：移行とは「再構成」であり「再解釈」である

- Laravel + Vue2 の構造は「一箇所で全てやる」思想に基づく
- React + Serverless は「責務を分け、明示する」思想に基づく
- よって、移行とは単なる技術刷新ではなく、「**思想の乗り換え**」である

技術選定とは、**チームがどう世界を捉えるか**の哲学的選択なのです。

---

## おわりに：思想に気づくことで移行が“納得”になる

レガシーからモダンへの移行を成功させる最大の鍵は、
「なぜこれが良いのか」を構造として理解することです。

そしてその理解は、単なる技術ドキュメントではなく、
**価値観・設計思想・構造的安全性**といった観点から深めることで、
チーム全体の納得感・実装精度・採用戦略すらも変えていくことができます。

移行を“刷新”ではなく、“再構成”として考え直してみましょう。

---

## 付録：技術選定チェックリスト（簡易）

| 観点 | Laravel + Vue2 | React + Serverless |
|------|----------------|---------------------|
| 状態管理 | コンポーネント内部 or Vuex | useState / Zustand / Redux |
| UI構築 | v-model命令型 | JSX宣言型 |
| 副作用制御 | methods内部 | useEffect + 外部関数 |
| 型の扱い | 動的 | 静的（TS） |
| テスト容易性 | 難（密結合） | 高（分離） |

この表を元に、自プロジェクトが「どこに移行の障壁を感じているか」を整理してみるのもおすすめです。