Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

AngularJSと1年間付き合ってきたので

Angularなんかより可愛い女子と付き合いたかった AngularJS 1と1年間付き合ってきたのでまとめ話です。2ではありません。

僕の考えるAngularJSを使うメリット・デメリット

メリット

  • MVCを簡単に書ける。
  • テストが簡単にできる。
  • 面倒なデータバインディングだとかイベント関連の処理をなるだけ触れずに済む。
  • 記述量が少ない。
  • 軽いアプリ作るときに便利。
  • 使いこなせるとかなり強力。

デメリット

  • 使いこなせないとスパゲッティコードしか生まない。
  • 重い。デカいアプリ作るのには向かない。
  • 一度始めるとAngular独自の部分が多く、他へ移りづらく再利用性が低い。
  • 英語含め情報量が少なく、エラーから抜け出せなくなることがある。
  • JavaScript的な考え方が通用しなかったりする。
  • AngularJSなのにバージョン1と2が別物すぎる。

こんなところ。今回はデメリットを潰していく感じの記事にします。今決めた。

まずは使いこなす

今年2015年は自分で記事を書いたり、いい記事見つけたので貼り貼り。

とりあえず自分で書いた分。

AngularのServiceとFactoryの使い分け(ほぼ)決定版

まずAngularJSではまる点はServiceとFactoryの使い分けだと思います。この記事では具体的にどう使い分けるべきか書いてあります。

Angularでスパゲッティを作ったことがある人へ

MVCを理解して書けないとAngularJSはスパゲッティしか生みません。この記事では私がMVCに則り書いたコードを紹介しています。

MVCの利点

MVCを使う理由について。

見つけた分。

AngularJS Directive なんてこわくない(その1)

AngularでService、Factoryと並んで重要な要素の一つがDirectiveです。中々他にない概念で理解がしづらい要素です。まずこの記事読んで、コード書いて覚えるのがおそらく最速です。

とりあえず最低限これだけ読めばドキュメント見つつまともなAngularが書けると思います。

重い

AngularJSはDirty Checkをしているのでかなりパフォーマンスが悪く、大きいアプリは作れません。小さなアプリでも端末によってはかなり動作が遅くなります。AngularJSにとってパフォーマンスは死活問題なのです。

解決策はDirty Checkで監視する数を減らすことです。ほぼこれだけでパフォーマンスは改善できます。こちらのスライドが大変わかりやすいです。

ANGULARJSの$WATCH登録数が60,000だった

60,000もあるというのはさすがに想像がつきません。多分スマホでは発火して爆発するレベルです。$watch数を減らすというのはAngularJSを軽くする有効な手段の一つです。

AngularJS独自の部分が多く再利用性が低い

これはデカイです。AngularJSに合わせて作ると他での再利用性が低くなります。

解決策はAngularJS用にかかない、これに尽きます。Angular用のコードを他へ移すのは難しいですが、AngularJS用でないコードをAngularJSのService、Factoryにすることはとても簡単です。

function Person(){
    // Personクラス
}
var _ = require('lodash');
angular.module('myApp')
.factory('lodash', function() {return _;})
.factory('John', Person);

こんな感じです。AngularJS用に書き始めて、しかもServiceとFactoryが使い分けられないなんていうと目も当てられない結果となります。

情報量が少ない

お願いなので書いてください…エラー起きた時とても困ります…

JavaScript的な考え方が通用しない

まあこれは慣れですよね。仕方がないです。解決策はない。

AngularJSの1と2が違いすぎる

今からAngularJS始めるとなると1と2どっち使うか迷いますよね。僕も迷ってます。AngularJS2はTypeScript(正確にはAtScript)で書くらしいので学習コストがその分高く、また、情報量もAngularJS1よりさらに少ないです。しかし、AngularJS1よりもパフォーマンスに優れています。また、AngularJS自体の設計も1よりしっかりしている…らしいです。これは完全に聞きかじりですので。

TypeScript使えてパフォーマンス高い方が好きという方はAngularJS2に手を出してみるのもいいかもしれません。それ以外の人はAngularJS1がいいと思います。

終わり

今年も終わりますね。来年はReactに手を出していきたいと思ってます。