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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
720
0

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016

More Decks by takanorip

See All by takanorip
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.2k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
790
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
300
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.3k

Other Decks in Technology

See All in Technology
End-to-Endで考える信頼性 — LINEアプリにおける クライアント開発×SRE連携の実践
Avatar for maru maruloop
4
4.6k
AIが実装を自走する時代の認知負債との戦い
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
230
ソニー銀行におけるビジネスアジリティ向上のためのクラウドシフト戦略
Avatar for srenext srenext
0
770
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
2
390
SoccerMaster: A Vision Foundation Model for Soccer Understanding
Avatar for Kazuyuki Miyazawa kzykmyzw
0
140
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
Avatar for kekke-n kekke_n
1
3.4k
凡エンジニアがこの先生きのこるためには。〜TypeScript完全に理解したい〜
Avatar for Ryotaro Harada alchemy1115
2
310
Genie Ontologyは銀の弾丸かを考える / Is Genie Ontology a Silver Bullet?
Avatar for NTT docomo Business nttcom
0
400
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
410
「AIに依存している」と 「AIを使いこなしている」の違い
Avatar for Kensuke Yasuma k8yasuma
0
120
AI Driven AI Governance
Avatar for Yutaka Hiroyama pict3
0
490
Type-safe IaC for Dart
Avatar for Nozomi Koborinai coborinai
0
160

Featured

See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
170
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
410
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
230

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