Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SPAの基礎

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takanorip takanorip
October 20, 2016
Technology
0
690

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.2k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
880
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
630
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.6k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
240
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
550

Other Decks in Technology

See All in Technology
漸進的過負荷の原則
Avatar for SansanTech sansantech
PRO
3
390
JuliaTokaiとしてはこれが最後かもしれない(仮) for NGK2026S
Avatar for GOTOH Shunsuke antimon2
0
120
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
エンジニアとマネジメントの距離/Engineering and Management
Avatar for 小田中育生 ikuodanaka
3
630
EventBridge API Destination × AgentCore Runtimeで実現するLambdaレスなイベント駆動エージェント
Avatar for Har1101 har1101
7
260
Azure SRE Agent x PagerDutyによる近未来インシデント対応への期待 / The Future of Incident Response: Azure SRE Agent x PagerDuty
Avatar for AEON aeonpeople
0
180
フロントエンド開発者のための「厄払い」
Avatar for OPTiM optim
0
170
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
Avatar for Guillaume Laforge glaforge
1
560
AI Agent Agentic Workflow の可観測性 / Observability of AI Agent Agentic Workflow
Avatar for yuzujoe yuzujoe
7
2.3k
新規事業 toitta におけるAI 機能評価の話 / AI Feature Evaluation in toitta
Avatar for pokutuna pokutuna
0
270
ALB「証明書上限問題」からの脱却
Avatar for muso nishiokashinji
0
250
Hardware/Software Co-design: Motivations and reflections with respect to security
Avatar for Bryan Cantrill bcantrill
1
260

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
57
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
340
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
87
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
110
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
120
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
410

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（ソフトウェアの配布者が独占的に 提供しているソフトウェア）が衰退

  5. None

  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