Share
Embed
Slide 1
Slide 1 text
SPAの基礎
2016/10/26 Takanori Oki
Slide 2
Slide 2 text
SPAって何？
• SPA(Single Page Application)
• 単一ページで構成されるWebアプリ
JavaScriptでDOMを操作しページ切り替え
• AjaxやWebSocketを使用する
Slide 3
Slide 3 text
SPA·Ͱͷมભ
Slide 4
Slide 4 text
SPAまでの変遷（きっかけ）
• 2010年にスティーブ・ジョブズがThoughts
on Flashを発表
• それをきっかけにFlashやJavaアプレットなど
のProprietary Software（ソフトウェアの配布者が独占的に
提供しているソフトウェア）が衰退
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
2014年
HTML5正式勧告
Slide 7
Slide 7 text
HTMLͰ
WebΞϓϦέʔγϣϯ
࡞Ζ͏ʂ
Slide 8
Slide 8 text
SPAで使われている技術
• JavaScriptフレームワーク、ライブラリ
（Angular、Vue.js、Reactなど）
• 通信技術（Ajax、WebSocketなど）
• バックエンド技術（Ruby on Railsなど）
Slide 9
Slide 9 text
SPAのメリット
• 豊かな表現力
• クロスブラウザ
• 応答がはやい
Slide 10
Slide 10 text
仕組みの違い
Slide 11
Slide 11 text
従来のWebアプリ
クライアント サーバー
②HTTPリクエスト
③HTMLを生成
④HTMLを更新
（再読込）
①状態の更新
Slide 12
Slide 12 text
SPA
クライア
ント
サーバー
JS
④ JSで差分更新
③APIからの
レスポンス
①状態の更新
②APIに
リクエスト
Ajax
WebSocket