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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
takanorip
October 20, 2016
Technology
0
690
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.2k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
880
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
630
Bulletproof Design System with TypeScript
takanorip
7
4.6k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
240
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Technology
See All in Technology
漸進的過負荷の原則
sansantech
PRO
3
390
JuliaTokaiとしてはこれが最後かもしれない(仮) for NGK2026S
antimon2
0
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
エンジニアとマネジメントの距離/Engineering and Management
ikuodanaka
3
630
EventBridge API Destination × AgentCore Runtimeで実現するLambdaレスなイベント駆動エージェント
har1101
7
260
Azure SRE Agent x PagerDutyによる近未来インシデント対応への期待 / The Future of Incident Response: Azure SRE Agent x PagerDuty
aeonpeople
0
180
フロントエンド開発者のための「厄払い」
optim
0
170
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
glaforge
1
560
AI Agent Agentic Workflow の可観測性 / Observability of AI Agent Agentic Workflow
yuzujoe
7
2.3k
新規事業 toitta におけるAI 機能評価の話 / AI Feature Evaluation in toitta
pokutuna
0
270
ALB「証明書上限問題」からの脱却
nishiokashinji
0
250
Hardware/Software Co-design: Motivations and reflections with respect to security
bcantrill
1
260
Featured
See All Featured
The SEO identity crisis: Don't let AI make you average
varn
0
57
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
Raft: Consensus for Rubyists
vanstee
141
7.3k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
340
New Earth Scene 8
popppiees
1
1.4k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Amusing Abliteration
ianozsvald
0
87
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
110
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
120
Music & Morning Musume
bryan
47
7k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
410
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