SPAの基礎

Transcript

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