AngularJSプロジェクトを保守しやすくするためにやっておくべき5つのこと

いなば

2015.08.04

こんにちは、フロントエンドエンジニアのいなばです。
ここ最近案件でAngularJSに関わるエンジニアが若干名増えたので、社内共有も兼ねてAngularJSを保守しやすい状態に保つためにやっておくべきだと思うことを思いつく限りまとめておきたいと思います。

1. プロジェクトのファイル構成を決める

これは別にAngularJSに限った話ではないですが、まず一番最初に決めなくてはいけないことですね。
AngularJSに限らずある程度規模が大きくなる&運用をするのであれば、構成ははじめにきちんと考えて設計するべきだと思います。
ある程度規模が大きくなる場合、app.jsにすべてを記述したり、controller.jsみたいなファイルにcontrollerの処理をずらずらと記述したりしていくと、開発が進むにつれエディタをスクロールする量が増えていき、保守がとてもつらい感じになります。

例：controller.jsにずらずら書く

angular.module('controller',[])
.controller('hogeCtrl', [
    function(){}
]).
.controller('fooCtrl', [
    function(){}
]).

// 省略

.controller('barCtrl', [
    function(){}
]);

ディレクトリ構成をどうするかはプロジェクトにもよると思いますが、ひな形の自動生成はYeomanで行えるようにして、1ファイルに1モジュールとするのが望ましいです。
Yeomanを使うことにより、ファイルの設置場所やファイル名のモジュール名といった表記揺れなどから守られやすくなります。

Yeoman
http://yeoman.io/
generator-angular
https://github.com/yeoman/generator-angular

AngularJSのディレクトリ構成に関しては、過去に弊社エンジニアのびすけくんが勉強会で登壇をしています。

参考：Angular.jsのディレクトリ構成のベストプラクティスを探る
http://qiita.com/n0bisuke/items/6a79d3ee63020f771260

ディレクトリ構成のパターンを紹介してくれているので参考になりますね。
悲惨なことになる前に、最初にきちんと構成を決めましょう。

ちなみに弊社のとある案件は現在このような構成になっています。
※ざっくりです

app/
    ├ app.js
    ├ common.js
    ├ components/
  　│　└ hoge/
  　│　　　└ hogeCtrl.js
  　│　　　└ hoge.html
    ├ directives/
  　│　└ hoge/
  　│　　　└ hoge.js
  　│　　　└ hoge.html
    ├ services/
  　│   └ HogeService.js
  　│   └ model/
  　│　　　└ HogeModel.js
  　└ test/
      　 └ components/
           └ hoge/
           └ hogeCtrlSpec.js
      　 └ directives/
           └ hogeSpec.js
      　 └ services/
           └ HogeServiceSpec.js
           └model
              └ HogeModelSpec.js

2. $rootScopeは極力使わない

グローバル変数は極力減らしたほうが良いのと同じ理屈です。
$rootScopeにプロパティは原則生やしません。
複数人で開発する場合、$rootScopeを多用してしまうとプロパティ名のバッティングなどで思わぬバグを出すリスクも高くなります。
また、$rootScopeは根幹にいて常にダーティチェックが走るので、パフォーマンスを下げる要因にもなります。

ただし、アプリケーション全体でイベントを監視したい場合には、$rootScopeにイベントを設定します。

例：$rootScopeに設定しているイベント

$rootScope.$on('$viewContentLoaded', function () {});
$rootScope.$on('$stateChangeStart', function() {});
$rootScope.$on('$stateChangeSuccess', function() {});