2012年10月24日

Yeoman を使ってみる

JavaScript の開発ツールとして Yeoman というものがリリースされていますので使ってみます。 GruntJS や Bower などを統合したツールで、モダンな構成で Web アプリケーションを開発できると思います。 ただ、使い始めるまでが大変かもしれませんので、万人にオススメできるものでもありません。 (OS などによりけり)

ホームページでの紹介 (英文)

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

注意：この記事は古いバージョンについて記載しています。 1.0 に向けた新しいバージョンでは仕組みもそもそもの役割も変わりました。 こちらの記事を参照してください。

Yeoman の基本

Yeoman は GruntJS や Bower のラッパーのように働き、 Gruntfile.js にタスクを記述し、 jQuery などのライブラリが必要な場合は Bower 経由でインストールします。 各種のジェネレーターも備えており、プロジェクトの初期設定だけでなく、MVC の各コンポーネントの生成も可能です。 Java や Python、Ruby、Perl などの各種 Web アプリケーションフレームワークにあるようなモデルの自動生成のイメージです。 JavaScript の MVC フレームワークに関してはこちらの記事に詳しく書かれています。

Yeoman では Backbone が標準的な構成に採用されていますが、Angular や Ember のジェネレーターもありますし、 その他のフレームワークに対して自作のジェネレーターを用意することもできます。 ジェネレーターを利用するメリットとしては、手作業で複数のファイルを作成して回る必要がないことに加えて、 ファイルの配置場所に一貫性が生まれる、という副作用も挙げられます。 ひとりで開発する場合には特段のメリットではないかもしれませんが、チームとして開発する場合は余計なことに迷う必要がなくなります。

Yeoman が生成してくれるファイルの種類は大雑把に次のようなものがあります。 基本的は HTML5 Boilerplate をベースにしています。

  • index.html, 404.html, favicon.ico, robots.txt
  • JavaScript ファイル
    • jQuery や underscore (Lo-Dash)、Backbone などのライブラリ
    • プラグインスクリプト
    • Backbone のモデル、ビュー、コレクション、ルーター
  • Twitter Bootstrap ベースの CSS
  • HTML テンプレート
  • mocha をベースにしたテスト環境
  • Gruntfile.js によるタスク定義

なお、 Lo-Dash は Underscore.js の置き換えを狙ったものです。

インストール

インストールは結構大変かもしれません。 最小構成は把握していませんが、手元の Mac では次のようになりました。

元々インストール済み

  • XCode
  • git
  • NodeJS (>= 0.8)
  • Ruby (バージョン関係あるかも??)
  • RubyGems (バージョン関係あるかも??)

Yeoman 導入用にインストール

  • Compass
  • PhantomJS

無くても使い始めることは可能なもの

  • Homebrew
  • jpegtran
  • optipng

ホームページの手順にあるように、まずは環境確認用のシェルを流します。

$ curl -L get.yeoman.io | bash

次のような画面イメージになります。

出力の全容 ロゴの下部分を拡大

Yeoman で開発

init コマンドでプロジェクトをセットアップします。

$ yeoman init

いくつか質問がありますが、特段のこだわりがない限りはそのままエンターキー (Yes) で進めた方が良いでしょう。 jQuery などのライブラリ、Twitter Bootstrap、RequireJS、mocha などをセットアップしてくれます。

次に、 server コマンドでサーバを起動します。CoffeeScript や SCSS のコンパイルに加えて、ブラウザも勝手にオープンしてくれます。

$ yeoman server

Running "server" task

Starting static web server on port 3501
  - /Users/shigeru/projects/backbone-household/app
I'll also watch your files for changes, recompile if neccessary and live reload the page.
Hit Ctrl+C to quit.

Running "clean" task

Running "coffee:compile" (coffee) task
Unable to compile; no valid source files were found.

Running "compass:dist" (compass) task
directory temp/styles/
   create temp/styles/main.css

Running "open-browser" task

Running "watch" task
Waiting...

watch タスクで Gruntfile.js に記述されたファイルの変更を検知し、 livereload を使ってブラウザに変更を反映させます。 裏側では Websocket でつないでいるようです。 これにより、HTML/JavaScript/CSS を変更する度に何らかのコマンド (ブラウザのリロードも！) を実行する必要がなくなります。

