3
2

More than 3 years have passed since last update.

SPA(Single Page Application)とは?普及した理由を歴史から学ぶ

Posted at

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/

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2