Yeoman ヨーマン

Yoeman

Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

"Yeomanは、開発者が迅速にWebアプリケーションの立ち上げを行えるように、クライアントサイド実装の基本構造を提供します。必要と思われるものを全て提供しているので、色々なものを手動セットアップする煩わしさから解放されます。"

的な。たぶん。そんなツールです。ここのところブログでも紹介していますが、しつこく触り続けているGruntに通じるような、普段のワークフローを改善する系のソリューション。実際にYeomanはGruntも内包しています。

なにができるの

数ヶ月前に、ティザーサイトみたいなのが公開されていて、あれからどうなったのかな〜?と思ってたのですが、いつの間にか使えるようになってました。

そいで、上の紹介記事でも語られているとおりYeomanは、主に以下のような機能を備えています。

  • Package Management - パッケージ管理
  • Build System - ビルドタスク
  • LiveReload Watch Process - LiveReload
  • Generators - scaffolding(テンプレート生成)
  • Local Server - ローカルサーバー

全体的に構成がWebアプリケーション用な感じではありますが、かなり充実しています。イチから組み上げられたライブラリというよりは、良いパターンの集めた既製品のオールインワンパッケージです。

例えば、ビルドタスクはGruntを利用していますし、ローカルサーバーも実際はGruntのタスクですね。パッケージ管理についても、お目見えしたばかり(?)のtwitterのBOWERが利用されています。

始めるのはカンタン

$ curl -L get.yeoman.io | bash

Yeomanは、gemやのnpmの各種パッケージはもちろん、phantomjsやoptipngといったライブラリにも大量に依存していますが、このInstallスクリプトで一通りインストールしてくれるみたいです。

自分はすでに一通り依存ライブラリがインストール済みだったようですんなり動きましたが、入って無くてもたぶん自動だと思います。うん。

2012/10/30追記:

Yeoman used to have an automated installer, which worked great on fresher systems, but had trouble with more used and configured systems. It has been officially deprecated Manual Install · yeoman/yeoman Wiki

ということで、自動インストーラは廃止されて、追記現在は依存ライブラリの環境チェッカーと化しているようです。(portな人はともかく)brewとnpmをちょっと叩くだけなので、そんな手間ではないと思います。

$ mkdir myapp && cd myapp
$ yeoman init

あとは、適当なディレクトリの中でyeoman initすればOK。Bootstrapつかう?とか、Require.jsでAMDする?とか、色々聞かれるのでYes/Noで答えていけば、ディレクトリ内に初期状態が展開されます。

パッケージ管理

これはまさしくBowerの提供する機能ということになるんでしょうけど、試してみたら中々良かったです。

今までクライアントサイドの各種のライブラリ(jQueryとかBackbone)って、ある程度は手元に集めていたとしても、最新版の収集なんかは何かしら手動なことが多かったと思います。

その辺りを、npmやgemと同じようにパッケージ管理としてyeoman install jqueryのようにして、最新版をカンタンにプロジェクト内に引き寄せてくれるようになります。手元で試してみたら、app/scripts/vendor/以下に展開されました。yeoman update jqueryとかyeoman listのようなお馴染みのパッケージ管理コマンドも用意されています。

このときrequire.jsを利用することにもしていたのですが、app/scripts/main.jsに書かれたrequire.config()に与えてるpathsコンフィグにも、これらライブラリのパスが通っていたので、何かしらオートでよろしくやってくれてるみたい。

ビルドタスク

お馴染みGruntなわけですが、デフォルトで同梱されているタスクも中々良い感じです。ドキュメントを見てもらったらよいと思いますが、Gruntのビルトインタスクの他にも、画像最適化とかManifestファイル(.appcache)の生成などが加わっています。

デフォルトのタスクで不満があれば、普段のGruntと同じようにTasksディレクトリを用意して、Gruntfile.js内で、grunt.loadTasks('tasks')すればタスクを追加できます。このとき、たとえばtasks/noop.jsでnoopタスクを定義していれば、yeoman noopでnoopタスクを実行できます。

あと、gruntを使ったtaskではないようですが、yeoman testで走るテストは、phantom.jsとmocha, chaiで走っている様子。mochaは流れるレポートのフォーマットが多彩&きれいで良いですね。

などなど

他にも色々あるようですが全部は試せてないです。(´・ω・`) 自分用のScaffold templateとか作れそうだし、なかなかステキそう。generator周りは yeoman/generators を参考にすればよいのかな?

なんにせよ、今まで溜め込んだGruntのタスクも問題なくマイグレーションできそうで安心しました。normalize.cssやHTML5 Boilerplateのように海外のベストプラクティスが詰まった構成を、手元に用意するツールとしても中々良さそうです。

ディレクトリの構成とか、うまく辻褄合わせることができれば、Yeomanを主軸に置いて開発できるんじゃないかな〜と、期待しています。というか特攻するかも。

ではでは、また書きます。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search