「AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会」発表資料です。 http://eventdots.jp/event/52461

1. ×
@mknkisk 2014/6/2
!
AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会

2. 牧野 圭将
@mknkisk
!
2013年09月 ブラケット 入社
STORES.jp 開発全般
!
一番JS歴が浅いですが一番ヒマそう
だったので今ここにいます

3. 今日のおはなし
❖ STORES.jp と AngularJS
❖ Rails と AngularJS
❖ SEO対応
❖ Google Analytics
❖ リファクタ中のはなし
❖ かるいまとめ

4. 最短2分で、驚くほど簡単に
オンラインストアがつくれる
https://stores.jp

7. x MARKET

8. STORES.jp と AngularJS
ローンチ時点でAngularJSを採用 (2012/09)
当時は今ほど日本で注目を集めていなかった
情報も少なかった
いつから使ってる?

9. STORES.jp と AngularJS
❖ ダッシュボード
(ストアオーナー管理画面)
!
❖ 各ストアのコンテンツ
(メインコンテンツ)
どこで使ってる?

10. STORES.jp と AngularJS
アプリを見据えてサーバサイドは
APIとして使いたかった
どうしてAngularJS?

11. STORES.jp と AngularJS
デザイン編集機能でリアルタイムに変更を反映するために
データバインディングが魅力的だった
どうしてAngularJS?

12. STORES.jp と AngularJS
レイアウトやストア名などを
リアルタイムに反映
!
どんどん切り替わることで
デザインを楽しんでもらう
ストアデザイン編集機能

13. STORES.jp と AngularJS
ng-modle
ng-style
ng-show

14. STORES.jp と AngularJS
Rails, AngularJS とフルスタックのものを採用する
ことで学習すべき要素を明確にしたかった
どうしてAngularJS?

15. Rails と AngularJS
❖ Railsを完全にAPIとしてフロントはAngularJSに任せる
❖ RailsのViewに使いたいところだけ適応する
Rails, AngularJS で調べていくと
2タイプの構成を見かけると思います

16. Rails と AngularJS
❖ RailsのViewに使いたいところだけ適応する
❖ Railsのlayoutで共通部分をレンダリングしている(初回)
❖ 動的に変更する箇所に <ng-view> を設置してルーティング
❖ 必ずしもAngularJSが必要でない部分では使ってない
SEOなど考え試行錯誤した感じがある
STOERS.jp は今こっちです。完全分離はできていません

17. Rails と AngularJS
構成の参考
mkwiatkowski/todo-rails4-angularjs
!
AngularJS本家がRailsとの連携の参考にあげていた
サンプルコード
現在も開発が進められており、今はこの構成に近い

18. Google Analytics
SPAなのでGAのトラッキングコードを読む込むだけでは
各ページをトラッキングできません
!
routeが変わったのをトリガーにGAにURLを通知させました

19. Google Analytics
// ga('send', 'pageview');
GAのトラッキングコードから以下を削除

20. Google Analytics
$routeChangeSuccess を検知して
GAにトラッキング

21. Angulartics
前述のGAトラッキングと同じことができるモジュール
http://luisfarzati.github.io/angulartics/
!
GA以外にも mixpanel や chartbeat もサポート
クリックイベント用のディレクティブも提供
※ui-router を使っているとうまく動作しない?

22. SEO
_escaped_fragment_

23. SEO
❖ PhantomJSで返すとレスポンスが遅い
❖ エラーが起きていてもわかりづらい
❖ GoogleのbotがJSを実行できるようになった?
❖ PhantomJSで返却したHTMLからさらにAngularJSを
実行されると目的のページを返せなくなるかも?

24. SEO
❖ SEO対策は結構面倒
❖ SEOを重視しながらAngularJSを使うなら
ルーティングだけはRailsサイドにするのもありかも

25. リファクタ中のはなし
❖ jQueryプラグインをAngularJSと一緒に使う
❖ $http -> Service
❖ Controllerを分ける (データの共有)

26. ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像情報をループ
jQueryプラグインを適応

27. ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
binding前に実行されるため適応されない

28. ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
Controller内にView周りの
コードが混在してしまう

29. ng-repeatの後に処理を走らせたい
サーバから商品情報を取得
ng-repeatで画像を描画
Directiveでラップして
Controllerから追い出した

30. jQueryプラグインを使う前に
jQueryプラグインをカスタムディレクティブに
実装する前に以下を検討してみる
❖ AngularUI で実現できないか?
http://angular-ui.github.io/
❖ 公開されているディレクティブはないか?
http://ngmodules.org
❖ AngularJSで置き換えられないか?
参考: http://knightso.hateblo.jp/entry/2014/04/10/080207

31. ANGULAR MODULES
❖ http://ngmodules.org
❖ AngularJSの各種モジュールのまとめ
❖ STORES.jp でも以下を採用
❖ angular-file-upload
❖ ngInfiniteScroll

32. $http -> Service
❖ 処理をコントローラーに詰め込んでいくと
どんどんコントローラーが肥大化してしまう
!
❖ 処理上は問題ないが, テストがしにくい,
使い回しができないといった問題が発生してくる

33. $http -> Service
商品一覧を取得する処理は
ダッシュボードでも各ストアでも共通で行われる
幾つかのコントローラーに同じような処理が書かれていた
Serviceに切り出して共通化する

34. $http -> Service

35. AngularJSの学習
JS初心者の自分がAngularJSの学習に参考にしたもの
❖ ドットインストール
❖ 公式チュートリアル
!
公式チュートリアルまでだと敷居は低く感じる (イケル！って思える)
!
ディレクティブやサービス, ファクトリーを作り始めたあたりから独特の
ルールで一気に敷居が上がる

36. AngularJSの学習
最近参考にさせて頂いてるサイト
❖ AngularJS Ninja
❖ http://angularjsninja.com/
❖ js STUDIO (日本語リファレンス)
❖ http://js.studio-kingdom.com/angularjs
❖ AngularJSアプリケーション開発ガイド
❖ O Reilly本 (v1.2.16)

37. まとめ
❖ 少ないコードで実装できている
❖ 学習対象はAngularJSのみで明確だった
❖ 実際にサービスで使ってみるとハマりどころは多い
❖ コントローラーは太らせない
❖ 面倒臭がらなければ結果的にハッピーになれる
❖ SEO対策は面倒。重要度が高い場合は素直に
サーバサイドMVCの方がいいかも

38. ありがとうございました