最近の AngularJS 開発では[DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)をオレオレカスタムしたものを使っています。 fullstack だけあって使いこなすまで慣れがいると思いますので、私が普段使いしていていいなって思う機能を紹介します。  
AngularJS 開発の厳しい旅のお供にどうぞ。

この記事は[YEOMAN Advent Calendar 2014 - Adventar](http://www.adventar.org/calendars/356)9 日目の記事です。

- 8 日目[YEOMAN Advent Calendar 8 日目：generator-ember を紹介します - albatrosary's blog](http://albatrosary.hateblo.jp/entry/2014/12/08/120810)
- 10 日目[YEOMAN Advent Calendar 10 日目：generator-reveal を紹介します - albatrosary's blog](http://albatrosary.hateblo.jp/entry/2014/12/10/143324)



## 基本的な使い方

基本的な使い方はこちらを参照してください。そんなに難しくないはず。

[DaftMonk/generator-angular-fullstack | usage](https://github.com/DaftMonk/generator-angular-fullstack#usage)

注意点としては、アプリを generate する際に`mongodbあり`を選択した場合は、mongodb が起動していないと動作しないとこでしょうか・・・

> npm install する際に`grunt-contrib-imagemin`でエラーが発生する場合、もう一度 npm install するか、一度 uninstall して install するといいです。
>
> ```
> npm uninstall grunt-contrib-imagemin --save-dev
> npm install grunt-contrib-imagemin --save-dev
> ```

アプリケーションの雛形を作成したら、機能を追加する際にこちらのサブジェネレータを利用するとソースコードを自動生成してくれます。

[DaftMonk/generator-angular-fullstack | generators](https://github.com/DaftMonk/generator-angular-fullstack#generators)

では、ここから generator-angular-fullstack(以下、fullstack)の便利機能を少し紹介していきます。

## OAuth 認証テンプレート

fullstack には`google+`, `twitter`, `facebook`の OAuth テンプレートが付属しています。これに加えて`user/password`形式の Form も付属しているので、認証が必要なアプリケーションを作成する場合は、非常に助かると思います。  
OAuth のモジュールは[Passport](http://passportjs.org/)を利用しています。

利用方法は、`serve>config>local.env.sample.js`を同じフォルダにコピーして、`local.env.js`にリネームしてからファイルの中身に AppID などを設定すれば利用できます。

例) local.env.js

```
module.exports = {
  DOMAIN:           'http://localhost:9000',
  SESSION_SECRET:   'some-secret-key',

  FACEBOOK_ID:      'app-id',
  FACEBOOK_SECRET:  'secret',

  TWITTER_ID:       'app-id',
  TWITTER_SECRET:   'secret',

  GOOGLE_ID:        'app-id',
  GOOGLE_SECRET:    'secret',

  // Control debug level for modules using visionmedia/debug
  DEBUG: ''
};
```

注意点としては、local.env.js は`.gitignore`に指定されているので、各環境ごとに作成する必要があります。うっかり、作成忘れると認証エラーでハマります。  
それから、`DOMAIN`は OAuth の callbackURL として fullstack 側で利用しているので、これも環境ごとに正しく設定する必要があります。

## livereload & auto restart

今風の高速フロントエンド開発の象徴ともいうべき livereload と auto restart。当然 fullstack にも付属しています。

フロント側を変更した場合は、ブラウザがリロードされ、サーバー側を変更した場合は、Node が restart します。

## Node inspector

> まさか、まだ`console.log()`じゃないですよね！そんなあなたのために。

Node.js のデバックには[node-inspector/node-inspector](https://github.com/node-inspector/node-inspector)を使うのが一般的だと思うのですが、
しばらく触っていないと使い方をすぐ忘れてしまします。幸い fullstack ではサーバーをデバックモードで起動する Grunt タスクとして組み込まれているので忘れにくくなりました。

```
grunt serve:debug
```

コマンドを叩くと、Node inspector が立ち上がってくるのですが、`--debug-brk`指定されているので最初のステップのブレイクポイントで止まっています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/node-Inspector.png)

ブレイクポイントから処理を進めると通常通りサーバーが起動してくるので`http://localhsot:9000`にてアプリの動作を確認しながら、Node 側のデバックもできます。

## mongodb テストデータ自動投入

サーバー起動時に動作環境を選択できます。デフォルトは`Development`になっていると思いますので、起動時に mongodb のテストの洗い替えを行ってくれます。  
テストデータは`server>config>seed.js`に初期設定されていて、最初は`Thing`と`User`のデータがセットされているはずです。ここにテストデータを追加してください。

テストデータ投入の有無は各動作環境ごとの config にて選択できます。`server>config>environment`以下の各環境ごとの設定ファイルが置かれているので、`seedDB`フラグを切り替えてください。

例) development.js

```
module.exports = {
  // MongoDB connection options
  mongo: {
    uri: 'mongodb://localhost/someapp-dev'
  },
  seedDB: true
};

```

## index.html へ必要なフロント側リソースの自動挿入

> 404...はいはい、あれね。

AngularJS でアプリケーションを作成していると、非常にファイル数が大きくなる傾向にあると思います。ファイル追加のたびにわざわざ`index.html`に`<script>`タグなど追加していくのが、非常に億劫になりますね。

fullstack では[klei/grunt-injector](https://github.com/klei/grunt-injector)を利用することで、面倒な`index.html`へのリソース追加を強力にサポートしてくれます。  
`index.html`を確認すると見慣れない``や``のコメントがありますが、この部分に必要な`*.js`や`*.css`を挿入します。bower モジュールも対応しているのがいいですね。

## 本番ビルド

Grunt コマンドで一発本番ビルドできるのも嬉しいですね。

```
grunt build
```

ちなみに次のようなことをしてくれます。

- js, css の結合と minify とリビジョン番号振り
- html の minify
- image の minify
- AngularJS の minify 地雷除去
- AngularJS のテンプレート結合と minify と cache

1 からタスク作ると大変だと思います。

## その他カスタム

これら普通にあるものを利用してもかなり捗るのですが、自分なりにカスタムしている部分を紹介します。  
(これも好みの問題でしょうが・・・)

### サブジェネレータのテンプレート

generator-angular-fullstack が作成するコードのテンプレートを変更したいケースがある場合は、`.yo-rc.json`の中身を変更します。  
`generator-ng-component`の中に`~Templates`というプロパティがあるので、そこにサブジェネレータが参照するテンプレートがあるパスを設定します。

.yo-rc.json

```json
  "generator-ng-component": {

    // 省略

    "directiveSimpleTemplates": "/templates/directiveSimple",
    "directiveComplexTemplates": "/templates/directiveComplex",
    "filterTemplates": "",
    "serviceTemplates": "",
    "factoryTemplates": "",
    "controllerTemplates": "",
    "decoratorTemplates": "",
    "providerTemplates": "",
    "routeTemplates": ""
  }
```

### jsLint, csslint

generator-angular-fullstack では jsLint は付属していますが、csslint は付属していません。 jsLint もチェックタイミングについてもファイル変更時に頻繁にチェックするようにしています。

とくに、css はコンポーネントっぽいフォルダ構成になっているため、スタイルクラス名などにプリフィクスなどつけてサンドボックス化までしてくれるかと期待してましたが、そこまではやってくれませんでした。  
さらにおかしな CSS を書くと minify した時にスタイル崩れが発覚して厄介ですので、`cssLint`は必須ですね。

### socket.io

フロントとサーバー側で socket.io のコンポーネントが付属するのですが、私の作るアプリではいまいちユースケースが合わないので、作り変えてます。  
ツールに使われず、必要に応じてカスタムして使いこなす姿勢が大事だと思います。

## まとめ

私が普段使いしている[DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)の便利機能について紹介しました。  
まだ他にも便利機能があると思いますので探してみてください。

本格的は AngularJS 開発を行う場合は、このような開発を下支えするツールが必須だと思います。手に馴染んでくると本当に手放せなくなります。

> 本来であれば、こんなにも難しくなってしまった Web 開発の現状を嘆くべきでしょうが・・・

一度使ったらやめられないMEANスタック開発が捗るgenerator-angular-fullstackの便利機能の紹介

この記事は[AngularJS Advent Calendar 2014 - Adventar](http://www.adventar.org/calendars/350)の 3 日目の記事です。

- 2 日目[AngularJS BootstrapUI を利用した FilterSelect(@takeyama)](http://qiita.com/takeyama/items/f6e0fbac4d3b4907193e)
- 4 日目[初心者マークの Angular.js - Uemmra3 のフルスタックエンジニア？日記(@Uemmra3)](http://d.hatena.ne.jp/Uemmra3/20141204/1417696122)

AngularJS でそれなりの規模のアプリケーションを書く場合、プロジェクトの構成って結構悩みます。  
いつも悩んでます。。。  
悩みすぎてちょくちょく構成変えるため、たまにアプリケーションが壊れてます。  
そんなとき心もポッキリ壊れそうになります。

そんな私が、最近いいなと思っている AngularJS のプロジェクト構成について紹介します。



## 参考資料(有名どころ)

AngularJS のプロジェクトの構成については、結構以前から議論されています。有名どころではこのあたりでしょうか…  
(正直、これで決まりといったものは無いような気がします。)

- [angular/angular-seed](https://github.com/angular/angular-seed)
- [johnpapa/angularjs-styleguide](https://github.com/johnpapa/angularjs-styleguide#application-structure)
- [Brian Ford/Building Huuuuuge Apps with AngularJS](http://briantford.com/blog/huuuuuge-angular-apps)
- [Angular Best Practice for App Structure (Public)](https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub)

私の場合は[DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)を利用することが多いので、基本的には generator-angular-fullstack 構成に
johnpapa/angularjs-styleguide の内容を加味しながらやってます。

## アンチパターン(folders-by-type)

まず、それなりの規模開発をする場合のアンチパターンの紹介。johnpapa/angularjs-styleguide にも載っているのですが、俗に`folders-by-type`と呼ばれるものがアンチパターンとされています。  
AngularJS のモジュールのタイプに合わせてディレクトリを作成して、その中に各機能の javascript ファイルを格納する方式です。

機能が増えるほど、ファイルが分散して大変そうなのが想像できるかと思います。

```
app/
    app.js
    controllers/
        hoge.controller.js
    directives/
        one.directive.js
        one.directive.html
        two.directive.js
        two.directive.html
    services/
        hoge.service.js
        fuga.service.js
    views/
        hoge.html
        some.html
```

## ベストプラクティス(Folders-by-Feature)

アンチパターン(folders-by-type)に対して、良いとされているのが`Folders-by-Feature`と呼ばれる機能単位にフォルダを分ける方法です。機能単位いうよりも**コンポーネント単位**と呼んだ方がしっくりくると思います。

generator-angular-fullstack を使った場合は、次のようなフォルダ構成になります。(`client以下`だけ抜粋)

```
app/
  main/             # 各機能単位のフォルダ
  assets/           # 画像ファイルなどのリソース
    images/
  components/       # 再利用する想定のコンポーネント
  bower_components/ # bowerモジュール
```

`main/`の中身は以下のような構成になっていて、URL の Path が`/`の場合に表示する画面のコンポーネント一式が格納されています。

```
main/
  main.js                 # Router
  main.controller.js      # Controller
  main.controller.spec.js # Test spec
  main.html               # Template
  main.css                # Style
```

AngualrJS を使った開発をする場合、Javascript ファイルを細かく分割しながら開発することが多いので、このように機能単位で 1 つのフォルダにまとまっていると見通しがいいです。  
さらにこうすることで、**機能単位で git の branch を作成して開発することが可能**です。

これらのこともあって、それなりの規模感の場合は`Folders-by-Feature`方式を採用する方がいいと思います。

## 自分がカスタムしている部分

基本的に generator-angular-fullstack で作成されたプロジェクト構成をベースに使ってますが、自分なりにカスタムしている部分もあります。そのあたり紹介したいと思います。

### Core モジュールフォルダ

バックエンドのデータアクセスや認証部品など、アプリケーション全体で利用するようなモジュールの置き場所として`app/core`以下を利用しています。

```
app/
  main/             # 各機能単位のフォルダ
  core/             # アプリケーション共有モジュール
    auth/
      auth.service.js
    someApicall/
      someApicall.service.js
  assets/           # 画像ファイルなどのリソース
    images/
  components/       # 再利用する想定のコンポーネント
  bower_components/ # bowerモジュール
```

プロジェクトでの再利用観点で`components/`との使い分けなのですが、私の場合は UI が付属するものは`components/`に格納しするように使い分けしています。

### partials テンプレートフォルダ

AngularJS ではテンプレート(html)にディレクティブを書き込んでいくため、テンプレートが大きくなりやすいと感じています。

そこで良く利用するのが`ng-include`です。そのため generator-angular-fullstack:route で作成したフォルダに`partials`フォルダを作成して inclide するテンプレートを格納するようにしています。

```
main/
  main.js                 # Router
  main.controller.js      # Controller
  main.controller.spec.js # Test spec
  main.html               # Template
  main.css                # Style
  partials/               # テンプレート部品
    megaButton.html
    hugeInputArea.html
```

あ、この画面だけで利用する filter なんかも格納しています。

### filters フォルダ

アプリケーション全体で使う filter については置き場所悩みました。現在は直下の`filters`に格納して様子を見ています。

```
app/
  main/             # 各機能単位のフォルダ
  assets/           # 画像ファイルなどのリソース
    images/
  components/       # 再利用する想定のコンポーネント
  filters/          # 再利用する想定のfilter
    snsAvater/
      snsAvater.filter.js
      snsAvater.filter.spec.js
  bower_components/ # bowerモジュール
```

### config フォルダ

開発と本番で config を分けたいケースがあるので、`config/environment`以下に実行環境ごとの config を格納しています。

```
app/
  main/             # 各機能単位のフォルダ
  assets/           # 画像ファイルなどのリソース
    images/
  components/       # 再利用する想定のコンポーネント
  config/
    environment/
      development.js  # 開発環境用
      production.js   # 本番環境用
      test.js         # テスト環境用
  bower_components/ # bowerモジュール
```

開発/本番の切り替えは generator-angular-fullstack の Grunt タスクを改造しています。テスト環境の config は`karma.conf.js`にてロードする config を指定しています。

## まとめ

私が普段使っている AngularJS のプロジェクト構成について紹介しました。たぶん半年くらい使ってみてちょくちょく変えると思います。

とはいえ、ぶっちゃけ好みの問題ですけどね・・・

そんな、試行錯誤の成果を[DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)を Fork して[mitsuruog/generator-angular-mitsuruog](https://github.com/mitsuruog/generator-angular-mitsuruog)にまとめています。AngularJS できれいにアプリケーション作りたい人は、Yeoman でオレオレ AngularJS プロジェクトテンプレート作ってみるのもいいと思います。

いま一番気に入っているAngularJSのプロジェクト構成

私が担当するエンタープライズのフロント開発では、1 年ほど前から Grunt によるビルドプロセスを導入していて、自分でもプロジェクトの特性に応じて Gruntfile.js のタスクをデザインする機会が多いのですが、最近流行の Yeoman が吐き出す Gruntfile.js を見るとなかなか参考になる点があったので、いくつか紹介したいと思います。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/yeoman-logo.png)

### 目次

1.  load-grunt-tasks
2.  テンプレート
3.  ファイル指定方法あれこれ
4.  外部パラメータによるタスクの分岐処理
5.  外部定義ファイルインポート

## 1. load-grunt-tasks

[load-grunt-tasks](https://github.com/sindresorhus/load-grunt-tasks)とは package.json に定義されている Grunt タスクを見て、タスク起動時にロードしてくれるモジュールです。これでタスクを変更するたびに Gruntfile.js を変更する必要がなくなりました。

```js
/**
 * before
 */
grunt.loadNpmTasks("grunt-shell");
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-recess");
grunt.loadNpmTasks("grunt-sizediff");
grunt.loadNpmTasks("grunt-svgmin");
grunt.loadNpmTasks("grunt-styl");
grunt.loadNpmTasks("grunt-php");
grunt.loadNpmTasks("grunt-eslint");
grunt.loadNpmTasks("grunt-concurrent");
grunt.loadNpmTasks("grunt-bower-requirejs");

/**
 * after
 */
require("load-grunt-tasks")(grunt);
```

## 2. テンプレート

Grunt には[Underscore.js](http://underscorejs.org/#template)ライクなテンプレートエンジンが内包されています。

`<%=%>`とすることで、中のプロパティが純粋な Javascript として評価され、Gruntfile.js 内に展開されます。

また、`<%=%>`とすることで、任意の Javascript コードを実行させることも可能です。

Yoeman の中では、開発用のディレクトリとビルド用のディレクトリパスを使い分けてます。こちらも、タスク内でよく使う定義情報などはファイルの先頭で定義しておいて、テンプレートで挿入すると後々メンテナンスし易いですね。

```js
grunt.initConfig({
  yeoman: {
    // Configurable paths
    app: "app",
    dist: "dist",
  },

  copy: {
    dist: {
      files: [
        {
          expand: true,
          dot: true,
          cwd: "<%= yeoman.app %>", // <- ここ
          dest: "<%= yeoman.dist %>", // <- ここ
          src: ["*.{ico,png,txt}"],
        },
      ],
    },
  },
});
```

## 3. ファイル指定方法あれこれ

Gruntfile.js でタスクを書いていると、ファイルのマッチング指定を書く部分がほとんどだと思います。

内部的にファイルのマッチングには Glob と呼ばれる仕組みを使っており、[node-glob](https://github.com/isaacs/node-glob)と[minimatch](https://github.com/isaacs/minimatch)のライブラリが使われています。本当に様々なマッチング機能を提供しているのライブラリなのですが、今回は Yeoman でよく使っている範囲で紹介します。

### 「\*」

「/」パス以外の任意の文字列と一致します。次のように使われることがよくあります。

- フォルダ以下一致「vender/\*」
- 任意のファイル一致「\*.js」
- 任意のファイル名一致「.git\*」

### 「{}」

中の文字をカンマ区切りで指定して or 条件とします。次のように使われることがよくあります。

- 拡張子の or 条件「\*.{gif,jpeg,jpg,png,svg,webp}」

### 「`{,*/}`」って何？

Yeoman の Gruntfile.js でよく見る「`{,*/}`」ですが、任意のフォルダ以下の 1 階層のみ一致という意味です。  
サブフォルダ指定する場合は通常「`**`」でいいのですが、パフォーマンス的な理由で 1 階層に止めたい場合は、「`{,*/}`」を使います。

この当たりも、使いこなすことで余計なファイルマッチングを書く必要がなくなります。（Glob 形式が読めない人がいるという別の問題があるとは思いますが w）

## 4. 外部パラメータによるタスク分岐

Grunt タスクを呼び出す場合の次のように「`:`」以降の文字列をパラメータとして渡すことができ、Grunt タスク内で分岐処理を行うことができます。

```
grunt serve:dist
```

通常は`grunt.registerTask`の第 2 引数にタスクの文字列を配列で渡すのですが、ここにコールバック用の function を渡すことで、タスク呼び出し時の処理をある程度柔軟に書くことができます。
とはいえ、可読性という観点では使いどころ微妙かな。。。と

```js
// 普通はこんな感じ
grunt.registerTask("serve", [
  "clean:server",
  "concurrent:server",
  "autoprefixer",
  "connect:livereload",
  "watch",
]);

// grunt serve:distと呼ぶことタスクの中で分岐ができる
grunt.registerTask("serve", function (target) {
  if (target === "dist") {
    return grunt.task.run(["build", "connect:dist:keepalive"]);
  }

  grunt.task.run([
    "clean:server",
    "concurrent:server",
    "autoprefixer",
    "connect:livereload",
    "watch",
  ]);
});
```

## 5. 外部定義ファイルのインポート

Yoeman の generator 界隈ではあまり見かけないのですが、知っていると便利な機能です。

Grunt では json と YAML の外部定義ファイルをインポートする機能が内包されています。次の例 Grunt 公式の例ですが、package.json から定義情報をインポートしています。

```js
grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),
  uglify: {
    options: {
      banner:
        '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
    },
    dist: {
      src: "src/<%= pkg.name %>.js",
      dest: "dist/<%= pkg.name %>.min.js",
    },
  },
});
```

## まとめ

Yeoman に学ぶモテる Gruntfile.js の書き方いかがだったでしょうか。

いままでオレオレ Gruntfile.js を書いている方も、モテ期を謳歌している Yeoman が作る Gruntfile.js を読んで、もっとモテる Grunt タスクを書いてみましょう！

**p.s**

いつの間にか generato-webapp の`grunt server`が deprecated になっていることだし、時代の流れは早いものですね。  
こんな記事書いておいて、流行に流されるのも注意しないとなーっと思う今日この頃です。

Tag: yeoman

一度使ったらやめられないMEANスタック開発が捗るgenerator-angular-fullstackの便利機能の紹介

いま一番気に入っているAngularJSのプロジェクト構成

Yeomanに学ぶモテるGruntfile.jsの書き方