Using Yeoman(1) - Getting Started With Yeoman

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

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

というかYeomanについて色々教えて下さい...

メモはこのように引用形式で記入します.

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

• yo : 雛形を提供してくれる(scaffolding)ツール.
• bowerやnpmなどのパッケージマネージャ.
• gruntやgulpといったビルドツール.

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

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

yo

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

yoとgeneratorのインストール

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

npm install -g yo bower grunt-cli gulp

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

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

基礎の雛形

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

 npm install -g generator-webapp

これはHTML5 Boilerplate, jQuery, Modernizr, Bootstrapで構成される一般的なWebアプリの雛形をつくるgeneratorだ. そして, インタラクティブなプロンプトを使ってどれを利用するかしないかを選択することができる. generatorは, Gruntや Gulp, その他のビルドツールを使っている.

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

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

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

yo webapp

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

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

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の雛形を含みます.

directiveやcontrollerはAngularでMVCを使ったWebアプリを作るための概念. 詳しくはAngular公式サイトのチュートリアルとかを参照すると良い.
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を作成する

オーサリングを参照.

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に記述する.

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

とても簡単ですね.

あなたの選択したgeneratorはGruntのタスクであるbowerやwiredepを含んでいないかもしれない. その場合は, grunt-bower-requirejsや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. タスクとは, 処理のまとまりのこと. ↩