$30 off During Our Annual Pro Sale. View Details »

SPAの基礎

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
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
820
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
600
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
220
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
990
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
540

Other Decks in Technology

See All in Technology
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
12
630
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
2
500
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
Avatar for kubo ayumu boro1234
0
810
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
1
240
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
1.8k
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
Avatar for Ayokura ayokura
0
490
シニアソフトウェアエンジニアになるためには
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
3
180
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150
AlmaLinux + KVM + Cockpit で始めるお手軽仮想化基盤 ～ 開発環境などでの利用を想定して ～
Avatar for koedoyoshida koedoyoshida
0
110
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
2
820
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
250
Identity Management for Agentic AI 解説
Avatar for Naohiro Fujie fujie
0
110

Featured

See All Featured
Claude Code のすすめ
Avatar for schroneko schroneko
65
200k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
140
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
810
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

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