01
第 1 章
BFF の全体像と本講座の進め方
この章で学ぶこと
1
BFF とは何か
2
BFF が必要になる場面と BFF が解決する問題
3
各章で扱う内容と開発環境のセットアップ
解説
BFF とは何か
BFF（Backend for Frontend）
フロントエンドに API を提供する専用のバックエンド層。ブラウザとバックエンドの API サービスの間に置く
複数 API の集約
複数の API 呼び出しとデータ整形を BFF がまとめて行い、フロントエンドには 1 つのレスポンスを返す
認証トークンの管理
認証トークンをブラウザではなく BFF 側で保持・管理できる
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
図解
ブラウザ・BFF・バックエンド API の構成
ブラウザは BFF の API を呼び出し、BFF がバックエンドの各 API サービスを呼び出す
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
解説
フロントエンド画面と複数 API の関係
ダッシュボード画面の例
ユーザー情報・注文履歴・通知など、1 つの画面に複数の情報を表示する
各要素を別々の API から取得
表示要素ごとに異なる API を呼び出す構成はフロントエンド開発では一般的
認証トークンも API ごとに必要
各 API へのリクエストにアクセストークンを付与して認証を通す
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
解説
複数 API を個別に呼び出す問題
複数 API の個別呼び出し
1 つの画面を表示するためにユーザー情報・注文履歴・通知など複数の API を個別に呼び出す
コードの肥大化
API が増えるたびにエラーハンドリングやローディング状態の管理が複雑になる
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
解説
認証トークンの管理場所の問題
localStorage にトークンを保管
ブラウザの JavaScript から直接読み取れる保存領域にアクセストークンを置いている
XSS によるトークン窃取のリスク
悪意のあるスクリプトがページ上で実行されると、保存されたトークンが盗まれる
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
図解
フロントエンドが直接 API を呼び出す構成の問題
ブラウザが複数 API を個別に呼び出し、データ整形・認証管理をすべて担う構成
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
解説
各章で扱う内容
01BFF の全体像と講座の進め方（本章）
02BFF が必要になる理由と最初のサンプル
03複数 API のデータ集約
04ログイン状態の管理を BFF に任せる構成
05一部の API が壊れても画面を止めないエラーハンドリング
06API Gateway と BFF の使い分け
07BFF の失敗パターン
08BFF を導入するかどうかの判断基準
09REST API 以外の実装選択肢
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
解説
開発環境の構成
Docker Desktop
各章のサンプルは Docker コンテナ上で動作するため必須
curl
API の動作確認に使用するコマンドラインツール
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ
まとめ
この章のまとめ
✓BFF はフロントエンドに API を提供する専用のバックエンド層で、ブラウザとバックエンド API の間に置く
✓BFF は複数 API の集約と認証トークンのサーバサイド管理を担う
✓フロントエンドが複数 API を直接呼び出す構成では、コードの肥大化と認証トークンの管理に問題がある
✓開発環境は Docker Desktop と curl で構成する
次章: 1 つの API を複数のクライアントで共有する構成の限界と BFF の必要性
BFF とは
BFF が必要な場面
講座の進め方
環境セットアップ
まとめ