連載

2014年7月2日

あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方：Gruntで始めるWeb開発爆速自動化入門（終）（3/3 ページ）

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツールなどを紹介していく連載。今回は、プロジェクトひな型生成の「Yo」とパッケージマネージャー「Bower」、そして「Grunt」の3つで構成される「Yeoman」の概要と基本的な使い方を紹介。

[中村修太，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

Yeomanを使ってみよう

Yeomanのセットアップ

　ここからは、Yeomanを使ってアプリのひな型を生成してみましょう。GruntとBowerはすでに使用できる状況なので、ひな型生成ツールであるYoモジュールをインストールします。

　下記のように、グローバルオプションを付けてインストールしてください。

% mkdir yo-sample && cd yo-sample
% npm install -g yo

Yoがひな型を生成するための定義を記述したNode.jsモジュール「ジェネレーター」

　先ほども少し解説しましたが、yoモジュールは「ジェネレーター」という仕組みを使って、アプリのひな型を生成します。ジェネレーターとは、Yoがひな型を生成するための定義を記述したNode.jsモジュールで、使用する用途／フレームワークに応じてさまざまな種類のものがあります。

※Webアプリ用／Node.jsのExpress用／AngularJS用などジェネレーターはGrunt用モジュールと同じく、npmで検索／インストールが可能です。

　試しにnpmでYeoman用ジェネレーターを検索すると、ジェネレーターが多数見つかります。

% npm search yeoman-generator //かなり時間がかかるので注意
・
・
・

独自ジェネレーターも作れる

　なお、ジェネレーターはルールを満たせば自分で作成することも可能です。独自ジェネレーターの作成には「generator-generator」を使用します。

　ジェネレーターの作成方法について詳しく知りたい方は「Writing Your Own Yeoman Generator | Yeoman」をご確認ください。

ジェネレーターを使用してAngularJSを使ったひな型を生成

　Yo、Bower、Grunt（grunt-cli）がインストールできたら、yoコマンドを実行してみましょう。下記のように実行すると、対話形式でコマンドを選択できます。

% yo
[?] 'Allo your name! What would you like to do?
> Install a generator
  Find some help
  Get me out of here!

　今回はフロントエンド用JavaScriptフレームワークである、「AngularJS」を使用したアプリのひな型を生成するジェネレーター、「generator-angular」を使ってみます。

　「Install a generator」を選択し、エンターキーを押すと、次のように検索するジェネレーターを尋ねられるので、「angular」と入力してエンターキーを押してください。

[?] Search NPM for generators: angular

　すると、名前に「angular」が含まれるyeomanのジェネレーターがリストアップされます。generator-angularを選択してエンターキーを押しましょう。

[?] Here's what I found. Install one? (Use arrow keys)
> generator-angular
  generator-angular-axiom
  generator-angular-beego
  generator-angular-bootstrap
  generator-angular-bootstrap-less
  generator-angular-brent
・
・
・

　すると、generator-angularがインストールされます。なお、npmでgenerator-AngularJSをインストール（グローバルオプション付き）しても同じことになります。

　ジェネレーターをインストールしたら、そのまま実行してみましょう。「Run the Angular generator」を選択してエンターキーを押します。

[?] 'Allo your name! What would you like to do?
> Run the Angular generator (0.9.0)
  Run the Karma generator (0.8.2)
  Update your generators
  Install a generator
  Find some help
・
・
・

　アプリ生成のオプションをいくつか聞かれますが、取りあえず下記のようにします。

Sass／Compassは使用しない（No）
Bootstrapは使用する（Yes）
AngularJSの追加モジュールは全てインストール

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Bootstrap? Yes
[?] Which modules would you like to include? (Press <space> to select)
> angular-animate.js
  angular-cookies.js
  angular-resource.js
  angular-route.js
  angular-sanitize.js
  angular-touch.js

　ちなみに、AngularJSの追加モジュールをインストールしたくない場合、対象のモジュールを選択してスペースを押して選択を解除すればインストールされません。

　ファイルが生成されると、AngularJSを使用したひな型アプリに加え、package.jsonやbower.json、Gruntfile.jsまで全て用意されています。

% npm install grunt-karma --save-dev
% npm install
% bower install

　generator-angularが生成するテストでは「karma」というテストランナーを使用しているのですが、これをgruntで動かすために「grunt-karma」というモジュールを追加でインストールしています。

ブラウザーで実行結果を確認

　モジュールをインストールしたら、「grunt serve」コマンドを実行してみましょう。サンプルアプリが実行され、デフォルトのブラウザーが自動的に起動します。

% grunt serve
Running "serve" task
・
・
・

grunt serveで起動する画面

　ちなみに、grunt testと実行すれば、デフォルトで用意されたテストを実行してくれて下記画面がコンソールに表示されます。

・
・
・
Execution Time (2014-06-21 08:17:11 UTC)
concurrent:test    2.7s   60%
autoprefixer:dist  98ms   2%
karma:unit         1.6s   37%
Total 4.4s

　テストやアプリの動くひな型が最初からできているので、作り始めるのがとても楽ですね。

Web開発でも自動化の恩恵にあずかろう

　今回は開発ワークフローツール、Yeomanついて紹介しました。Yeomanはひな型生成ツール「yo」、JavaScriptライブラリ依存管理「Bower」、タスクランナー「Grunt」の3つが、開発ワークフローを高速化するために連携して機能しているのが分かります。

　Web開発を始めるに当たって毎回用意するのが面倒な部分は作成してくれますし、面倒なライブラリ管理や繰り返し行うテストの実行やビルド作業も全て自動化してくれます。

　また、BowerやGruntは単体で使用しても十分効果を発揮してくれるので、必要に応じて使用してください。

　さて、本連載も今回が最終回となりました。Gruntの基礎から開始し、Gruntモジュールの作成についても解説しましたし、今回はYeomanやBowerといったGruntの周辺ツールについても紹介しました。

　本連載を読んで、少しでも面倒な作業を自動化／簡略化するための助けになれば幸いです。

「Gruntで始めるWeb開発爆速自動化入門」バックナンバー

著者プロフィール

中村修太（なかむらしゅうた）

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。