ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

AngularJSを導入した感想

これまでドットインストールの動画でさらっただけでしたが、AngularJSを本格的に導入し始めた感想を書いてみます。

面倒なDOM操作から解き放たれる

AngularJSは豊富な機能を持っていますが、現状では何よりこれが一番のメリットに感じます。
モデルの状態を監視し、自動で値を更新してくれます。例えばこれにより「コメントを書いたらテンプレートに当てはめて末尾に挿入、ついでにカウントのidを探してinnerHTMLで更新」なんて面倒なことからおさらばできます。

この恩恵は過去いくつもの技術系サイトで見てきましたが、"一部を大袈裟に喧伝してるだけだろう"なんて正直思っていました。(ごめんなさい)
しかし実際は汎用性抜群でこんなことも軽くこなしてくれます。

div ng-if="review === 0"
  img src="Bad.png"

div ng-if="review === 1"
  img src="Good.png"

YouTubeの動画評価のようにレビューとしてGoodかBadを投稿するコンテンツがあったとします。
最初ユーザーはBad(=0)を投稿したが、後からGood(=1)に変更した場合、値の「review」の変更を検知してくれて、if以下のHTMLを切り替えてくれるので、画像のソースをいじる必要がありません。

このような状態による分岐はAngularJSが得意とするところで、サーバーサイドよりも柔軟にこなしてくれます。

サーバーサイドはビジネスロジックに集中できる

上記の機能のほか、配列をrepeatで一括表示してくれたり、バリデーションをしてくれたり、アニメーション機能(実装はCSS)まで用意してくれるので、サーバーサイドは見栄えの上でJSONを吐き出す以上の機能はあまり求められません。

これまでhelperで別ファイルにモジュール化していたようなものもAngularがやってくれるので、サーバーサイドはビジネスロジックに集中することができます。

英語が読めないとキツイ

AngularJSは新しいフレームワークでいかんせん日本語情報が少ないので、入門段階から英語ドキュメントを読むことになります。

僕も英語が苦手でいつも苦労しているのですが、最低限平易な長文がスラスラ読めないと習得するのに骨が折れるかもしれません。

ブラウザ互換は弱め

別途手順を踏めばIE7にも対応できますが、デフォルトではIE8以上の対応です。
さらにアニメーションはCSS依存なのでIE10以上、pushStateもIE10以上とレガシーブラウザには優しくありません。(Android Browserも一部pushState非対応)

さらにサーバーサイドの仕事をクライアントに投げるので、対応しているIE8でもJavaScriptがかなり遅いせいでどうしてもモッサリしがちです。

基本スタンスとして「メインターゲットはIE10以上、一応IE9でも8でも動くよ」というように捉えた方がいいかもしれません。

Railsとの相性は良くはない

良くはないですが、別に悪いわけではありません。
しかしよく比較されがちなBackbone.jsはRailsとの相性が抜群なのを考えると、少し残念に感じます。

といってもRails自体がjqueryを前提に作られており、Backboneがjqueryに依存している面が強いのですが、具体的にはAjax通信の際にプログラマーが意識せずとも勝手にCSRF対策を施してくれるのに対して、Angularの場合は別途対策をする必要があります。

またAngularがjqueryに依存しないので、Railsの「remoteオプション」系のイベントを拾うことができず、これらAjax周りはBackboneに分があります。(jqueryとは競合しないのでjqueryのイベントリスナーで対応可能だが、あまりスマートな方法ではない)

重たい(容量的に)

Backbone.jsはunderscore.jsやjqueryに依存し、MVCの最低限の機能を提供しているのとは対照的に、AngularJSはelementの他はjqueryにも依存せずフルスタックなフレームワークです。

実際に容量を見るとBackbone.jsが20KBなのに対してAngularJSは単体で100KBあり、その他付随機能を足していくとさらに重たくなります。

またjqueryに依存しないとは言ったものの、やはりjqueryプラグインの資産は強力で、何かとjqueryに頼らざるを得ず、JSのファイルが相当に肥大してきます。

Railsのasset pipelineでminify & gzip化してもなお、ユーザーの待機時間が気にかかるところです。

まとめ

メリット・デメリットはそれぞれ挙げましたが、総合的には導入するのが遅すぎたと思うほどメリットが非常に大きいです。

jqueryのTraversingは従来型のDOM操作を一新させるものでしたが、AngularはDOM操作自体を不要にしてくれます。
それによりソースコードの可読性、メンテナンス性が劇的に向上するので、継続的に手を加えていくアプリケーションの場合は必須ではないかと感じるほどです。

もちろん本格的に導入といっても、まだ日が浅く、これからさらに恩恵を感じたり、ハマったり色々あるかと思いますが、とりあえず参考までに記事にしてみました。