導入
こんにちは、今回会社の案件でBFFとGraphQLを導入しました。
BFFってなに？って思った人も多いと思いますが、私も最初はよくわかりませんでした。
そこで、簡単にではありますが、BFF環境を作り、BFFとGraphQLを使ったデータ取得の方法を解説していきます。
今回は、基礎知識編です。
BFFとは
BFFは、「Backend for Frontend」の略称で、フロントエンドとバックエンドの中間に位置し、双方の複雑な処理を緩和させる役割を持っています。
わかりやすく説明すると、「バックエンドの API から取得したデータをフロントエンド向けに加工するフロントエンド専用のサーバー」です。
BFFが必要になった背景
BFFアーキテクチャが必要になった背景は主に３点あります。
1.マイクロサービスアーキテクチャの複雑化
近年、システム開発においてマイクロサービスアーキテクチャが主流になりつつあります。マイクロサービスアーキテクチャは、システムを小さなサービスに分割することで、開発・保守の容易性やスケーラビリティの向上を目指す開発手法です。
しかし一方で、APIが増加し、フロントエンド開発が複雑化するといった課題が発生します。
2.デバイス・プラットフォームの多様化
スマートフォンやタブレット端末に普及により、様々なデバイスでWebアプリケーションを利用することが一般的になっています。このような状況下では、それぞれのデバイスに最適なUI/UXを提供する必要が出てきました。
BFFアーキテクチャー利用することで、デバイスごとに最適化されたAPIを提供することで、デバイス・プラットフォームの多様化に対応することができます。
3.フロントエンド開発の進化
ReactやVue.jsなどのJavaScriptフレームワークの登場により、フロントエンド開発が大きく進化しました。これらのフレームワークを用いることで、複雑なUI/UXを容易に実装することができます。
しかし、フロントエンド開発が進化する一方で、バックエンドとの連携が複雑化するといった課題も発生しています。BFFアーキテクチャーは、フロントエンドとバックエンドを分離することで、こうした課題を解決することが可能となります。
BFFのメリット・デメリット
メリット
-
フロントエンドとバックエンドの分離による開発・保守の容易化
BFFアーキテクチャでは、フロントエンドとバックエンドを分離することで、それぞれの開発・保守を容易にすることができます。
それぞれの担当者が独立して開発を進めることができるため、開発効率が向上します。 -
デバイスごとに最適化されたAPIの提供
デバイスごとに最適化されたAPIを提供することで、それぞれのデバイスで快適なユーザー体験を提供することができます。 -
スケーラビリティの向上
特定のデバイスの利用者が急増した場合、そのデバイス向けのBFFレイヤーのみをスケールアップすることができます。
デメリット
-
開発・運用コストの増加
BFFアーキテクチャでは、フロントエンドごとにBFFレイヤーを開発・運用する必要があるため、開発・運用コストが増加します。 -
オーバーアーキテクチャのリスク
BFFアーキテクチャを過剰に導入すると、オーバーアーキテクチャになりやすいというリスクがあります。
オーバーアーキテクチャとは、必要以上にシステムを複雑化させてしまい、かえって開発・保守が困難になってしまう状態です。 -
テストの複雑化
BFFアーキテクチャでは、フロントエンドとBFFレイヤー、BFFレイヤーとバックエンドの3つのレイヤー間でテストを行う必要があるため、テストが複雑化します。