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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
670

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
410
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.9k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
160
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
920
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
4
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
3.9k

Other Decks in Technology

See All in Technology
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか？
Avatar for an cap120
1
660
Intro to Software Startups: Spring 2025
Avatar for Arnab Nandi arnabdotorg
0
260
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
Avatar for nanachi nanachi
1
740
AWS DDoS攻撃防御の最前線
Avatar for R.Kondo ryutakondo
1
170
事業特性から逆算したインフラ設計
Avatar for UPSIDER, Inc. Tech&Product div. upsider_tech
0
140
バクラクによるコーポレート業務の自動運転 #BetAIDay
Avatar for LayerX layerx
PRO
1
980
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～
Avatar for Cygames cygames
PRO
1
370
リモートワークで心掛けていること 〜AI活用編〜
Avatar for naoki85 naoki85
0
180
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
18
52k
Amazon GuardDuty での脅威検出：脅威検出の実例から学ぶ
Avatar for KintoTech_Dev kintotechdev
0
120
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
190
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
Avatar for LayerX layerx
PRO
4
1.8k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
185
16k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k

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