Backend for Frontend（BFF）とは何ですか？

フロントエンドの種類ごとに専用のバックエンドを用意するアーキテクチャパターン。Web、モバイル、デスクトップなど、それぞれの画面に最適化されたAPIを提供できる。

Backend for Frontend（BFF）のポイントは？

Web用・モバイル用など、フロントエンドごとに専用のAPI層を設けるパターン。各フロントエンドが必要なデータだけを最適な形で受け取れるため、通信量を削減できる。汎用APIの「全部入りレスポンス」問題を解消し、フロントエンドの開発速度が上がる。フロントエンドチームがBFF層を所有することで、バックエンドチームとの調整コストを減らせる

【ばっくえんどふぉーふろんとえんど】

Backend for Frontend（BFF）とは？

💡 「お客様ごとに専属のコンシェルジュを」——フロントエンド専用の気が利くバックエンド

📌 このページのポイント

Web用・モバイル用など、フロントエンドごとに専用のAPI層を設けるパターン
各フロントエンドが必要なデータだけを最適な形で受け取れるため、通信量を削減できる
汎用APIの「全部入りレスポンス」問題を解消し、フロントエンドの開発速度が上がる
フロントエンドチームがBFF層を所有することで、バックエンドチームとの調整コストを減らせる

BFFパターンによるフロントエンド別API最適化のイメージ

ひよこ

なんでフロントエンドごとにバックエンドを分けるの？1つじゃダメなの？

ペンギン先生

スマホとPCでは画面サイズも通信環境も違うよね。1つのAPIで全部まかなおうとすると、スマホに不要なデータまで返してしまったり、PC向けに情報が足りなかったりするんだ

ひよこ

じゃあBFFはAPIゲートウェイとは違うの？

ペンギン先生

APIゲートウェイは「共通の入口」で、認証やレート制限を担当するよ。BFFはその先にあって、フロントエンドに特化したデータ加工・集約をする層。役割が違うんだね

ひよこ

BFFが増えすぎると管理が大変にならない？

ペンギン先生

するどいね。Web用・iOS用・Android用と3つ作ると、共通ロジックが重複しがち。そこはShared Libraryで共通化するか、GraphQL Federationで統合するアプローチもあるよ

ひよこ

どんなプロジェクトで採用すべき？

ペンギン先生

複数のフロントエンドがあって、それぞれのUXが大きく異なる場合に効果的だよ。逆にWebだけのシンプルなサービスなら、わざわざBFFを入れる必要はないね

まとめ：ざっくりこれだけ覚えればOK！

「BFF」って出てきたら「フロントエンド専用の中間バックエンド」と思えればだいたいOK！

📖 おまけ：英語の意味

「Backend for Frontend」＝フロントエンドのためのバックエンド

💬 Sam Newman氏が2015年に提唱したパターン。「フロントエンドのために存在するバックエンド」という、そのまんまの名前だよ

← 用語集にもどる

Backend for Frontend（BFF） とは？

Backend for Frontend（BFF）とは？