フロントエンド初学者が SPAに手を出してみた

2014/ 9/ 8

自己紹介

八木 啓太　(やぎ けいた) !

SI企業に勤務、Webへの関心から

2011年デジタルハリウッドスクールに入学。

現在は株式会社Art&Strategyの

ディレクターとして従事。

!

twitter:

@shafflife

https://twitter.com/shafflife

シングルページWebアプリケーション(SPA)とは？

・単一Webページで構成 !

・サーバーが行う処理の大半をクライアント側に移行 !

・ページ遷移、画面全体の更新を行わず、 　部分的な更新が行える

SPA ＝ 最近の技術？

古くはJava, Flashを使ったアプリケーションがあった →現在はJavascript(JS)を使った開発が注目

http://games.whomwah.com/spacelander.html

SPA ＝ シングルページデザイン？

1枚ページで完結するWebページと仕組みがちょっと違う

http://bohemiancoding.com/sketch/

従来のWebページ

クライアント サーバー

各種ファイル

html

css

js

HTTP Request (初回)

HTTP Response

HTTP Request (2回目以降)

…

HTTPプロトコルで指定のファイルを取得、リフレッシュ

SPAの仕組み

HTTPで初回に読み込んだファイルをDOM操作、

必要な部分をAjaxで取得

クライアント サーバーhtml

css

js

HTTP Response

HTTP Request (2回目以降)

HTTP Request (初回)

…

Ajax

SPAの実装例(1/4)

http://engineer.typemag.jp/article/spa-dev http://www.hulu.jp

SPAの実装例(2/4)

http://qz.com/

SPAの実装例(3/4)

https://www.getcloudapp.com/

SPAの実装例(4/4)

https://trello.com/

SPAを構築するには

https://angularjs.org/ http://knockoutjs.com/ http://backbonejs.org/ http://www.sencha.com/ http://emberjs.com/

主にJavascriptフレームワークを使って開発

DEMO

http://emberjs.com/

SPAまとめ

メリット

・単一Webページで構成

　→ ページのメンテナンスをJSでコントロール

!

・サーバーが行う処理の大半をクライアント側に移行

　→ サーバー側にかかる処理・負荷を減らせる

!

・ページ遷移、画面全体の更新を行わず、部分的な更新が行える

　→ 画面遷移が早い

!

⇒動的コンテンツのあるWebサービス構築に強い 　デスクトップアプリケーションのような軽快さ、UX

SPAまとめ

デメリット

・単一Webページで構成

　→ JSの書き方次第でパフォーマンスに影響、敷居が高い

　　(逆にJSをレベルアップするチャンス？)

!

・サーバーが行う処理の大半をクライアント側に移行

　→ サーバー自体の性能は変わらず、そちらは別対策が必要(Node.js等)

!

・ページ遷移、画面全体の更新を行わず、部分的な更新が行える

　→ SEO対策が苦手

!

⇒静的コンテンツの多いサイト制作に不向き

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