【びーえふえふ】

BFF(Backend for Frontend) とは?

💡 フロントエンドの「専属マネージャー」が、必要なデータをぴったりお届け
📌 このページのポイント
BFF — フロントエンド専用のAPI層 フロントエンド 🖥 Web(PC) 詳細データが欲しい 📱 モバイルアプリ 軽量データが欲しい BFF層 Web用 BFF データ集約・整形 モバイル用 BFF 軽量化・圧縮 マイクロサービス 商品サービス 注文サービス ユーザーサービス BFFがない場合 Web 不要なデータも取得 商品API 注文API 各フロントエンドが 直接複数のAPIを呼び出す → 複雑・非効率 BFFがフロントエンドごとに最適なデータを整形して提供
BFF(Backend for Frontend)の構成
ひよこ ひよこ

BFFって、フロントエンドのためだけのバックエンドってこと?

ペンギン先生 ペンギン先生

そうだよ。たとえばWeb版とスマホアプリで必要なデータが違うでしょ?Web版は詳細データが欲しいけど、スマホは通信量を減らしたいからコンパクトなデータがいい。BFFフロントエンドごとに最適化してくれるんだ

ひよこ ひよこ

APIゲートウェイとは何が違うの?

ペンギン先生 ペンギン先生

APIゲートウェイルーティングや認証など「全クライアント共通の入口」で、BFFは「特定のフロントエンド専用のデータ加工層」だよ。両方を組み合わせて使うことも多いんだ

ひよこ ひよこ

具体的にBFFは何をしてくれるの?

ペンギン先生 ペンギン先生

複数のマイクロサービスからデータを集めてフロントエンドが使いやすい形にまとめたり、不要なフィールドを削ったり、レスポンスをキャッシュしたりするよ。GraphQLBFFとして使うケースも増えているんだ

ひよこ ひよこ

デメリットはないの?

ペンギン先生 ペンギン先生

フロントエンドの種類だけBFFが必要になるから、管理するサーバーが増えるのがデメリットだね。Web版だけのサービスなら無理にBFFを入れなくていいよ。複数のクライアントがあって、それぞれのデータ要件が大きく違うときに威力を発揮するパターンなんだ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
BFF」って出てきたら「フロントエンド専用のAPI取りまとめサーバー」と思えればだいたいOK!
📖 おまけ:英語の意味
「Backend for Frontend」 = フロントエンドのためのバックエンド
💬 Sam Newmanが2015年に提唱したパターンで、「Best Friend Forever」の略ではなく「バックエンド・フォー・フロントエンド」の略だよ
← 用語集にもどる