はじめに
これまでMPAでの開発経験しかなかったエンジニアですが、
とある機会でSPAを触ることになったので、
ざっくり概要ぐらい把握しておこうと思い記事を書きました。
SPAの概要
Wikipediaでは以下の通り説明されています。
単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
MPAはリクエスト/レスポンスの都度、HTML/JS/CSS etc...を読み込むのに対して、
SPAは最初に必要なコードをまとめて読み込み、以降は必要な情報（基本JSON形式）だけ読み込みする、というところでしょうか。
両者の違いを図解すると以下の通りです。
-
MPA
-
SPA
メリット
- ページ全体を再読み込みしないので処理が高速。それに伴いユーザエクスペリエンスも向上。
- フロントとバックが分離されるので、メンテナンス性が向上。
デメリット
- 初期ロードが重くなる。
- SEO対策が必要。
- JavaScriptが無効化された環境では動作しない
- メモリ使用量が増えやすい
ネットで見かけた話
「なぜ管理者画面をSPAで作るのか。MPAでいいやん。」
SPAについて調べる中で、ちらほらこの話を見かけました。
私が観測した限りでは、「複雑なことはしなくていい&売り上げに直結しない管理者画面を、開発コストが高いSPAであえて作る必要がない」という話のようでした。
SPAに限った話ではありませんが、システム開発の目的は"ユーザの課題解決"であり"〇〇の技術を使うこと"ではないので、手段の目的化には気をつけようと改めて思ったトピックでした。
参考