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
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
510
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
480

Other Decks in Technology

See All in Technology
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
250
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
Avatar for Kenichi Kambara korodroid
2
1k
組織改革から開発効率向上まで！ - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
160
Biz職でもDifyでできる！ 「触らないAIワークフロー」を実現する方法
Avatar for kanacan igarashikana
2
650
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k
Wasmの気になる最新情報
Avatar for asuka askua
0
140
ソフトウェアエンジニアの生成AI活用と、これから
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
540
新規事業におけるGORM+SQLx併用アーキテクチャ
Avatar for hacomono Inc. hacomono
PRO
0
410
AIエージェント入門 〜基礎からMCP・A2Aまで〜
Avatar for Shu Kobuchi shukob
0
110
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
170
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
Avatar for AEON aeonpeople
1
200
「改善」ってこれでいいんだっけ？
Avatar for うきぐも / すずき ukigmo_hiro
0
360

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k

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