読者です 読者をやめる 読者になる 読者になる

Yeoman入門(第一部、yoを使う)

node.js yeoman

※ 追記: id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!!

これからYeomanに関して説明していきます。
Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。

Yeomanとは

Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。

Yeomanを使うことでコマンドラインからの対話形式で雛形(テンプレート)を作成する事ができるため、プロジェクトに適した雛形を作ることができます。またGruntやbowerといったツールと親和性が高いため、タスク実行やライブラリ管理も簡単に行うことができるようになります。

厳密な定義としては、YeomanはGrunt(タスクランナー)Bower(フロントエンドパッケージマネージャ)yo(雛形作成ツール)を合わせた総合ツールの事を指します。ですが、全てを説明しようとすると分かりにくくなるので、分かりやすさのために、雛形作成ツールであるyoに限定して説明します(※1)。

yo とは

前述しましたが、雛形作成ツールです。yeoman-generatorとも呼ばれます。Railsのscaffoldに影響を受けて作成されたツールであると説明されています。yo自身はNode.jsで作られていますが、Node.js専用のscaffoldという訳ではありません。またフロントエンド用のツールである、とする説明もよく見ますが、フロントエンドに限らず、バックエンドに対しても使えます。
むしろ私としては、バックエンドと組み合わせてこそ真価を発揮するツールではないかと思っており、かなり汎用的なツールになっています。

generatorの例

ここで、yoを使って作成できる雛形をいくつか見てみましょう。

npm が入っていれば、npm searchでyeoman-generatorを検索するといくつか候補が出てきます。

$ npm search yeoman-generator

angularの雛形を作成する、generator-angularもあれば、サーバーサイドにexpress、フロントエンドにangularを利用したgenerator-express-angularも存在します。

またこの他にもFirefox OSのアプリ開発用のgeneratorや、Google Chrome Extension開発用のgeneratorなんかも存在します。

yoのインストール

事前準備として、node.jsをインストールしておく必要があります。
node.jsのインストールの仕方はBower入門(基礎編) - from scratchの記事に書いたので、そこを参照してください。

node.jsがインストールされたら以下のコマンドを実行してください。

$ npm install yo bower grunt-cli -g

インストールが完了したら

$ yo

を実行してください、インストールに成功していれば、以下の様なyeomanのAAが出てくると思います。

f:id:yosuke_furukawa:20130703011407p:plain

yoを使う

実際に使ってみましょう。

一旦yo を閉じ、ディレクトリを作成し、そこに移動します。
移動した上で再度 "yo" を実行しましょう。

$ mkdir test
$ cd test
$ yo


"yo"をした時にいくつか質問が出てくると思いますが、
"Install a generator"の項目を選択してください。

f:id:yosuke_furukawa:20130703034320p:plain

generatorを検索するためのキーワードを聞かれるので、インストールしたい雛形についてのクエリーを入力してください。
ここでは、tmlibと入力して、僕が作ったgenerator-tmlibを検索してみましょう。

f:id:yosuke_furukawa:20130703034725p:plain

generator-tmlibがインストールされるので、インストールが終了したら再度メニューに戻ります。
"Run the Tmlib generator"を入力してgeneratorを実行しましょう。

f:id:yosuke_furukawa:20130703034931p:plain

対話形式で質問が表示されるのでそれに答えます。

[?] What is your github name?: yosuke-furukawa // github上のユーザー名
[?] What is your applicaiton name?: My Apps // アプリケーション名
[?] What version?: 0.0.0 // アプリケーションの初期バージョン
[?] Description about your app: // アプリケーションの説明
[?] What is your favorite template engine? [jade, ejs, swig, hogan]: jade // テンプレートエンジン
[?] Use Heroku? [Y/n]: Y // Herokuを使うか否か

質問に回答し終わると雛形のファイル群が作成され、npm のインストールとbowerのインストールにより、依存ライブラリがインストールされます。
ここでは、expressやsocket.io、jade等のサーバーサイドのライブラリとtmlib.jsやbootstrapといったクライアントサイドのライブラリがインストールされます。

処理が終わったら、以下の様なファイル群ができていると思います。

├── Gruntfile.js
├── Procfile
├── app.js
├── bower.json
├── components
│   ├── bootstrap
│   ├── jquery
│   └── tmlib.js
├── lib
│   └── socket.io-server.js
├── node_modules
├── package.json
├── public
│   ├── javascripts
│   ├── stylesheets
│   └── vendor
├── routes
│   ├── index.js
│   └── user.js
└── views
    ├── index.jade
    └── layout.jade

後は grunt コマンドを実行すればサーバーが起動します。

http://localhost:3000にアクセスすれば tmlib.jsを使ったアプリが起動されます。

f:id:yosuke_furukawa:20130704010556p:plain

yoコマンドの補足

ここまでで、yoの基本的な流れを説明しました。説明を簡単にするために"yo"から利用する方法を紹介しましたが、
yo を起動してから毎回インストールするのは面倒なので、通常は以下のコマンドを利用します。

$ npm install generator-tmlib -g // generatorのインストール
$ yo tmlib //"generator-"を除いた名前を指定する。generator-tmlibの場合はtmlibを指定する。

少し脱線してgenerator-tmlibの説明

generator-tmlibには以下の機能があります。

  • express, socket.ioのインストールと雛形作成
  • Bower でのtmlib.jsとtwitter bootstrapのインストール
  • livereload(ファイルの変更を検知して、ブラウザを自動更新。クライアントサイドだけでなく、サーバーサイドのjsが変わった時もnode.jsの再起動をしてからlivereloadする)
  • テンプレートエンジンの選択 (jade、ejsといったexpressの標準だけではなく、swigという高速テンプレートも選択可能。)
  • Herokuへのデプロイをサポート (Procfile自動作成、Herokuではwebsocketが使えないので、socket.ioの接続方式の内、websocketを削除し、xhr-pollingだけに限定する等。)

これらの機能は一から作成しようとすると手間がかかります。雛形作成により、初心者でもtmlibを扱いやすく、また開発・公開しやすいものとするための環境整備が行なわれています。

generatorを使うことでこれらの機能を手間をかけずに用意することができるというのがyoの最大の利点です。

振り返ってyoのまとめ

yoコマンドを利用することでnpmに公開されているgeneratorを利用し、雛形を作成することができます。
これにより、環境を一から作成しなくともある程度整備された環境を得ることができます。

yoコマンドのインストールとyoを使う方法について説明しました。
次回はgeneratorを自分で作成するための方法を紹介します。

※1 昔々、yeomanはYoとBowerとGruntをラップした一つのツールであり、全部をyeomanというコマンドで実行していました、yeoman 1.0からこの依存状態を解消し、それぞれを別々のツールに分離したため、このような構成になっています。これにより、yoの汎用性が高まるのと同時にgrunt、bower、yo、それぞれの役割が明確になりました。