JavaScript
HTML5
SPA

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アプリケーション

スクリーンショット 2016-10-20 12.59.39.png


SPA

スクリーンショット 2016-10-20 12.59.47.png


主なライブラリ、Framework

  • React
    • Facebook製のViewライブラリ
  • Vue.js
    • オープンソースなフレームワーク
  • Angular
    • Google製のフレームワーク