Using Yeoman(1) - Getting Started With Yeoman

[Yeoman](http://yeoman.io/)を使いたいけどよくわからん, ってことで[チュートリアル](http://yeoman.io/learning/)を読もうと思ったまでは良かったけど, ありがちな日本語訳っぽいのがなかったので, 入門ついでに気付きをメモしながら訳してみています.

指摘やアドバイスなどあれば是非お願いします.

というかYeomanについて色々教えて下さい...
> :memo: メモはこのように引用形式で記入します.

Yeoman(ヨーマン, と読むらしい)ワークフロー[^1]は, Webアプリ開発の効率化と満足度を達成するために, 下記の3つのツールから構成されている.  

- [yo](https://github.com/yeoman/yo) : 雛形を提供してくれる(scaffolding)ツール.
- [bower](http://bower.io/)や[npm](https://www.npmjs.com/)などのパッケージマネージャ.
- [grunt](http://gruntjs.com/)や[gulp](http://gulpjs.com/)といったビルドツール.

> :memo: Webアプリを作ったことがないとパッケージマネージャとかビルドツールという用語は聞き慣れないかもしれないため補足.
> **パッケージマネージャ**は開発に必要な道具を管理するためのツールで, **ビルドツールと**いうのは書いたプログラムを動くように調整してくれるツールだと思えば良いと思う.

上記のプロジェクトはそれぞれのコミュニティでメンテンナンスされているが, Yoemanの一部としてよく馴染む. これらのプログラムが何をできるのか, 一緒に見ていく.

![workflow](http://yeoman.io/assets/img/workflow.c3cc.jpg "workflow")

## yo

YoはYeomanプロジェクトによってメンテナンスされていて, Webアプリの雛形を提供してくれる. generator(ジェネレータ)と呼ばれるテンプレートを利用して雛形を作成する. yoと使いたいgeneratorをnpmからインストールすれば良い.

### yoとgeneratorのインストール

はじめに, `yo`と必要なツールをインストールする.

```
npm install -g yo bower grunt-cli gulp
```

> :memo: npmでは`-g`オプションをつけることで, グローバル(マシン全体)に対してインストールする. 通常はフォルダ内の`nodes_modules`ディレクトリ内にインストールされる.

詳しくは, 下記のそれぞれの節を参照.
npmは, [Node.js](https://nodejs.org/)のためのパッケージマネージャで, Node.jsに組み込まれている.
Windowsでは, `cmder`やPowerShellなどのコマンドラインツールを利用するのをオススメする.

### 基礎の雛形
Webアプリの雛形を作るために, `generator-webapp`というgeneratorをインストールする.

```
 npm install -g generator-webapp
```

これは[HTML5 Boilerplate](https://html5boilerplate.com/), [jQuery](http://jquery.com/), [Modernizr](http://modernizr.com/), [Bootstrap](http://twbs.github.io/bootstrap/)で構成される一般的なWebアプリの雛形をつくるgeneratorだ. そして, インタラクティブなプロンプトを使ってどれを利用するかしないかを選択することができる. generatorは, **Grunt**や **Gulp**, その他のビルドツールを使っている.

generatorをインストールしたら, プロジェクトのディレクトリを作ろう.

```
mkdir my-yo-project
cd my-yo-project
```

そして, 下記のコマンドを実行する.

```
yo webapp
```

> :memo: コマンドは`yo {{generator名}}`という記法でプレフィックスの`generator-`は不要.

それぞれのプロジェクトは, あなたのワークフローにとって適切なGruntのタスク[^2]から作成する.

webapp generatorはWebアプリを始めるにあたって可能な限りシンプルに構成されている. ここでは, 幾つかのフレームワーク用のgeneratorを紹介する.

### AngularJSのアプリの雛形
新しいgeneratorを使う前に, npmからインストールする.

```
npm install -g generator-angular
```

その後, 新しいディレクトリを作成して下記コマンドを実行する.

```
yo angular
```

多くのgeneratorは, 初期コマンドであるフラグを使うことであなたのアプリケーションに合わせてカスタマイズ可能である. 例として, `generator-angular`に追加してみよう.

```
yo angular --coffee
```

これで, 基本的なWebアプリのファイル構造が生成され, その中に新しいAngularJSアプリケーションを幾つかの雛形ファイルが用意される. この中には, directiveやcontroller, 単体テストをするKarmaの雛形を含みます.

> :memo: directiveやcontrollerはAngularでMVCを使ったWebアプリを作るための概念. 詳しくはAngular公式サイトのチュートリアルとかを参照すると良い.
> :memo: Karmaはテスト(動作確認)をするためのツール.

#### Angularアプリの部品の雛形を作成
幾つかのgeneratorはアプリケーションの部品の雛形も作ることができる. これをsub generatorと呼ぶ.

例としてAngularJSフレームワークでは, アプリケーションは幾つかのcontrollerやdirective, filterから構成される. 開発ワークフローの中で, 下記コマンドを実行することにより, これらの部品の雛形を作成することができる.

```
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
```

各フレームワークのgeneratorはsub generatorのサポートについてドキュメントで記載している. 

### 自分のgeneratorを作成する
[オーサリング](http://yeoman.io/authoring/)を参照.

## Bower

### yoを使って作ったプロジェクトに対してBowerを使う

jQueryプラグインに依存した基本的なWebアプリを作成する場合:

```
# 新しいアプリケーションの雛形を作成する.
yo webapp

# 必要なプラグインをBowerのレジストリから検索する.
bower search jquery-pjax

# インストールし, bower.jsonに記録する.
bower install jquery-pjax --save

# もしRequireJSが使いたければ...
# (webapp generatorにはRequireJSが現在含まれていないことに注意し, generatorに対して下記のコマンドを実行すること)
grunt bower
# bowerの依存関係をRequireJSの設定を記述する.

# もしRequireJSを使わない場合...
grunt wiredep
# 依存関係をindex.htmlに記述する.
```

> :memo: Require.jsはJavaScriptのモジュールを管理するためのフレームワークのようだ(僕はbrowserifyとかwebpackしか使ったことないけど, 仲間みたいなものらしい).

とても簡単ですね.

あなたの選択したgeneratorはGruntのタスクである`bower`や`wiredep`を含んでいないかもしれない. その場合は, [grunt-bower-requirejs](https://github.com/yeoman/grunt-bower-requirejs)や[grunt-wiredep](https://github.com/stephenplusplus/grunt-wiredep)を読むと良い.

## Gulp

Gulpは, JavaScriptプロジェクトのためのタスクベースのコマンドラインツール. プロジェクトを構築するために利用するだけでなく, ワークフロー中で使いたくなるような幾つかのコマンドが用意されている. これらのコマンドの多くはYeomanチームによってメンテナンスされているGruntのタスクを利用している.

### Gulpのコマンド

```
# (ライブリロード機能付きで)作成されたアプリをプレビューする.
gulp serve

# アプリの単体テストを実行する.
gulp test

# リリース用のバージョンとして最適化してビルドする.
gulp
```

これらのコマンドはシームレスな開発ワークフローのために, yoコマンドラインインタフェースと一緒に使うことができる.

```
yo webapp
gulp serve
gulp test
gulp
```

## Grunt

Gruntは, JavaScriptプロジェクトのためのタスクベースのコマンドラインツール. プロジェクトを構築するために利用するだけでなく, ワークフロー中で使いたくなるような幾つかのコマンドが用意されている. 

### Gruntのコマンド

```
# Preview an app you have generated (with Livereload).
grunt serve

# Run the unit tests for an app.
grunt test

# Build an optimized, production-ready version of your app.
grunt
```

これらのコマンドはシームレスな開発ワークフローのために, yoコマンドラインインタフェースと一緒に使うことができる.

```
yo webapp
grunt serve
grunt test
grunt
```

[^1]: 作業を処理する流れやその処理のまとまりを指す言葉らしい.
[^2]: タスクとは, 処理のまとまりのこと.