$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.6k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
830
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
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
Avatar for Tomohiro Hashidate joker1007
17
7.4k
New Relic 1 年生の振り返りと Cloud Cost Intelligence について #NRUG
Avatar for PLAY, inc. play_inc
0
180
S3を正しく理解するための内部構造の読解
Avatar for NRI Netcom nrinetcom
PRO
3
240
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
130
障害対応訓練、その前に
Avatar for coconala_engineer coconala_engineer
0
150
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
0
220
接客歴・営業歴の方が長いエンジニアから見たre:Invent2025
Avatar for Yuuki Yamashita yama3133
0
100
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
460
【U/Day Tokyo 2025】Cygames流 最新スマートフォンゲームの技術設計 〜『Shadowverse: Worlds Beyond』におけるアーキテクチャ再設計の挑戦～
Avatar for Cygames cygames
PRO
2
1.1k
[Data & AI Summit '25 Fall] AIでデータ活用を進化させる！Google Cloudで作るデータ活用の未来
Avatar for kirimaru kirimaru
0
170
AI駆動開発の実践とその未来
Avatar for Ikko Eltociear Ashimine eltociear
1
460
AWS re:Invent 2025~初参加の成果と学び~
Avatar for Kubo kubomasataka
0
170

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
0
21
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

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