528
441

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SPA(Single Page Application)の基本

Last updated at Posted at 2016-10-19
1 / 9

#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製のフレームワーク
528
441
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
528
441

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?