Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
690

 SPAの基礎

Avatar for takanorip

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
2
1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
810
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
590
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
220
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
530

Other Decks in Technology

See All in Technology
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
210
Noを伝える技術2025: 爆速合意形成のためのNICOフレームワーク速習 #pmconf2025
Avatar for Aki / @LoveIdahoBurger aki_iinuma
2
2.1k
世界最速級 memcached 互換サーバー作った
Avatar for yasukata yasukata
0
330
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
Avatar for hawky the miscellaneous hawkymisc
1
160
Debugging Edge AI on Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
120
Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
570
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
220
SSO方式とJumpアカウント方式の比較と設計方針
Avatar for Yuto Obayashi yuobayashi
7
510
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
590
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
Avatar for tomoki10 tomoki10
0
320
ChatGPTで論⽂は読めるのか
Avatar for Spatial AI Network spatial_ai_network
0
100
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
220

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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