Edited at

SPA(Single Page Application)の基本

More than 1 year has passed since last update.


SPA(Single Page Application)って何?


  • 単一ページで構成されるWebアプリケーション

  • JavaScriptでDOMを操作しページを切り替える

  • AjaxやWebSocketを使用する



SPAまでの変遷


  • 2010年にスティーブ・ジョブズがThoughts on Flashを発表。

  • それがきっかけとなりFlashなどのProprietary Software(ソフトウェアの配布者が独占的に提供しているソフトウェア)が衰退

  • 2014年にHTML5正式勧告がされたこともあり、Flashなどに代わる技術としてHTML5が推進されてきた。

  • そのHTML5でFlashと同等のUI/UXを実装するためSPAが開発された。



SPAで使われている技術


  • JavaScriptフレームワーク、ライブラリ(Angular、Vue.js、Reactなど)

  • CSS Preprocessor(sass、stylusなど)

  • 通信技術(Ajax,WebSocketなど)

  • バックエンド技術(Ruby on Railsなど)

  • HTML5/CSS3



SPAのメリット


  • 豊かな表現力

  • クロスブラウザ

  • 応答がはやい

  • 開発のスピードがはやい

プッシュ通知などもAPIとして提供されている



仕組みの違い



従来のWebアプリケーション



SPA



主なライブラリ、Framework


  • React


    • Facebook製のViewライブラリ



  • Vue.js


    • オープンソースなフレームワーク



  • Angular


    • Google製のフレームワーク