追加で JavaScript ライブラリやプラグインが必要な場合は、Bower 経由で検索とインストールが可能です。 たとえば "requirejs" と "backbone" で検索すると次のようになります。

"requirejs" で検索

$ yeoman search requirejs
Running "bower:search:requirejs" (bower) task
GET https://bower.herokuapp.com/packages/search/requirejs
Search results:

  - requirejs git://github.com/jrburke/requirejs
  - requirejs-text git://github.com/requirejs/text
  - requirejs-plugins git://github.com/millermedeiros/requirejs-plugins.git

"backbone" で検索

$ yeoman search backbone

Running "bower:search:backbone" (bower) task
GET https://bower.herokuapp.com/packages/search/backbone
Search results:

  - backbone git://github.com/documentcloud/backbone.git
  - backbone-amd git://github.com/amdjs/backbone
  - backbone.localStorage git://github.com/jeromegn/Backbone.localStorage.git
  - backbone.marionette.handlebars git://github.com/asciidisco/Backbone.Marionette.Handlebars
  - backbone-relational git://github.com/PaulUithol/Backbone-relational.git
  - backbone.collectionsubset git://github.com/anthonyshort/backbone.collectionsubset
  - backbone-amd-lodash git://github.com/nibblebot/backbone.git
  - backbone.collectionview git://github.com/anthonyshort/backbone.collectionview.git
  - backbone.eventbinder git://github.com/marionettejs/backbone.eventbinder.git
  - backbone-deep-model git://github.com/powmedia/backbone-deep-model.git
  - backbone-validation git://github.com/thedersen/backbone.validation.git
  - backbone-jqmobile git://github.com/jumpbytehq/backbone-jqmobile
  - backbone.wreqr git://github.com/marionettejs/backbone.wreqr.git
  - backbone.include git://github.com/anthonyshort/backbone.include.git
  - backbone.utils git://github.com/asciidisco/Backbone.Utils
  - backbone.paginator git://github.com/addyosmani/backbone.paginator.git
  - backbone.rpc git://github.com/asciidisco/Backbone.Rpc
  - backbone-paginator git://github.com/chalbert/Backbone-Mediator.git
  - backbone.mutators git://github.com/asciidisco/Backbone.Mutators
  - backbone.chosen git://github.com/asciidisco/Backbone.Chosen
  - backbone-dombuilder git://github.com/insin/backbone-dombuilder
  - backbone.twitter git://gist.github.com/3904693.git
  - backbone-template git://github.com/makesites/backbone-template.git
  - backbone.app git://github.com/makesites/backbone-app.git
  - backbone.crudr git://gist.github.com/2965050.git
  - backbone.modal git://gist.github.com/3446570.git
  - backbone.session git://gist.github.com/1824154.git

Backbone localStorage Adapter v1.0 をインストールしたい場合は install コマンドを使います。

$ yeoman install backbone.localStorage

( . . . . . )

$ ls components/ app/components/
app/components/:
Backbone.localStorage/ uglify-js/

components/:
Backbone.localStorage/ uglify-js/

あとはアプリケーション内からスクリプトを読み込むようにすれば OK です。

テキストテンプレートを利用する場合には requirejs-text が便利になるでしょう。 これは、RequireJS で JavaScript 以外に普通のテキストファイル (HTML 含む) を指定できるようにするプラグインです。

プロジェクトのファイル構成は次のようになります。

終わりに

JavaScript の MVC フレームワークを使った開発に便利そうなツールである Yeoman を使ってみました。 類似のツールとして Backbone Boilerplate framework tool がありますが、Yeoman はこのジェネレーターも持ち合わせています。 GruntJS ベースで開発できると、CSS フレームワークやテストフレームワークとの統合も進められそうなので、嬉しい局面が増えそうです。

とはいえ、ファイル読み込みルールなどの基本知識が不足していると却って混乱を招くことになるかもしれません。 RequireJS の依存関係や普通の JavaScript のことを知っていることが前提としてありますので、注意して使いましょう。

各種タスクがコマンドラインで実行できるようになると、Jenkins などと組み合わせて CI 環境を整備することも可能になります。 まだまだ試行錯誤が続く領域かもしれませんが、継続的デリバリーを実践できると良いですね。

ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)