09

第 9 章

BFF のさまざまな実装選択肢

この章で学ぶこと

1 REST で構築した BFF が抱えるエンドポイント増殖という課題

2 GraphQL によるエンドポイント増殖の解消

3 GraphQL で構築した BFF の動作確認

解説

REST API とは

Web API の最も普及した設計スタイル

HTTP をそのまま使い、サーバとクライアントの間でデータをやり取りする仕組み。本講座の BFF もこれまで REST API で構築してきた

リソースごとに URL を割り当てる設計

/users/1 や /orders のように、データのまとまりを URL で表す。操作は HTTP メソッド（GET・POST など）で区別する

レスポンスの形はサーバ側が決める

クライアントは用意されたレスポンスをそのまま受け取る

エンドポイント増殖

GraphQL

まとめ

解説

エンドポイント増殖という課題

画面ごとに専用エンドポイント

ホーム画面、注文詳細、設定画面で別々のエンドポイントが必要

集約ロジックの重複

同じバックエンド API の呼び出しと整形処理が、複数のエンドポイントにコピーされる

画面数に比例して増殖

画面が 10、20 と増えると保守コストが膨らむ

エンドポイント増殖

GraphQL

まとめ

解説

GraphQL とは

クライアントがレスポンスの形を指定できる問い合わせ言語

必要なフィールドだけをクエリで選択して取得

エンドポイントは 1 つだけ

画面ごとのデータ要件はクエリの違いで吸収

GraphQL で構築したサーバは BFF として使える

集約・整形を担う層をエンドポイント増殖なしに実現

エンドポイント増殖

GraphQL

まとめ

コード

GraphQL スキーマ定義

クライアントが要求できるデータの構造を宣言

type Query が問い合わせの一覧、type User などがレスポンスの形を定義

ch09-implementation-options/src/graphql/schema.graphql

お手元のエディタでお開きください

エンドポイント増殖

GraphQL

まとめ

コード

GraphQL クエリの例

ホーム画面が必要なフィールドだけを選択するクエリ

クライアント側で記述するクエリの例

query HomeScreen($userId: ID!) {
  user(id: $userId) {
    name
  }
  orders(userId: $userId, limit: 5) {
    id
    total
    status
  }
}

エンドポイント増殖

GraphQL

まとめ

実演

コンテナの起動

9 章のサンプル環境を起動する

GraphQL サーバが正常に動作していることを確認する

確認するポイント

{"status":"ok"} が返ること

ターミナルで実行

bash / zsh

cd ch09-implementation-options
docker compose up -d
curl -s http://localhost:3000/health

PowerShell

cd ch09-implementation-options
docker compose up -d
curl.exe -s http://localhost:3000/health

エンドポイント増殖

GraphQL

まとめ

実演

GraphQL クエリの実演

ホーム画面用クエリを curl で実行する

user の name と orders の id, total, status だけが返る。email は含まれていない

クエリで指定したフィールドだけがレスポンスに含まれることを確認する

ターミナルで実行

bash / zsh

curl -s http://localhost:3000/graphql -H "Content-Type: application/json" -d @requests/home-screen.json

PowerShell

curl.exe -s http://localhost:3000/graphql -H "Content-Type: application/json" -d "@requests/home-screen.json"

エンドポイント増殖

GraphQL

まとめ

図解

REST と GraphQL の構成比較

REST では画面ごとにエンドポイントを追加、GraphQL ではクエリの違いで吸収

エンドポイント増殖

GraphQL

まとめ

この章のまとめ

✓REST API はサーバ側がレスポンスの形を決めるため、画面数が増えるとエンドポイントが増殖する

✓GraphQL はクライアントがレスポンスの形を指定できる問い合わせ言語で、エンドポイントは 1 つで済む

✓GraphQL で構築したサーバを BFF として使うことで、エンドポイント増殖の問題を解消できる

✓GraphQL を導入するとスキーマの設計と管理が必要になる点は
トレードオフ

エンドポイント増殖

GraphQL

まとめ