1.
フロントエンド初学者が
SPAに手を出してみた
2014/ 9/ 8

2.
自己紹介
八木 啓太 (やぎ けいた)
!
SI企業に勤務、Webへの関心から
2011年デジタルハリウッドスクールに入学。
現在は株式会社Art&Strategyの
ディレクターとして従事。
!
twitter:
@shafflife
https://twitter.com/shafflife

3.
シングルページWebアプリケーション(SPA)とは？
・単一Webページで構成
!
・サーバーが行う処理の大半をクライアント側に移行
!
・ページ遷移、画面全体の更新を行わず、
部分的な更新が行える

4.
SPA ＝ 最近の技術？
古くはJava, Flashを使ったアプリケーションがあった
→現在はJavascript(JS)を使った開発が注目
http://games.whomwah.com/spacelander.html

5.
SPA ＝ シングルページデザイン？
1枚ページで完結するWebページと仕組みがちょっと違う
http://bohemiancoding.com/sketch/

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で取得

8.
SPAの実装例(1/4)
http://engineer.typemag.jp/article/spa-dev
http://www.hulu.jp

9.
SPAの実装例(2/4)
http://qz.com/

10.
SPAの実装例(3/4)
https://www.getcloudapp.com/

11.
SPAの実装例(4/4)
https://trello.com/

12.
SPAを構築するには
https://angularjs.org/
http://knockoutjs.com/
http://backbonejs.org/
http://www.sencha.com/
http://emberjs.com/
主にJavascriptフレームワークを使って開発

13.
DEMO
http://emberjs.com/

14.
SPAまとめ
メリット
・単一Webページで構成
→ ページのメンテナンスをJSでコントロール
!
・サーバーが行う処理の大半をクライアント側に移行
→ サーバー側にかかる処理・負荷を減らせる
!
・ページ遷移、画面全体の更新を行わず、部分的な更新が行える
→ 画面遷移が早い
!
⇒動的コンテンツのあるWebサービス構築に強い
デスクトップアプリケーションのような軽快さ、UX

15.
SPAまとめ
デメリット
・単一Webページで構成
→ JSの書き方次第でパフォーマンスに影響、敷居が高い
(逆にJSをレベルアップするチャンス？)
!
・サーバーが行う処理の大半をクライアント側に移行
→ サーバー自体の性能は変わらず、そちらは別対策が必要(Node.js等)
!
・ページ遷移、画面全体の更新を行わず、部分的な更新が行える
→ SEO対策が苦手
!
⇒静的コンテンツの多いサイト制作に不向き

16.
ご清聴ありがとうございました