Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPAの基礎
Search
takanorip
October 20, 2016
Technology
0
640
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
390
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
偏光画像処理ライブラリを作った話
elerac
1
170
MIMEと文字コードの闇
hirachan
2
1.4k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Music & Morning Musume
bryan
46
6.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Your Own Lightsaber
phodgson
104
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Being A Developer After 40
akosma
89
590k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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