Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
SPAの基礎
takanorip
October 20, 2016
Technology
0
310
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
takanorip
2
1.9k
takanorip
0
81
takanorip
0
8
takanorip
1
160
takanorip
1
71
takanorip
0
580
takanorip
1
60
takanorip
5
3.2k
takanorip
6
990
Other Decks in Technology
See All in Technology
xecus
0
180
miyakemito
1
570
kanaugust
PRO
0
120
oliva
7
1.1k
soracom
0
130
hanacchi
0
150
khrd
1
440
syoshie
0
400
miura55
0
310
askul
1
190
yamamuteki
3
660
koukyo1994
3
410
Featured
See All Featured
moore
125
21k
chriscoyier
683
180k
dougneiner
118
7.9k
cassininazir
347
20k
michaelherold
224
8.5k
cromwellryan
104
6.1k
brettharned
93
3k
shpigford
165
19k
morganepeng
93
14k
lara
172
9.6k
62gerente
587
200k
hatefulcrawdad
257
17k
Transcript
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(ソフトウェアの配布者が独占的に 提供しているソフトウェア)が衰退
None
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