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

SPAの基礎

takanorip
October 20, 2016
Technology
0
620

 SPAの基礎

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k

Other Decks in Technology

See All in Technology
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
SSMRunbook作成の勘所_20241120
koichiotomo
3
180
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
460
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Mastering Quickfix
daisuzu
1
300
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
130
SDNという名のデータプレーンプログラミングの歴史
ebiken
PRO
2
170
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
180
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
38
13k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
240

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
120
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Building Your Own Lightsaber
phodgson
103
6.1k
BBQ
matthewcrist
85
9.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Happy Clients
brianwarren
98
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
A Tale of Four Properties
chriscoyier
156
23k

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