SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷

こんにちは、小林（@koba04）です。
本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。

GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。

これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。

そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。

• フロントエンドでの状態管理の複雑化
  • ページの単位を超えた状態の保持
• モデルとビューによる処理の分割
  • イベントの管理が複雑になる問題も
• 双方向データバインディングを用いた効率的なデータ更新
• Fluxによる一方向なデータの流れ
  • Reactが可能にしたこと
  • イベントの処理方法
• 単一ストアと不変性による予測可能な状態管理
  • 状態を単一のJSONオブジェクトとして保持
  • 状態や副作用のないただの関数
• ロジックから状態を切り離した世界が可能にするDX
• まとめ
  • Webブラウザというプラットフォームの進化

フロントエンドでの状態管理の複雑化