Backend-for-Frontendパターンとは何か、またAPIゲートウェイとどのような関係があるのか？

Question

Accepted Answer

**Backend-for-Frontend (BFF)** は、クライアントタイプ（Web、モバイル、パートナー）ごとに専用のゲートウェイです。すべてのクライアントを提供する汎用ゲートウェイ1つではなく、各フロントエンドはそのニーズに合わせてカスタマイズされたバックエンドを得ます。

## 解決する問題

モバイルアプリとWebアプリは、データ、ペイロードサイズ、通信頻度のニーズが異なります。単一の汎用APIでは妥協を強いられ、過剰フェッチが発生します。

```text
Without BFF:        With BFF:
  All clients          Web ─▶ Web BFF ─┐
     │                 Mobile ─▶ Mobile BFF ─┼─▶ microservices
  one generic API      Partner ─▶ Partner BFF ─┘
```

## BFFの役割

- **集約**：複数のサービス呼び出しをクライアント向けの応答に集約します。
- **削減**：制約のあるクライアント（モバイル）のペイロードを削減します。
- **クライアント固有ロジック**を所有し、サービスは汎用のままにします。

```js
// Mobile BFF: one call → compose a lean screen payload
app.get('/home', async (req) => {
  const [user, orders] = await Promise.all([
    usersApi.get(req.userId),
    ordersApi.recent(req.userId, { limit: 3 }) // small for mobile
  ]);
  return { name: user.name, recentOrders: orders }; // tailored shape
});
```

## BFF対ゲートウェイ

| | APIゲートウェイ | BFF |
|---|---|---|
| スコープ | すべてのクライアント向けに1つ | クライアントタイプごとに1つ |
| ロジック | 汎用的なクロスカッティング | クライアント固有の成形 |

## 落とし穴

BFFが多すぎるとロジックが重複します。BFFは薄く保ち、サービスに属するビジネスルールが漏れ出さないようにしてください。

## なぜ重要なのか

BFFにより、各フロントエンドは共有契約に全クライアントを合わせるのではなく、自分のペースで進化できます。そしてそれに適したバックエンドを持つことができます。

これらはゲートウェイを補完します（置き換えるのではなく）。ゲートウェイは認証やルーティングのようなエッジの関心事を処理し、BFFはクライアント固有の集約を処理します。

	APIゲートウェイ	BFF
スコープ	すべてのクライアント向けに1つ	クライアントタイプごとに1つ
ロジック	汎用的なクロスカッティング	クライアント固有の成形