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
680
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
250
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
160
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
2
650
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Wasmの気になる最新情報
askua
0
140
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
540
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
410
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
110
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
170
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
200
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
360
Featured
See All Featured
KATA
mclloyd
PRO
32
15k
Navigating Team Friction
lara
190
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Writing Fast Ruby
sferik
629
62k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Mobile First: as difficult as doing things right
swwweet
225
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The World Runs on Bad Software
bkeepers
PRO
72
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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