Startup!! Yeoman and AngularJS : Qiita Advend Calendar 2014 12/04
この投稿はAngularJS Advent Calendar 2014の4日目の記事です。 今年も昨年に引き続き、yeomanを使用したAngularJSの始め方です。
気がつけばAngularJS用のyeomanのジェネレーターがとんでもない数になってきました。 （なんとBackbone.jsの4倍！） 昨年までは定番的なジェネレーターを使っておけば良かったですが、今では自分の望む構成のジェネレーターを探した方が早かったりします。 そこで今年は趣向を変えて、いくつかの構成のジェネレーターとその始め方を紹介していきます。
準備
yeomanを始めるための事前準備として、node.jsとnpm、各種ツールをインストールします。
node.jsをインストールする
まずはyeomanを動かすためにnode.jsをインストールします。 既にnode.jsがインストールされている場合は飛ばしてもらって構いません。
node.jsは公式サイトにて各OS用のバイナリが配布されています。
こちらからOSに合わせてバイナリをダウンロードしてインストールします。 バージョンは後述のnで指定するので、ダウンロードページのものをそのままインストールしてもらって大丈夫です。
npmをインストールする
node.jsをインストールしたら、次にパッケージ管理のnpmをインストールします。 既にnpmがインストールされている場合は飛ばしてもらって構いません。
curl -L https://npmjs.org/install.sh | sh
nをインストールする
次にnode.js、npmの複数バージョンを切り替えることの出来るnをインストールします。 他にも同じことのできるツールがありますが、個人的には一番事故の少ないnが気にっています。
npm install -g n
npmを使ってグローバルにnをインストールします。 インストールが完了したらnでインストール可能なバージョンを調べます。
n ls
と実行するとインストール可能なバージョンを表示することができます。
ここでは2014/12現在の最新安定板の0.10.33をインストールします。
n 0.10.33
もし、違うバージョンに変えたくなったらn [version番号]とすれば何時でも切り替えることができます。
各種ツールをインストールする
yeomanと各種定番ツールをインストールします。
この3つのツールをインストールしておけば大抵のジェネレーターに対応できます。
npm install -g yo grunt-cli gulp bower
他にもジェネレーターに必要なツールがあれば、随時インストールしてください。
プロジェクトを生成する
今回は定番的な構成の汎用性の高い3つのジェネレーターでプロジェクトを生成します。 何か特定のツールや、フレームワークを使いたいとき以外は、ここで紹介するジェネレーターを使うがオススメです。
yeoman/generator-angular
昨年も紹介させてもらったジェネレーターです。 取り敢えずAngularJSを初めてみたい・・・という方は、このジェネレーターで始めて、自分好みのカスタマイズしていくことをオススメします。
インストール
npm install -g generator-angular yo angular
いくつか質問されますが、ここで回答した内容はあとで変更することができます。
タスク
- grunt
- テストとビルドを実行します
- grunt build
- ビルドを実行します
- grunt test
- テストを実行します
- e2eテストはタスク定義されていないため必要なら設定する必要があります
- grunt serve
- 開発用のWebサーバーを起動します
- grunt serve:dist
- ビルド結果を表示するWebサーバーを起動します
プロジェクト構成
.
├── gruntfile.js - grunt設定ファイル
├── app - アプリケーションディレクトリ
│ ├── 404.html
│ ├── bower_components - bowerコンポーネントのインストールディレクトリ
│ ├── favicon.ico
│ ├── images - 画像ディレクトリ
│ ├── index.html
│ ├── robots.txt
│ ├── scripts - Javascriptディレクトリ
│ ├── styles - CSSディレクトリ
│ └── views - ルーティングで指定する分割したHTMLのディレクトリ
├── bower.json - Bower設定ファイル
├── karma-e2e.conf.js - E2E用のkarma設定ファイル
├── karma.conf.js - karama設定ファイル
├── node_modules
├── package.json - npm設定ファイル
└── test - テストディレクトリ
├── runner.html
└── spec - karamaで実行するspectディレクトリ
cgross/generator-cg-angular
Angular Best Practice Guidelines for Project Structureに則ったプロジェクトを生成するジェネレーターです。 generator-angularではシンプルなSPA向きのジェネレーターでしたが、generator-cg-angularはよりチームで開発する規模の開発に向いたジェネレーターになっています。
インストール
npm install -g generator-cg-angular yo cg-angular
いくつか質問されますが、ここで回答した内容はあとで変更することができます。
タスク
- grunt build
- ビルドを実行します
- grunt test
- テストを実行します
- grunt serve
- 開発用のWebサーバーを起動します
また、generator-cg-angularではgulpによるビルドもサポートされています。
npm install gulp gulp-concat gulp-uglify gulp-imagemin gulp-less gulp-cheerio gulp-ng-html2js gulp-ngmin gulp-htmlmin gulp-cssmin streamqueue rimraf gulp-rename gulp-jshint gulp-jasmine jshint-stylish gulp-dom-src
gulpで使用する依存モジュールはデフォルトではインストールされません。 そのため、上記のコマンドでインストールするか、package.jsonに依存モジュールを追加してください。
- gulp build
- ビルドを実行します
プロジェクト構成
. ├── gruntfile.js - grunt設定ファイル ├── app.js - 共通のJavascriptファイル ├── app.less - 共通のLessファイル ├── bower.json - Bower設定ファイル ├── bower_components - Bowerコンポーネントのインストールディレクトリ ├── gulpfile.js - Gulp設定ファイル ├── index.html ├── node_modules └── package.json - npm設定ファイル
機能を追加する場合はAngular Best Practice Guidelines for Project Structureに沿ってディレクトリを作成します。
admin - Admin機能のディレクトリ ├── admin-directive - Admin機能で使うdirectiveディレクティブのディレクトリ │ ├── admin-directive-spec.js - │ └── admin-directive.js ├── admin-partial - Admin機能で使うルーティングで指定する分割したHTMLとそこで使用するJavascript、Lessのディレクトリ │ ├── admin-partial-spec.js │ ├── admin-partial.html │ ├── admin-partial.js │ └── admin-partial.less ├── admin-spec.js ├── admin.js - Admin機能共通のJavascriptファイル └── admin.less - Admin機能共通のLessファイル
Swiip/generator-gulp-angular
gulpをメインのタスクランナーにしているジェネレーターです。 他のジェネレーターのほとんどがgruntをタスクランナーにしているため、gulpでAngularJSアプリケーションを開発したい場合はこのジェネレーターを使用してください。
また、今回紹介するジェネレーターの中でもっとも機能が充実しているジェネレーターでもあります。 生成時に変更できる内容の多さや、protractorを使用したe2eテストのタスクなど最近のAngularJSアプリケーションの開発に必要なものが一揃いしています。 他のジェネレーターに慣れている方も、最近の流行を知るために一度は使ってみてください。
インストール
npm install -g generator-gulp-angular yo gulp-angular
いくつか質問されますが、ここで回答した内容はあとで変更することができます。
タスク
- gulp
- ビルドを実行します
- gulp build
- ビルドを実行します
- gulp serve
- 開発用のWebサーバーを起動します
- gulp serve:dist
- ビルド結果を表示するWebサーバーを起動します
- gulp wiredep
- bowerでインストールしたコンポーネントをHTMLにscriptタグを埋め込みます
- gulp test
- テストを実行します
- gulp protractor
- e2eテストを実行します
- gulp protractor:dist
- ビルド結果に対してe2eテストを実行します
プロジェクト構成
.
├── bower.json - Bower設定ファイル
├── bower_components - Bowerコンポーネントのインストールディレクトリ
├── gulp - Gulpのタスクディレクトリ
├── gulpfile.js - Gulp設定ファイル
├── node_modules
├── package.json - npm設定ファイル
├── src - アプリケーションディレクトリ
│ ├── 404.html
│ ├── app - アプリケーションで使用するHTML、Javascript、Sassのディレクトリ
│ │ ├── index.js - 共通のJavascriptファイル
│ │ ├── index.scss - 共通のSassファイル
│ │ ├── main
│ │ │ ├── main.controller.js
│ │ │ └── main.html
│ │ └── vendor.scss - bowerでインストールしたCSS、Sassを取り込むSassファイル
│ ├── assets - 画像やフォントなどのリソースのディレクトリ
│ │ └── images - 画像ディレクトリ
│ ├── components - 共通的なコンポーネントのディレクトリ
│ │ └── navbar
│ │ ├── navbar.controller.js
│ │ └── navbar.html
│ ├── favicon.ico
│ └── index.html
└── test - テストディレクトリ
├── e2e - protractorで実行するe2eテストディレクトリ
├── karma.conf.js - karama設定ファイル
├── protractor.conf.js - protractor設定ファイル
└── unit - karamaで実行するspecディレクトリ
機能を追加する場合はappの下にディレクトリを作成していきます。
admin ├── admin.controller.js └── admin.html
おまけ
ちなみにですが、最近の自分はyeomanでプロジェクトを生成することが減ってきました。 元々はyeoam/generator-angularで作ったプロジェクトをカスタマイズしてコピーして使い回しています。 新規に作るプロジェクトの仕様に合わせて、構成やタスクを最適化するので使い慣れたプロジェクトをカスタマイズした方が早いためです。
こんな風にカスタマイズしているのか、参考までに簡単に最近の自分の構成を紹介します。
タスク
- grunt
- ビルドを実行します
- grunt publish
- ビルド結果をデプロイします
- grunt build
- ビルドを実行します
- grunt test
- テストを実行します
- grunt coverage
- テストを実行してカバレッジを出力します
- grunt doc
- ドキュメントを生成します
- grunt server
- 開発用のWebサーバーを起動します
- node http、http-proxyを使って本番環境と同等のバックエンドを立ち上げています
- grunt debug
- watchを実行しながらテストを行います
プロジェクト構成
.
├── gruntfile.js - grunt設定ファイル
├── app - アプリケーションディレクトリ
│ ├── components - Bowerコンポーネントのインストールディレクトリ
│ ├── favicon.ico
│ ├── images - 画像ディレクトリ
│ ├── index.html
│ ├── scripts - Javascriptディレクトリ
│ │ ├── controllers - Controllerディレクトリ
│ │ ├── directives - Directiveディレクトリ
│ │ ├── filters - Filterディレクトリ
│ │ ├── app.js - 共通のJavascriptファイル
│ │ ├── modules - 自作のモジュールディレクトリ
│ │ ├── prefix - JSファイルを結合したさいに先頭に結合するファイル
│ │ ├── services - Serviceディレクトリ
│ │ └── suffix - JSファイルを結合したさいに末尾に結合するファイル
│ └── styles - Sassディレクトリ
├── bower.json - Bower設定ファイル
├── node_modules
├── package.json - npm設定ファイル
├── tasks - gruntの各タスクの設定ファイル
└── test - テストディレクトリ
└── spec - karamaで実行するspecディレクトリ
このプロジェクト構成は小規模用の構成です。
ある程度規模があるときは、こちらの記事で紹介されているFolders-by-Featureを採用するのがベターです。
また、サービスの配置はレイヤーによって切り分けた方が良さそうと最近感じています。 同じサービスでもビジネスロジックが中心になっているサービスと、APIやライブラリをラップしているサービスが出てきます。 これを混在して配置するのは良くないため、切り分けを行いつつプロジェクトの規模を大きくしていこうと思っています。
今回は汎用的に使えるジェネレーターだけを紹介しましたが、他にもいろいろなジェネレーターがあります。 大抵のフレームワークやaltJSに対応したジェネレーターがありますので、自分好みの構成を検索してみてください。
