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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
700

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
OCI Security サービス 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
身体を持ったパーソナルAIエージェントの 可能性を探る開発
Avatar for yoko / Naoki Yokomachi yokomachi
1
110
Security Diaries of an Open Source IAM
Avatar for Alexander Schwartz ahus1
0
210
OCI技術資料 : コンピュート・サービス 概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
54k
脳内メモリ、思ったより揮発性だった
Avatar for koutorino koutorino
0
280
kintone開発のプラットフォームエンジニアの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
870
Yahoo!ショッピングのレコメンデーション・システムにおけるML実践の一例 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
200
NewSQL_ ストレージ分離と分散合意を用いたスケーラブルアーキテクチャ
Avatar for hacomono Inc. hacomono
PRO
3
280
vLLM Community Meetup Tokyo #3 オープニングトーク
Avatar for jpishikawa jpishikawa
0
330
白金鉱業Meetup_Vol.22_Orbital Senseを支える衛星画像のマルチモーダルエンベディングと地理空間のあいまい検索技術
Avatar for BrainPad brainpadpr
2
290
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.2k
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
Avatar for ishii-takuya taku1418
0
130

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
820
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
70
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
860
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
450
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
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