AngularJS開発事例

ユース・情報システム開発

武山 俊

Agenda

私•武山 俊とは

使ってみて•AngularJSを使ってみて

まとめ•まとめと対策

武山 俊 とは

•ユース・情報システム開発•2011年入社 4年目•システム開発部

• Java JavaScript Perl PHP

•人事教育部•内定者研修、社内勉強会etc…

•芝浦工業大学大学院工学マネジメント研究科在籍

AngularJS開発事例

事例概要

•大学におけるアクティブラーニング支援システム

•エンジニア2名 デザイナ1名

•開発期間• 2014/6 ~ 2014/10 ( 実働 2014/10 ~ 2014/12 )≒大炎上

事例概要

•MEAN環境• MongoDB + Express + AngularJS + Node.js

•12 Controllers

•8 Services

•6 Directives

•CoffeeScriptで5klocくらい

AngularJSを選んだ理由

•流行の技術だったから•レガシーな技術で作られたシステム＝ダサイ•それを導入している大学＝ダサイ

•モジュラリティの高いシステムを組みたかった

•リアルタイムにコミュニケーションできるシステムにしたかった

AngularJSを使い始めてー始め

• jQueryのようにとりあえず使う！はできない•というか有難みをあんまり享受できない•あれもこれも覚えなきゃいけない

•DOM操作しにくい• jqLiteはあるけど…

•日本語のドキュメントが少ない！

AngularJSを使い始めてー中盤１

•双方向バインディング凄く便利！• AngularJSに委譲しているので、バインド対象を意識しなくていい

•サーバとクライアントを分離できる！•モックをユーザに早く確認してもらえる•分業がはっきりできる

•Directiveすごい便利！•デザイナの負担を軽減できる（後述）

AngularJSを使い始めてー中盤２

•実用十分なライブラリー群

AngularJSを使い始めてー中盤３

•実用十分とはいえ枯れたライブラリはない• AngularJS自体がまだ枯れてないので当たり前

•やっぱり学習コストは高い•実装方針・イベント発火仕方など

•HTML＝プログラミング•デザイナの負担が大きい

AngularJSを使い始めてー中盤４

•Coffee ScriptやJadeが必須に感じる•とくにJade（テンプレートエンジン）は必須

• DirectiveがあるとはいえHTMLがかなり複雑になる

AngularJSを使い始めてー終盤

•Controllerの肥大化が酷い• Projectの反省点•基本はarticle、場合によってsectionごとにControllerにしても良いのかもしれない

• Serviceをもっと活用すべきだった• Controller分割の肝

•重い•調子に乗るとクライアントの負荷が高い

• SEO対策どうしよう

AngularJS導入のメリット

•双方向バインドはやっぱり正義

•DOM操作をしなくていい

•サーバとクライアントの分業が容易

•スプリントを回しやすい

AngularJS導入のデメリット

•学習コストが高い

•凝ったつくりにすると動作が重い

•SEO対策が面倒くさい

学習コストが高い

•Service・Directiveが使えないと話にならない

•DOM構造とオブジェクトが密に関連するので、旧来のデザイナには辛い

•UIデザインができないエンジニアにも同様に辛い

•これは頑張るしかない

動作が重い

•双方向バインディングやDirectiveを使いすぎると重い• One-time bindingを使う•場合によってはDirectiveをあきらめる

•ngCloakとUIデザインで体感速度を上げる

SEO対策が面倒くさい

•GoogleのクローラはAngularJSを処理してくれない

•その結果何もないページになってしまう

•静的なページをホストする

•PhantomJS経由でホストする

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