ここからは、Yeomanを使ってアプリのひな型を生成してみましょう。GruntとBowerはすでに使用できる状況なので、ひな型生成ツールであるYoモジュールをインストールします。
下記のように、グローバルオプションを付けてインストールしてください。
% mkdir yo-sample && cd yo-sample % npm install -g yo
先ほども少し解説しましたが、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」をご確認ください。
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 ・ ・ ・
アプリ生成のオプションをいくつか聞かれますが、取りあえず下記のようにします。
[?] 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 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
テストやアプリの動くひな型が最初からできているので、作り始めるのがとても楽ですね。
今回は開発ワークフローツール、Yeomanついて紹介しました。Yeomanはひな型生成ツール「yo」、JavaScriptライブラリ依存管理「Bower」、タスクランナー「Grunt」の3つが、開発ワークフローを高速化するために連携して機能しているのが分かります。
Web開発を始めるに当たって毎回用意するのが面倒な部分は作成してくれますし、面倒なライブラリ管理や繰り返し行うテストの実行やビルド作業も全て自動化してくれます。
また、BowerやGruntは単体で使用しても十分効果を発揮してくれるので、必要に応じて使用してください。
さて、本連載も今回が最終回となりました。Gruntの基礎から開始し、Gruntモジュールの作成についても解説しましたし、今回はYeomanやBowerといったGruntの周辺ツールについても紹介しました。
本連載を読んで、少しでも面倒な作業を自動化/簡略化するための助けになれば幸いです。
中村修太(なかむら しゅうた)
クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。
Copyright © ITmedia, Inc. All Rights Reserved.