Contenu connexe
Similaire à フロントエンド初学者がSPAに手を出してみた (20)
フロントエンド初学者がSPAに手を出してみた
- 2. 自己紹介
八木 啓太 (やぎ けいた)
!
SI企業に勤務、Webへの関心から
2011年デジタルハリウッドスクールに入学。
現在は株式会社Art&Strategyの
ディレクターとして従事。
!
twitter:
@shafflife
https://twitter.com/shafflife
- 4. SPA = 最近の技術?
古くはJava, Flashを使ったアプリケーションがあった
→現在はJavascript(JS)を使った開発が注目
http://games.whomwah.com/spacelander.html
- 6. 従来のWebページ
html
css
HTTP Request
(初回)
HTTP Response
クライアントサーバー
js
各種ファイル
HTTP Request
(2回目以降)
…
HTTPプロトコルで指定のファイルを取得、リフレッシュ
- 7. SPAの仕組み
HTTP Request
(初回)
html
クライアントサーバー
css
js
HTTP
Response
HTTP
Request
(2回目以降)
…
Ajax
HTTPで初回に読み込んだファイルをDOM操作、
必要な部分をAjaxで取得
- 14. SPAまとめ
メリット
・単一Webページで構成
→ ページのメンテナンスをJSでコントロール
!
・サーバーが行う処理の大半をクライアント側に移行
→ サーバー側にかかる処理・負荷を減らせる
!
・ページ遷移、画面全体の更新を行わず、部分的な更新が行える
→ 画面遷移が早い
!
⇒動的コンテンツのあるWebサービス構築に強い
デスクトップアプリケーションのような軽快さ、UX
- 15. SPAまとめ
デメリット
・単一Webページで構成
→ JSの書き方次第でパフォーマンスに影響、敷居が高い
(逆にJSをレベルアップするチャンス?)
!
・サーバーが行う処理の大半をクライアント側に移行
→ サーバー自体の性能は変わらず、そちらは別対策が必要(Node.js等)
!
・ページ遷移、画面全体の更新を行わず、部分的な更新が行える
→ SEO対策が苦手
!
⇒静的コンテンツの多いサイト制作に不向き