『AngularJSでのモバイルフロントエンド開発』というタイトルで発表してきた


## はじめに

[ITエンジニア勉強会~ Engineer’s Learning Vesper](http://learningvesper.doorkeeper.jp) という勉強会で **『AngularJSでのモバイルフロントエンド開発』** というタイトルの発表をしてきました。

![スクリーンショット 2014-09-30 17.35.01.png](https://qiita-image-store.s3.amazonaws.com/0/35733/9a09e202-ad21-9bd8-6df5-cc3dadd9f57b.png "スクリーンショット 2014-09-30 17.35.01.png")

スライドはこちら⇒http://www.slideshare.net/hiroyukikusu/elvangularjs

要約をこちらにも投稿します。スマホ用のWEBサイトに AngularJS の導入を検討されている方の参考になれば。

## AngularJSとは

- Google製の JavaScript フレームワーク
- MV*（またはMVW)
- フルスタック
	- 機能は豊富だが、いわゆる「AngularJS way」

## モバイルでAngularJSを使うメリット

- 純粋にフレームワークとしてのメリットの享受
	- コード量的に **中規模** までは耐えうる
		- 大規模になると性能の問題がでてくる
- 他の **CSSフレームワーク** と組み合わせてアプリっぽく
	- Onsen UI、ionic、Famo.us
- **Webの技術** でアプリケーションが作れる
	- 1ソースで iOS/Android 両対応
	- ただし現時点ではネィティブアプリほどのUXは実現できない
- **SPA** (シングル•ページ•アプリケーション)
	- モバイルなので通信量は抑える必要があるため

## 利用するCSSフレームワーク

- AngularJSをベースとし、また現時点で完成度が高いのは2つ
	- [Onsen UI](http://ja.onsenui.io/)
	- [ionic](http://ionicframework.com/)

## モバイル利用でのポイント

### ① 通信頻度/量のチューニング

モバイル環境で AngularJS を利用する際は（AngularJS に限らずフロントエンドは） **通信頻度/量の削減** が不可欠です。

1. **ファイルの数と容量を減らす**
	- JavaScript/CSSファイル群の **ファイル圧縮(minify)** , **ファイル結合(concat)**
	- 画像ファイルの最適化(縦横サイズ、容量)
		- もしくは **CSSスプライト** を利用
	- ファイル郡の **gzip** 圧縮
2. **ブラウザに読み込んだものは使い回す**
	- JavaScript/CSS/HTML/画像/連携APIの **ブラウザキャッシュ**
		- HTTPレスポンスヘッダの最適化(サーバ側)
		- ブラウザからの条件つきリクエストへの対応(サーバ側)
	- メモリ(JavaScriptオブジェクト)
		- **モデル** をきちんと設計
		- AngularJSに限った話であれば、
			- HTMLは angular-ui-router の **テンプレート機構** でメモリへキャッシュ
			- 外部APIは **$httpサービス** でメモリへキャッシュ
	- ..HTML5の Application Cache は使い勝手が悪い
3. **遅延ロード(必要になったらロード)**
	- JavaScriptファイル群
		- **RequireJS** (ただし複雑度はあがる）
		- ただしファイル結合の恩恵を受けれなくなるので、都度判断
	- HTMLファイル群
		- angular-ui-router 等の **テンプレート機構** で
	- CSSファイル群の遅延ロードは恐らく推奨されない
	- 画像の遅延ロード(ブラウザの表示領域にはいったら読み込む)
	- ページの作り方として、例えば商品が100件あったら5件づつ表示など
4. **体感**
	- **レスポンスを待ってる感が無い** UIを考える
	- ユーザが気づかないうちにAPIを叩く
		- **先読み、非同期**
5. **ネットワーク**
	- 静的リソース群なので **CDN** (Contents Delivery Network) を利用するのがお手軽。
		- AWS でいえば CroudFront
	- 接続コネクションの **keepalive**

### ② そのほかチューニング項目

通信まわり以外でも、下記を気にする必要がある。

- 動作速度
- 描写速度
- メモリ利用量

### ③ セキュリティ対策

- ソースはブラウザ側なので **全て解読される** 前提で
	- 中間者による改竄を防ぐなら全てSSLページで
	- 重要な処理は、やはりサーバ側にAPIを用意する必要ある
- フロントエンドで考えるべきは大きく３つ
	1. **DOM Based XSS** (Cross Site Scripting)
	1. **CSRF** (Cross Site Request Forgeries)
	1. **CSP** (Content Security Policy)

### ④ SEO

- クローラが **JavaScriptを解釈しない？** かもなので注意
	- つまり、JavaScriptで動的に描写したHTMLコンテンツを読ませることが出来ない
	- 必要あらば **PhantomJS** 等のサーバ側JavaScriptでコンテンツ書き出し

### ⑤ ほか

- ちゃんとやるなら、例えばネィティアプリのように **バージョンアップ通知** を表示する
	- 運営側で新しいソースコードをブラウザ側へ反映したい場合
	- メモリ系はブラウザをリロードさせればOKだが、ブラウザのファイルキャッシュやストレージも対象となるので、ちゃんとやるなら作り込みが必要かも

## AngularJSを使ってみての感想

- きちんと **MV*構成** を設計すれば、テスト(コード)が楽
- **モデル/サービス** をきちんと設計しないと、色んなところで同じようなものを作る羽目になる
- モバイルで **大規模なもの** には今のところ向かないと思う
	- 前述のファイル容量や性能の問題
- **CSSフレームワーク** はなるべくカスタマイズしない方が良い
	- フレームワークの枠を越えると、とたんに複雑になる
- **Android** は作り方や端末によってはもっさりするかも
	- 特にネィティブアプリの **WebView** 経由は注意

## ほか

- **Yeoman** を使って環境構築
- alt(代替)系の言語の利用
	- **CoffeeScript、SASS、Haml**
	- ..まあここは、好みがあると思います
- IDE
	- **WebStorm** が使いやすい
- AngularJSの書籍
	- [AngularJSアプリケーション開発ガイド](http://www.amazon.co.jp/dp/4873116678)
	- [AngularJSリファレンス](http://www.amazon.co.jp/dp/4844336681)
- AngularJS(JavaScript)の学習方法
	- (知らなければ)まずJavaScriptについて知る
		- [JavaScript 第6版](http://www.amazon.co.jp/dp/4873115736/)
	- JavaScriptの周辺環境について知る
		- [フロントエンドエンジニア養成読本](http://www.amazon.co.jp/dp/4774165786)
	- AngularJSの本体ソースと公式リファレンスを読む
		- https://github.com/angular/angular.js
		- http://docs.angularjs.org/api
	- Qiitaの投稿をみる
		- http://qiita.com/tags/angularjs
	- ともあれ、とにかく書く！作る！

## おわりに

導入の際にどのような点に注意するべきかが伝われば幸いです。

また、以前に『HTML5 Japan Cup 2014』というイベント向けに、個人で AngularJS と Onsen UI で作成したものが下記にあります。ライトなものですが、宜しければ参考にしてください。

- 作品(モバイル向け) ⇒ http://hkusu.github.io/gp-kao-catalog/
- 応募作品の詳細 ⇒ https://5jcup.org/works/53b0e2ca43df3d6b87005186

今のところ、こういうライトなものだったら十分に使えるんじゃないかな、と思います。
（もちろんヘビーなものも、ちゃんと作ればいけるとは思います。）