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

SPAの基礎

takanorip
October 20, 2016
Technology
0
640

 SPAの基礎

takanorip

October 20, 2016
Tweet

More Decks by takanorip

See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発！
takanorip
0
100
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
790
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k

Other Decks in Technology

See All in Technology
事業を差別化する技術を生み出す技術
pyama86
2
550
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
230
Pwned Labsのすゝめ
ken5scal
2
580
AI Agent時代なのでAWSのLLMs.txtが欲しい！
watany
3
390
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.1k
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
4
1.5k
スクラムというコンフォートゾーンから抜け出そう！プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
210
困難を「一般解」で解く
fujiwara3
8
2.4k
QAエンジニアが スクラムマスターをすると いいなぁと思った話
____rina____
0
200
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
120
エンジニア主導の企画立案を可能にする組織とは？
recruitengineers
PRO
1
320
いまからでも遅くない！コンテナでWebアプリを動かしてみよう！コンテナハンズオン編
nomu
0
190

Featured

See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Optimizing for Happiness
mojombo
377
70k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Git: the NoSQL Database
bkeepers
PRO
429
65k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
RailsConf 2023
tenderlove
29
1k
Side Projects
sachag
452
42k
Writing Fast Ruby
sferik
628
61k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building an army of robots
kneath
303
45k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
205
24k

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