AngularJS開発を通して感じたこと

1. AngularJS開発事例
ユース・情報システム開発
武山 俊

2. Agenda
私
•武山 俊とは
使ってみて
•AngularJSを使ってみて
まとめ
•まとめと対策

3. 武山 俊 とは
• ユース・情報システム開発
• 2011年入社 4年目
• システム開発部
• Java JavaScript Perl PHP
• 人事教育部
• 内定者研修、社内勉強会etc…
• 芝浦工業大学大学院
工学マネジメント研究科在籍

4. AngularJS開発事例

5. 事例概要
• 大学におけるアクティブラーニング支援システム
• エンジニア2名 デザイナ1名
• 開発期間
• 2014/6 ~ 2014/10 ( 実働 2014/10 ~ 2014/12 )≒大炎上

6. 事例概要
• MEAN環境
• MongoDB + Express + AngularJS + Node.js
• 12 Controllers
• 8 Services
• 6 Directives
• CoffeeScriptで5klocくらい

7. AngularJSを選んだ理由
• 流行の技術だったから
• レガシーな技術で作られたシステム＝ダサイ
• それを導入している大学＝ダサイ
• モジュラリティの高いシステムを組みたかった
• リアルタイムにコミュニケーションできるシステ
ムにしたかった

8. AngularJSを使い始めてー始め
• jQueryのようにとりあえず使う！はできない
• というか有難みをあんまり享受できない
• あれもこれも覚えなきゃいけない
• DOM操作しにくい
• jqLiteはあるけど…
• 日本語のドキュメントが少ない！

9. AngularJSを使い始めてー中盤１
• 双方向バインディング凄く便利！
• AngularJSに委譲しているので、バインド対象を意識
しなくていい
• サーバとクライアントを分離できる！
• モックをユーザに早く確認してもらえる
• 分業がはっきりできる
• Directiveすごい便利！
• デザイナの負担を軽減できる（後述）

10. AngularJSを使い始めてー中盤２
• 実用十分なライブラリー群

11. AngularJSを使い始めてー中盤３
• 実用十分とはいえ枯れたライブラリはない
• AngularJS自体がまだ枯れてないので当たり前
• やっぱり学習コストは高い
• 実装方針・イベント発火仕方など
• HTML＝プログラミング
• デザイナの負担が大きい

12. AngularJSを使い始めてー中盤４
• Coffee ScriptやJadeが必須に感じる
• とくにJade（テンプレートエンジン）は必須
• DirectiveがあるとはいえHTMLがかなり複雑になる

13. AngularJSを使い始めてー終盤
• Controllerの肥大化が酷い
• Projectの反省点
• 基本はarticle、場合によってsectionごとにControllerにし
ても良いのかもしれない
• Serviceをもっと活用すべきだった
• Controller分割の肝
• 重い
• 調子に乗るとクライアントの負荷が高い
• SEO対策どうしよう

14. AngularJS導入のメリット
• 双方向バインドはやっぱり正義
• DOM操作をしなくていい
• サーバとクライアントの分業が容易
• スプリントを回しやすい

15. AngularJS導入のデメリット
• 学習コストが高い
• 凝ったつくりにすると動作が重い
• SEO対策が面倒くさい

16. 学習コストが高い
• Service・Directiveが使えないと話にならない
• DOM構造とオブジェクトが密に関連するので、
旧来のデザイナには辛い
• UIデザインができないエンジニアにも同様に辛
い
• これは頑張るしかない

17. 動作が重い
• 双方向バインディングやDirectiveを使いすぎる
と重い
• One-time bindingを使う
• 場合によってはDirectiveをあきらめる
• ngCloakとUIデザインで体感速度を上げる

18. SEO対策が面倒くさい
• GoogleのクローラはAngularJSを処理してくれ
ない
• その結果何もないページになってしまう
• 静的なページをホストする
• PhantomJS経由でホストする

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