SAPとは

ページ数がいくつあっても、たった１つのHTMLファイルでページのコンテンツ全てを管理して表示する開発手法のこと。
JSの DOM API で最上位のElementの子要素を入れ替えて表示を切り替える。

メリット

• ページを0から組み立て直すことなくUIを変化させることができる

デメリット

• JSファイルが大きくなりがち

SPA開発の要点

1. 宣言的UI
2. 仮想DOM
3. 差分検知

参考

• フロントエンド研修【MIXI 23新卒技術研修】

宣言的UIとは

• UIの見た目や動作を宣言的に記述するアプローチ
• 特長は、「どのように」行うかではなく「何を」行うかに焦点を当てること
• 代表的なものは React, Flutter, SwiftUI など

宣言的UIと対立して語られるの命令的UI(手続き的UI)というものもある。
命令的UIの特徴は、「どのように」行うかに焦点を当てる。宣言的UIと比べ具体的な手順を逐一記述するため細かい制御が可能になるが複雑になりがち。

仮想DOMとは

DOMツリーをオブジェクトで擬似的に表現して、描画するDOMをJSで管理する手法。

メリット

DOMの状態をすべてJSで保持することにより、実際のDOMにアクセスする回数を減らすことができる。そのためパフォーマンスが上がる。

[番外] DOM とは？

DOM とはウェブ文書のためのインターフェイスで、JavaScript で自由に操作できる。

公式(w3c)Docから引用。

Document Object Model(DOM)は、HTMLまたはXML文書のためのプログラミングAPIです。ドキュメントの論理構造と、ドキュメントへのアクセスや操作の方法を定義しています。

詳細は下記の記事がわかりやすい。
https://zenn.dev/antez/articles/b6eb22cb228a49

差分検知とは

オブジェクト同士で差分比較を行う手法。
一般的に shallow equal と呼ばれる比較が行われる。

何が嬉しいのか

仮想DOMの一部のElementしか更新していないのに、全てをDOMに再反映するのは非効率なので、新旧の仮想DOMで差分があるかチェックし、差分がある箇所のみ反映する。そうすることで影響範囲を最小限に抑えられる。