YEOMANとは

YEOMANはWebアプリケーションジェネレータと呼ばれるツールの一つです。
新しいアプリケーションを作成する際に必要なディレクトリやコンポーネントを自動作成することができます。

Web開発を始める時、プロジェクトのディレクトリ構成やツールの導入の仕方で迷うことはよくあると思いますが、 YEOMANを使うことで、構成に迷うことなくプロジェクトをすぐに立ち上げることができます。

またYEOMANのディレクトリ構成がある種のスタンダードになりつつあるようなので、
既にあるプロジェクトにもYEOMANの構成を取り入れてみる、というのもありだと思います。

YEOMANを使ってみる

さっそくYEOMANを使ってみましょう。

環境はMac OS Xです。
Windowsの方はPowerSHellかcmderでお願いします。。。

先ずはnpmを使い、コマンドツールyoをインストールします。

$ npm install -g yo

このyoコマンドを使って、以降プロジェクトのテンプレート作成等を行っていきます。

yoをインストールしたら、次はWebアプリケーションジェネレータをインストールします。

$ npm install -g generator-[webapp]

[webapp]の箇所には作成したいWebアプリケーションのジェネレータ名が入ります。
インストールできるジェネレータ一覧はこちら -> Generator

ジェネレータ一覧を見るとフレームワークの名前がちらほらと見えるので、
自分の作成したいWebアプリケーションで使うフレームワーク用ジェネレータを入れていきましょう。

今回はAngularJSのジェネレータをインストールしていきます。

$npm install -g generator-webapp

次に、プロジェクトのテンプレートを作成したいディレクトリに移動し、
以下のyoコマンドを実行。

# ディレクトリ移動
$ cd yoman
# テンプレート作成
$ yo angular

初めてyoコマンドを実行する場合、匿名レポート提出許可のオプションが出てくると思いますがこちらはお好みでYまたはnを入力。

? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)

次におじさんAAが出てきます。
同時に「Gruntの代わりにGulp使う？」と聞いてきますが、ここではyを入力。

     _-----_     
    |       |    ╭──────────────────────────╮
    |--(o)--|    │    Welcome to Yeoman,    │
   `---------´   │   ladies and gentlemen!  │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Gulp (experimental) instead of Grunt? Yes

ちなみにこのGruntおよび Gulpはタスクランナーと呼ばれるツールで、
Webアプリケーションの様々な処理をタスクという単位で自動実行するのに使います。

その後もYesを入力していきます。

# Sass : コンパイルするとcssになるスクリプト(Yes)
? Would you like to use Sass? Yes

# Bootstrap : イケてる鉄板CSSライブラリ(Yes)
? Would you like to include Bootstrap? Yes

# angular用ライブラリ群(Yes)
? Which modules would you like to include? 
angular-animate.js, 
angular-cookies.js, 
angular-resource.js, 
angular-route.js,
angular-sanitize.js,
angular-touch.js

最後に導入したいライブラリを選択してEnterを押すとプロジェクトの生成が開始されます。

.
├── README.md
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   │   └── yeoman.png
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   └── controllers
│   │       └── main.js
│   ├── styles
│   │   └── main.scss
│   └── views
│       └── main.html
├── bower.json
├── gulpfile.js
├── package.json
└── test
    └── spec
        └── controllers
            └── main.js

AngularJS Webアプリケーションプロジェクトのテンプレートができました！

YEOMANを使えば、新しいフレームワークを試したいときにも簡単に開発を始めることができそうですね。
またテンプレート作成時に導入されるツールの種類から「このフレームワークにはこういうツールを導入すると良いのかも」というように、必要なWeb開発ツールについて新しい示唆を得ることもできそうです。