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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
670

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
130
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.5k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
140
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
890
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
14
7.2k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
4
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
490
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
3.9k

Other Decks in Technology

See All in Technology
TechLION vol.41～MySQLユーザ会のほうから来ました / techlion41_mysql
Avatar for sakaik sakaik
0
180
AIのAIによるAIのための出力評価と改善
Avatar for たまねぎ chocoyama
2
550
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
Avatar for kubell kubell_hr
1
150
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
Avatar for Yuya Takeyama yuyatakeyama
3
1.2k
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
120
A2Aのクライアントを自作する
Avatar for Ryunosuke Iwai rynsuke
1
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
Avatar for K.Osawa kkuv
1
310
Oracle Cloud Infrastructure：2025年6月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
2
240
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
150
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
440
AIエージェント最前線！ Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
Avatar for みのるん minorun365
PRO
14
5.1k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k

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