Webアプリの変遷
The Twelve-Factor AppがWebアプリの基本原則であることはわかりましたが、具体的なアーキテクチャはどうすればよいでしょうか。歴史を簡単に振り返ることで、これから作るべきWebアプリの構成を洗い出します。
1990年代半ば～ ブラウザ＋モノリシックなWebアプリ
かつてのWebアプリはモノリシックなアーキテクチャで、ブラウザ向けに静的なHTMLを返す形でした。サーバサイドのフレームワークやアプリ内の設計が重要で、始めた当初は問題なくても、日夜コードが肥大化し保守や改善に苦しんだことも多いのではないでしょうか。
2007年～ ネイティブアプリ＋モノリシックなAPIサーバ
2007年にiPhoneが発売されるとスマートフォンが急激に普及し、企業や個人がWebアプリよりもネイティブアプリを先に提供する「モバイルファースト時代」が到来しました。ネイティブアプリのバックエンドは、WebAPIがJSONを返す構成が基本です。WebAPIの重要性は高まり、WebAPIを中心にビジネスを行う企業も登場、後には「APIエコノミー」という言葉も生まれました。
2007年～ SPA＋モノリシックなAPIサーバ
ユーザが優れたUXを追い求めてネイティブアプリを好む時代になると、Webアプリの立場は苦しくなります。Webブラウザ向けにHTMLを返すバックエンドとスマートフォン向けにJSONを返すバックエンドの並行開発も重荷となりました。
こうした課題を解決するべく登場し、人気を博したのがSPA（Simple Page Application）です。SPAは、初めに単一のHTML（Single Page）をロードし、その後はJavaScriptがバックエンドのWebAPIからJSONを取得してビューを生成します。バックエンドから返されるデータが軽量なJSONに変化したことで、レスポンスの高速化が実現したほか、JavaScriptによって高度に動的なUXの実現が容易になりました。フロントエンドがバックエンドから分離され、フロントエンドの開発サイクルを回しやすくなったことも相当な収穫です。
SPAによりWebのUXは高度になったうえ、2015年にはサービスワーカーによってプッシュ通知やキャッシングを行い、さらにネイティブアプリに近いUXを目指すPWA（Progressive Web App）といった概念も生まれました。
2011年～ マイクロサービスの登場
フロントエンドから分離されたバックエンドは、もはやモノリシックである必要はありません。単一のバックエンドは、少しの機能を追加するにも既存の巨大なアプリに対する影響範囲を調査し、苦労して新しいコードを追加、全体をテストしてビルドしてデプロイして、……と相当な手間がかかります。Netflix社は以前、起動に40分もかかる、Java製の巨大なモノリシックバックエンドに苦労させられていました。
こうした状況で人気を博したのが、マイクロサービスパターンです。担当するサービスやインターフェイスが明確な単機能のマイクロサービスを組み合わせてシステムを構成する設計です。これは、The Twelve-Factor Appの「4. バックエンドサービス」「6. プロセス」「7. ポートバインディング」「8. 並行性」等とも関連します。
各マイクロサービスは、任意の言語やフレームワークを柔軟に選定できます。例えば、機械学習にはライブラリが豊富なPython、新機能にはパッケージの豊富なNode.jsなど、機能ごとに適切な技術を選定できるのでサービスと開発組織の関係性も柔軟性を増し、サービスや組織がスケールするようにもなりました。
現在のトレンドは？ フロントエンドとバックエンドをつなぐBFFの登場
Webアプリのアーキテクチャはこのような変遷を重ね、フロントエンドはSPA、バックエンドはマイクロサービスを中心に据えた開発が主流になります。しかし、課題もありました。マイクロサービス化が進むほどフロントエンドにとっては煩雑で扱いづらいアーキテクチャになってしまいます。そこで、バックエンドとフロントエンドをつなぐ「BFF（Backend For Frontends）」が生まれたのです。
SPAとBFFが現代のWebアプリ開発の最適解
2015年頃からBFF（Backend For Frontends）という「フロントエンドのためのバックエンド」という概念が提唱されます。BFFは、APIオーケストレーションの一種であり、フロントエンドとバックエンドの間に立って仲介します。一般的なAPIオーケストレーションと異なるのは明確にフロントエンドを意識していることで、APIのトランザクション集約やCORS（Cross-Origin Resource Sharing）対応やフロントエンドには扱いづらいプロトコルの仲介を行うなどして、フロントエンドが扱いやすいJSONを提供します。SEO対策のワークアラウンド的なSSR（Server Side Rendering）を担うケースもあります。
BFFがあることで、バックエンドも個別のフロントエンドの要求に過剰に影響されず、安心して美しいマイクロサービスの設計を追求できます。
SPA＋BFFは、「現状のWebアプリ開発のベストプラクティスのひとつ」と言えます。実際に2017年には、Twitter社がモバイルのWebアプリをReactのSPAとNode.jsのBFFによって再開発し、UXを大きく改善したことが話題になりました。さまざまなサービスが現在進行形でこうしたアーキテクチャに生まれ変わっています。
これからWebアプリを開発する人はどうしたらよいでしょうか。冒頭にも述べたとおり、フロントエンドの開発技術は日々進歩しており、特に初心者は何から始めてよいか戸惑ってしまうことでしょう。「時間がかかるならいいや」と開発を諦めてしまう人もいるかもしれません。自信のある開発者でも新しいことを始める場合は、重要な要素を見落として道を踏み外すこともあります。
