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

SPAの基礎

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
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.6k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
890
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
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
8k

Other Decks in Technology

See All in Technology
Goodbye ShellScript, Hello File-based App
Avatar for Shunsuke Tsuchiya shunsock
0
600
AIに賢く動いてもらうためのコンテキスト〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
140
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
5
1.2k
Slack上でインフラをトラブルシュートする！ Agentic Platform Engineeringの第一歩
Avatar for teru0x1 teru0x1
5
1.8k
AIによるクリエイティブ生成を行う上での試行錯誤
Avatar for PLAID Tech plaidtech
PRO
0
170
beyond jj: config & tools ecosystem
Avatar for André Arko indirect
0
5.7k
AIは推し活である。
Avatar for くらず / Kurazu kurazuuuuuu
1
930
Why Agent Cost Needs Observability
Avatar for NTT docomo Business nttcom
0
110
AIエージェントの一手は 誰も見ていない - Falco拡張OSS「Prempti」とeBPFで サーバーレス実行基盤を二層防御する
Avatar for がっきー（がっきー） keitah
0
440
The Knowledge Spine: A Machine-Executable Ontology for Governed Marketing Activation
Avatar for Ananth Packkildurai vananth22
0
120
2026_devsumi_ozono.pdf
Avatar for O3(ozono) o3
3
550
AIエージェントを最高のパートナーに育てる方法｜評価と判断軸を育てる5つのステップ
Avatar for 青木 晃一｜AI・Copilot活用 koichiaoki
1
160

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
680
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
58k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.3k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k

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