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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
680

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
630
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
510
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
480

Other Decks in Technology

See All in Technology
ソースを読む時の思考プロセスの例-MkDocs
Avatar for Satoru Takeuchi sat
PRO
1
160
Dify on AWS 環境構築手順
Avatar for Hiroaki Yoshimura yosse95ai
0
120
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
Avatar for Yuji Oshima yuj1osm
1
130
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
Avatar for Makky makky_tyuyan
0
120
OCIjp_Oracle AI World_Recap
Avatar for Shinya Omori shinpy
1
180
もう外には出ない。より快適なフルリモート環境を目指して
Avatar for もっち mottyzzz
13
10k
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
230
ソフトウェアエンジニアの生成AI活用と、これから
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
890
ローカルLLMとLINE Botの組み合わせ その2（EVO-X2でgpt-oss-120bを利用） / LINE DC Generative AI Meetup #7
Avatar for you（@youtoy） you
PRO
1
160
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
Avatar for SansanTech sansantech
PRO
1
300
Kubernetes self-healing of your workload
Avatar for Hung-Wei Chiu hwchiu
0
500
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
600
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Done Done
Avatar for chrislema chrislema
185
16k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k

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