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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
720
0

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
5.8k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.5k
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
860
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.3k
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
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
Avatar for k.muguruma mtpooh
3
280
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
140
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
Avatar for MasahiroKawahara masahirokawahara
1
280
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
220
Claude Codeで開発以外の業務も爆速化しよう！
Avatar for みのるん minorun365
PRO
12
9.6k
Claude Codeの体系的な理解と知識のフック
Avatar for Oikon oikon48
10
6.6k
Azure App Service / Container Apps の組み込み認証
Avatar for Kuniteru Asami kuniteru
0
190
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
3
2k
いかに伝えるか　〜新卒エンジニアの教育のための、ライトノベル活用の一例
Avatar for Akira Ikeda（池田 暁） ikedon
1
180
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.1k
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
2.1k
本番に近いテストをもっと手軽に - Postmanで広がるAPIテストの世界 / Expanding the World of API Testing with Postman
Avatar for Yoichi Kawasaki yokawasa
1
240

Featured

See All Featured
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
410
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
210
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
250
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
270
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
510
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k

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