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

SPAの基礎

Avatar for takanorip takanorip
October 20, 2016
Technology
0
680

 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
460
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.1k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
4k

Other Decks in Technology

See All in Technology
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
Avatar for daitasu daitasu
0
170
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
6
380k
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
10
3.5k
Android Audio: Beyond Winning On It
Avatar for Atsushi Eno atsushieno
0
2.4k
なぜスクラムはこうなったのか？歴史が教えてくれたこと/Shall we explore the roots of Scrum
Avatar for Genki Sano sanogemaru
5
1.6k
AI開発ツールCreateがAnythingになったよ
Avatar for s sato tendasato
0
130
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
Avatar for JaeSoon Jeong jeongjaesoon
0
220
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
Avatar for KASUYA, Daisuke daiksy
2
460
はじめてのOSS開発からみえたGo言語の強み
Avatar for shibutani shibukazu
3
900
大「個人開発サービス」時代に僕たちはどう生きるか
Avatar for Sotaro Karasawa sotarok
20
10k
DroidKaigi 2025 Androidエンジニアとしてのキャリア
Avatar for mhidaka mhidaka
2
370
Modern Linux
Avatar for oracle4engineer oracle4engineer
PRO
0
150

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k

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