SPAとは？
「Single Page Application」の略であり、単一のWebページでアプリケーションを構成する設計構造の名称になります。
従来ページの遷移させる際に、ページ全体の更新（次ページの情報取得）が必要でした。
これがページ内の部分的な遷移を可能としたのがSPAであり、これによりページの表示速度や応答速度が向上しました。
SPAを用いた具体例
・Google Map
・Slack
・Facebook
上記の具体例に上げたGoogle Mapはイメージしやすく、ページ内のマップ部分のみドラッグして動かす事ができます。
これにはAjaxというアプローチ方法が採用されており、一部の情報をサーバーに送信して、それを受け取り反映させる仕組みとなっています。
Ajaxとは「Asynchronous JavaScript + XML」の略称で、元々採用されている技術である「DOM」「XML」「JavaScript」等を組み合わせたアプローチ方法です。
その為「新しくて古い技術」と呼ばれており、こういった技術を用いて作成したものがSPAになります。
※「Ajax」はプログラミング言語などの概念ではなく、アプローチ方法という概念になります。
SPA（Single Page Application）が普及した理由
Flashを始めとしたRIA（Rich Internet Application）の存在
近年SPAが普及されてきた背景としてはスマートフォンの普及が挙げられます。
従来のWebページはHTML,CSSの構成に対して、動的なアプリケーションを実装する際に「RIA（Rich Internet Application）」と呼ばれる外部プラグインを用いておりました。
代表的なものでいうと「Flash」です。
これにより従来のWebページに動きをつけることができ、表現力が高まったことからRIAは脚光を浴びるようになります。
しかし2010年頃からこの「Flash」は衰退していきます。
当時AppleのCEOだったスティーブジョブズが、iPhone OSでAdobeのFlashテクノロジをサポートしない理由を説明するメッセージ「Thoughts on Flash」を発表したことをきっかけにオープン性のあるHTML5を推進するようになりました。
簡単に言うとジョブズ氏は、
「Flash」はAdobeが提供しているもので100%プロプリエタリ(独占的)な製品であるが、Webに関連する全ての標準はオープンであるべきだと考え、HTML5やCSS、JavaScriptなどのオープン標準を製品に採用しているということを発表したのです。
その後RIAで行っていた処理は、HTML5、CSS3、JavaScriptで実現が可能となり、その概念がSPAとなります。
※2017年7月25日にAdobe Systems社よりFlashのアップデート・配布などのサポートが2020年末に終了することが正式発表されました。
まとめ
時代の流れと共に、技術は移り変わりながらもSPAで用いられている技術はAjaxという元からある技術を組み合わせた構造になっています。
勿論SPAに適したフレームワークや新しい技術等はありますが、技術の組み合わせや使用方法を検討することで、十分にUXの向上を果たせる可能性もあり、Webの世界はまだまだ進化していくことが予想されます。
仮に新しい技術が必要となっても、その根幹を理解するにあたって基礎的な知識は常に求められる為、HTML5,CSS3,JavaScriptはしっかり学んでおく必要がありそうです。
参考記事
IT media
https://www.atmarkit.co.jp/ait/articles/0708/23/news134.html
HTML55Experts.jp
https://html5experts.jp/albatrosary/4939/
日経クロステック
https://xtech.nikkei.com/atcl/learning/lecture/19/00034/00003/