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

SPAの基礎

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
October 20, 2016
Technology
0
390

 SPAの基礎

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
ソフトウェアエンジニアの教養を養う本
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
13k
共創するためのデザイン批評
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
170
Headless Components Design
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
39
10分で理解する HTML Modules
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
390
Polymer Project 2020
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
120
技術とデザインの間
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
1.3k
Color in Interface Experience
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
89
ウェブフォント今昔物語
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.6k

Other Decks in Technology

See All in Technology
動画配信技術について
Cb4d62dd7c1d325863696c45e9b6484d?s=48 yaminoma
0
210
成長を続ける組織でのSRE戦略：プレモーテムによる信頼性の認識共有 SRE Next 2022
Dccc861c47a9a7bfc7f71a86e1245897?s=48 niwatakeru
7
2.3k
Steps toward self-service operations in eureka
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
0
440
Nutanix_Meetup_20220511
0fca98ba59a23fc0a4a2a53701a2bae1?s=48 keigotomomatsu
0
140
220510 プロセスマイニングを学ぶ PLAY与田さん
50bc42471d197d0dbef7171f2ef85bb6?s=48 comucal
PRO
0
700
ISUCON で使えるツールを作った
Cb17938137021ead2656d0fe58b7c7b1?s=48 shotakitazawa
0
350
Embedded SRE at Mercari
Ecb3acc2d246962361a4f8b3f7a6dd12?s=48 tcnksm
0
810
Power BI Report Ops
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
160
2022年度ロボットフロンティア第1回
114d1b33c50cdc86c4c641682190407f?s=48 ryuichiueda
0
140
モデリング、コンテキスト トランジション +1 / Data modeling
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
0
110
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
3
1.3k
Deeplearning from almost scratch
180bbdf8267422d5814fd498ecea043a?s=48 hn410
0
580

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
3.9k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
212
11k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
56
5.2k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.1k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
343
17k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
31
5.8k

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