SPAの基礎 2016/10/26 Takanori Oki 

SPAって何？ • SPA(Single Page Application) • 単一ページで構成されるWebアプリ JavaScriptでDOMを操作しページ切り替え • AjaxやWebSocketを使用する 

SPA·Ͱͷมભ 

SPAまでの変遷（きっかけ） • 2010年にスティーブ・ジョブズがThoughts on Flashを発表 • それをきっかけにFlashやJavaアプレットなど のProprietary Software（ソフトウェアの配布者が独占的に 提供しているソフトウェア）が衰退 

No content

2014年 HTML5正式勧告 

HTMLͰ WebΞϓϦέʔγϣϯ ࡞Ζ͏ʂ 

SPAで使われている技術 • JavaScriptフレームワーク、ライブラリ （Angular、Vue.js、Reactなど） • 通信技術（Ajax、WebSocketなど） • バックエンド技術（Ruby on Railsなど） 

SPAのメリット • 豊かな表現力 • クロスブラウザ • 応答がはやい 

仕組みの違い 

従来のWebアプリ クライアント サーバー ②HTTPリクエスト ③HTMLを生成 ④HTMLを更新 （再読込） ①状態の更新 

SPA クライア ント サーバー JS ④ JSで差分更新 ③APIからの レスポンス ①状態の更新 ②APIに リクエスト Ajax WebSocket