【びーえふえふ】

BFF(Backend for Frontend) とは?

最終更新:
💡 画面の要求に合わせて、専用のバックエンド層を用意する

特定のフロントエンドの要求に合わせたバックエンド層を用意する設計パターン。画面に必要なデータの集約や整形を担い、その体験に合わせてAPIを変更しやすくする。分け方は端末の数だけでなく、体験や担当チームの違いで考える。

📌 このページのポイント
利用体験に合わせてAPIを整える画面専用の層サービスWebWebのBFFモバイルアプリのBFF商品API在庫API注文API同じ体験なら、BFFを共有する選択もある運用・重複・追加の通信も考慮する
WebとモバイルでBFFを分け、必要なAPIを呼ぶ構成例。矢印は要求の方向で、取得したデータは画面へ返します。同じ体験なら共有でき、必ず端末ごとに別サーバーを置くという意味ではありません。
ひよこ ひよこ
BFFは、何のために置くの?
ペンギン先生 ペンギン先生
特定の画面や利用体験に合うAPIを用意するためだよ。例えばWebでは詳しい一覧、モバイルでは通信量を抑えた一覧が必要なら、それぞれの要求に合わせてデータをまとめる。必ずWebが多く、モバイルが少なくなるという決まりではないんだ
ひよこ ひよこ
APIゲートウェイとは何が違う?
ペンギン先生 ペンギン先生
BFFは特定の利用体験に必要な処理を担当する。APIゲートウェイは、入口での振り分けや共通の認証・監視などをまとめる役割として使えるよ。両者を組み合わせる設計もあり、実際にどの処理をどちらへ置くかを決める必要があるんだ
ひよこ ひよこ
データをまとめるだけ?
ペンギン先生 ペンギン先生
複数サービスへの呼び出し、表示に必要な項目の整形などを取りまとめるよ。通信先の一つが失敗した場合に全体を失敗させるか、一部の情報で返すかも考える。キャッシュや圧縮が全てのBFFに必須というわけではないんだ
ひよこ ひよこ
iOSとAndroidにも、一つずつ必要?
ペンギン先生 ペンギン先生
同じ利用体験や要求なら、共通のBFFにする選択もあるよ。体験が違う場合や、別々のチームが独立して変更したい場合は分ける理由になる。端末やOSの数だけで機械的に決めるものではないんだ
ひよこ ひよこ
いつでも入れた方がいい?
ペンギン先生 ペンギン先生
層が増えると運用やコードの重複、追加の通信での遅延も増え得る。画面が一つ、要求が似ている、GraphQLなどで必要なデータを十分に取得できる場合は、追加のBFFの価値が小さいこともある。共通のAPIで足りるかと比べて判断しよう
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「BFF」って出てきたら「画面の要求に合わせた専用のバックエンド層」と思えばだいたいOK!
📖 おまけ:英語の意味
「Backend for Frontend」 = フロントエンドのためのバックエンド
💬 Sam Newmanが2015年の記事で紹介したパターンだよ。その記事はBackend For Frontendという呼び名をPhil Calçadoに帰していて、Newman一人が考案したと断定するものではないんだ

参考資料

← 用語集にもどる