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

SPAの基礎

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for takanorip takanorip
October 20, 2016
Technology
710
0

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
AIの揺らぎに“コシ”を与える階層化品質設計
Avatar for ICKX ickx
0
270
AIエージェントの支払い基盤　AgentCore Payments概要
Avatar for たけのこ kmiya84377
2
160
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
Avatar for KAKEHASHI kakehashi
PRO
5
1.2k
生成AIはソフトウェア開発の革命か、ソフトウェア工学の宿題再提出なのか -ソフトウェア品質特性の追加提案-
Avatar for kyonmm kyonmm
PRO
2
870
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
Avatar for butatamasoba / Shota Kusaba / 草場翔太 shota_kusaba
0
170
Every Conversation Counts
Avatar for Yasunobu Kawaguchi kawaguti
PRO
0
200
ESP32 IoTを動かしながらメモリ使用量を観測してみた話
Avatar for ZOZO Developers zozotech
PRO
0
100
鹿野さんに聞く！CSSの最新トレンド Ver.2026
Avatar for tonkotsuboy_com tonkotsuboy_com
6
2.8k
Purview 勉強会報告 Microsoft Purview 入門しようとしてみた
Avatar for masakichi masakichixo
1
260
Claude Code / Codex / Kiro に AWS 権限を 渡すとき、何を設計すべきか
Avatar for Kazuki Adachi k_adachi_01
4
760
「QA＝テスト」「シフトレフト＝スクラムイベントの参加者の一員」の呪縛を解く。アジャイルな開発を止めないために、10Xで挑んだ「右側のしわ寄せ」解消記 #scrumniigata
Avatar for nihonbuson nihonbuson
PRO
5
990
The 7 pitfalls of AI
Avatar for Uwe Friedrichsen ufried
0
200

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
750
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
920
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
270
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
190
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Design in an AI World
Avatar for tapps tapps
1
210
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.1k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k

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