Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

SPAの基礎

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for takanorip takanorip
October 20, 2016
Technology
730
0

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016

More Decks by takanorip

See All by takanorip
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
780
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6.3k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.8k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.4k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
920
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
320
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.2k

Other Decks in Technology

See All in Technology
re:Invent初参加で変わったこと、2回目にやってみたいこと（JAWS-UG彩の国埼玉 #12）
Avatar for 株式会社みずほ銀⾏ 情報数理⼯学研究所 デジタル技術開発部 mhrtech
2
220
ソフトウェア ファクトリー - 再現性のあるソフトウェアの工場づくり / Software factory
Avatar for Takahiro Ikeuchi iktakahiro
6
4.9k
AIにシークレットを見せない、WSL2で安全な開発環境
Avatar for yazm4 yazm
0
300
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
140
"優秀な誰か"の下位互換にならないために
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
1.8k
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
290
AI駆動で「他アプリの音を加工できる」アプリを作った
Avatar for Masahiro satomasahiro2005
0
150
How to Design Configuration for Rails Applications
Avatar for Shinichi Maeshima willnet
1
780
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
Avatar for koukihosaka koukihosaka
1
340
Optunaの最新リリースv5.0について
Avatar for Preferred Networks pfn
PRO
0
120
Metadata - Section 1: HTML Basics
Avatar for mohab soliman mohab1
0
120
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
210

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
580
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
300

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