AngularJS のプロジェクト構成をどうするか


AngularJS のプロジェクト構成ってどうするのがいいんだ?

AngularJS でアプリケーションを作るときに悩むのがプロジェクト構成。なんでもかんでも一つの JavaScript ファイルで実装してしまうことも可能だけれど、コード量が増えてくるとすぐにつらくなる。

そこでどうしようかなと考えるときに参照するであろう一つが AngularJS チーム による AngularJS Web アプリケーションのスケルトンプロジェクト angular-seed

Angular Seed

この angular-seed のプロジェクト構成はこんな感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app
├─ css
│  └─ app.css
├─ img
├─ js
│  ├─ app.js
│  ├─ controllers.js
│  ├─ directives.js
│  ├─ filters.js
│  └─ services.js
├─ lib
│  └─ angular
│     └─ angular.js
├─ partials
│  ├─ partial1.html
│  └─ partial2.html
├─ index-async.html
└─ index.html

簡単に言うと、AngularJS の機能である controller、directive、filter、service と機能別にファイルを分けるということ。

前回のモデル定義の記事、前々回のサービス定義の記事で利用した factory は service の仲間なので services.js に書くことになる。

index.html
1
2
3
4
5
6
7
8
9
10
  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>

まあ、これでもいいんだけれど、大規模になってくるともっとファイルを分けたくなってくる。

特に partials の下にある HTML テンプレートは分割しているのに、それに対応するコントローラはすべて controllers.js に記述していくことに抵抗感が出てくる。

また、services.js にモデルを記述するのではなく、モデルごとにファイルを分けてモデルの名前をファイル名に付けたくなる。

そこで、あるべき姿、ベストプラクティスはどんな構成なんだとネットをさまよう。

Building Huuuuuge Apps with AngularJS

大規模な AngularJS についての記事では Building Huuuuuge Apps with AngularJS が参考になる。この記事は Brian Ford さんによるもの。

ここで推奨されている構成はこんな感じ。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
root-app-folder
├─ index.html
├─ scripts
│  ├─ controllers
│  │  └─ main.js
│  │  └─ ...
│  ├─ directives
│  │  └─ myDirective.js
│  │  └─ ...
│  ├─ filters
│  │  └─ myFilter.js
│  │  └─ ...
│  ├─ services
│  │  └─ myService.js
│  │  └─ ...
│  ├─ vendor
│  │  ├─ angular.js
│  │  ├─ angular.min.js
│  │  ├─ es5-shim.min.js
│  │  └─ json3.min.js
│  └─ app.js
├─ styles
│  └─ ...
└─ views
   ├─ main.html
   └─ ...

で、さらにやるなら、controllers や services にサブディレクトリを、例えば、services/models みたいに作ると。

angular-seed と大きく異なるのは各機能をフォルダにしているところで、controller や service の一つひとつを別のファイルにしやすい。

なぜ lib –> vendor、css –> styles、js –> scripts、partials –> views に変更しているのかは不明。流儀があるのかな。

Yeoman

また、この Brian Ford さんが関わっている Yeoman という Web アプリケーションのワークフローを改善するためのツール群があって、yeoman/generator-angular という AngularJS 用の Yeoman ジェネレータがある。

Yeoman がベストプラクティスと考えるプロジェクト構成で出力されるので、これを利用し、まず従ってみてから、自分の頭で考えるというのもいいと思う。

この Yeoman を利用したプロジェクト構成のことや、Yeoman のページに出てくる Grunt、Bower などのツール類の話はまたあらためて。