yeomanを用いてWeb開発を楽にする

弊社ではフロントエンドWeb開発にGruntやBowerを活用しています。
GruntやBowerを使い、TypeScriptやSASSのコンパイル、ローカルサーバでの動作確認が出来るように設定しています。

ただ、Gruntの設定ファイルを目的に応じて一から作るにはだいぶ時間がかかってしまいます。ここの解決策には、基本になるテンプレートプロジェクトを持っておきそのプロジェクトをコピーして次のプロジェクトとして使う方法があります。弊社でもわかめさんが個人で作っています。

この路線を更に拡張して、目的に応じて使用する技術(LESSやCoffeeScriptなど)を変えたプロジェクトを生成できる仕組みがあります。これが今回紹介するyeomanです。

開発環境

この記事では以下の環境を想定しています。

• OSX
• $ node -v //=> v0.10.26
• $ npm -v //=> 1.4.3

yeomanを使ってプロジェクトを作ってみる

例えばAngularJSを使ったプロジェクトを始めたいとします。この時の手順は以下の通りです。

1. yeoman本体をインストールします。
   $ npm install -g yo
2. generatorと呼ばれるテンプレートをインストールします。今回はAngularJSが目的なのでgenerator-angularを使います。
   $ npm install -g generator-angular
3. プロジェクトを始めるディレクトリ上でyeomanを実行します。
   $ mkdir myproject && cd $_ && yo angular
4. 使う技術に合わせて(y | n)で選択していきます。ひと通り選択すると$npm installやbower installが自動で実行されてファイルが生成されていきます。

上記の手順を実行後、ディレクトリ内を見てみるとGruntfile.jsができていることがわかります。この状態で$gruntと実行するとSASSのコンパイルやconcatやminify、unit testが走ります。また、$grunt serveと実行するとローカルサーバが立ち上がり、自動でブラウザ上に表示されます。ここまでのGruntfile.jsを個人で組み立てるのはだいぶ時間がかかるものです。

sub-generator

更に進んだyeomanの使い方としてsub-generatorがあります。Railsで言うと新しいコントローラやモデルをコマンドラインから生成する機能です。たとえば上で使ったプロジェクトにおいて、

1. $yo angular:route blog
2. $grunt serve

の順でコマンドを実行してから http://127.0.0.1:9000/#/blog を開くと新しく追加したblogViewが見えることでしょう。generator-angularには他にも、

• angular:controller
• angular:directive
• angular:filter
• angular:service
• angular:provider
• angular:factory
• angular:value
• angular:constant
• angular:decorator
• angular:view

といったsub-generatorが用意されています。この一覧は変わる可能性があるのでここで最新のsub-generatorの一覧を確認してください。

angular以外にもたくさんのgeneratorがある

現時点(2014/2/28)で491のgeneratorがあります。ざっとみた感じ、firefoxosやphonegap用のgeneratorもあるのでこういったプロジェクトも始めやすいのかなあと思います。

おわり

みなさんもyeomanを使ってWeb開発をもっと楽にしていきましょう。