1.
Yeoman
HTML5 Webアプリ開発を効率化するツールの紹介
Chrome+HTML5 Developers Live Japan #4
2013.4.25
Bathtimefish 村岡 正和
つかってみよう！

2.
join this live!
http://goo.gl/DXK5L

3.
マークアップ部発足！
html5j.org
初代 部長になりました。
マークアップも楽しいですよケロ！

4.
今日のおはなし
HTML5でイマドキっぽいWebサイ
トやWebアプリをつくるときにいろ
いろメンドイことがあって、

5.
今日のおはなし
メンドイことがいい感じに自動的に
なったりしたらめんどくなくていい
んだけどナンかいいのない？

6.
今日のおはなし
それ、Yeomanでできるよ。
というおはなし。
Yoemanつかったことない人向けに
カンタンな紹介をします。
あと、実用的なTipsも少々。

7.
おはなしの流れ
•制作でめんどうなこといろいろあるよね
•セットアップ
•Yeomanを構成するツール
•実際に使ってみる
•とりあえず覚えておくコマンド
•応用編 Tips

8.
制作でめんどうなこといろいろあるよね？

9.
コード書く前の準備いろいろ
• ディレクトリ構成
• ローカルWebサーバー
• クロスプラットフォームなページのスケルトン。
ベストプラクティスなやつ。
• いいかんじのライブラリとかプラグインさがすの
etc...

10.
コード書き中のいろいろ
• Save Reload Save Reload Save Reload...
• CoffeeとかSassとかのコンパイル
• テストの実行
• 最適化、軽量化
• ライブラリやフレームワークのアップデート
etc...

11.
このオッサンがテキトーにやります。

12.
Yeoman

13.
http://yeoman.io/

14.
Yeoman s service
デキるオッサン
い ざ と い う と き の 際 立 っ た 働 き

15.
こんな人にモロ刺さります。
• 制作テンプレ持ってない。つーか作るのメンドイ
• 最近JavaScript書いてない。Coffee依存症
• 最適化・軽量化に細かいこだわりはない。いい感じ
にやってほしい
• Sass最高ヒャッハー！
• もうCompassでいいです
• もうBootstrapでいいです
こんなの

16.
セットアップ

17.
黒い画面で、

18.
npm install -g yo grunt-cli bower
※ grunt0.3以前をインストールしている場合、アンインストールしておく。

19.
...と、そのまえに入れておくもの。
node.js (>=0.8.0)
ruby
compass
※ compass はgemで、node.jsは nodebrewが個人的にオススメ
http://compass-style.org/
https://github.com/hokaccha/nodebrew

20.
Yeomanを構成するツール
yo grunt bower
scaffolding preview, build, test package management

21.
Yo
•Yeomanのプロジェクトを生成する
$ yo webapp
angular, backbone, ember, chromeapp...
様々なフレームワークのscaffoldingが可能。
HTML5 Boilerplate, Gruntfile.js, component.json,
node_modulesの自動配置。

22.
Bower
•JSライブラリのパッケージマネージャ
$ bower install underscore
install, search, list, update...
JSライブラリ、jQueryプラグインなどを検索してapp/
componentsに自動インストール。既存ライブラリの管
理に便利。

23.
Grunt
•JSベースの作業自動化ツール
$ grunt server
server, build, test, clean...
様々な作業を自動化、ローカルWebサーバー起動、フ
ァイル更新監視、リリースビルド、テストetc...
制作時の中核的ツール。はっきりいって神！

24.
v0.9以前をお使いの方へ
v1.0 betaになってからすごく変わったのでmigrating guideを読みましょう。

25.
コマンドの変更
yeoman init ➜ yo
yeoman build ➜ grunt [build]
yeoman server ➜ grunt server
yeoman test ➜ grunt test
yeoman install ➜ bower install
yeoman uninstall ➜ bower uninstall
yeoman update ➜ bower update
yeoman list ➜ bower list
yeoman search ➜ bower search
yeoman lookup ➜ bower lookup

26.
実際につかってみる。

27.
実際につかってみるとわかるけど、
裏ではGruntが
相当がんばっている！
崇めようイノシシ神

28.
Gruntfile.js
詳しくは公式で学びましょう
http://gruntjs.com/

29.
あと実は最初、、、
Bower要らないと思ってました
サーセン！
トリも食ってみるとウマかったです

30.
component を検索してみよう
http://sindresorhus.com/bower-components/

31.
まずはこれだけ覚えよう！
$ yo webapp
$ grunt server
はじめる前のじゅもん リリースのじゅもん
$ grunt build
or
$ grunt server:dist
まずは Designing in the Browserを快適に楽しんでみるといいよ！

32.
応用編

33.
RequireJSをインクルードしてwebappを生成すると、
JSはモジュール化されたファイル構成で出力される。
•main.js
•app.js
モジュールの読み込み、依存関係を記述する
（require）
モジュール本体（define）
AMDについては以下を読むといい
http://requirejs.org/docs/why.html
http://requirejs.org/docs/whyamd.html

34.
main.js
モジュールのパスを指定
モジュールの依存関係を定義
モジュールを利用
した処理を記述

35.
app.js
モジュールの処理を記述

36.
app.js を変更してjqueryを使えるようにする

37.
2.モジュール化した
Coffeeをグローバルに
コンパイルする

38.
YeomanはCoffeeScriptを自動的にコンパイルする。
便利なんだけど、CoffeeScriptはデフォルトで即時関数
化するので複数のCoffeeファイル間でグローバル空間
を利用するようなプログラムはコンパイル後に動かな
くなる。
※ RequireJSとか使ってうまいことやらない場合のお話です。

39.
Gruntfile.js coffee:dist ブロックにオプションを追加する
参考: https://github.com/gruntjs/grunt-contrib-coffee#readme
以前ブログに書きましたYeoman v0.9時点の話だけど。
http://goo.gl/hc4Em

40.
3.REST API サーバーを
同時に開発する

41.
Yeomanはプレビュー用localhostサーバーを立てる。
便利なんだけど、JSONベースのREST APIサーバーを
同時に開発する場合は別サーバーを立てないといけな
い。その場合クロスオリジンになるのでそのまんまだ
とajax通信ができなくて不便。

42.
やり方
長いのでブログに書きました。
http://goo.gl/SojUc

43.
こうが、、、
Web Browser
Yoman Preview Server
(localhost:9000)
API Server
(localhost:3000)
✘ajax request

44.
こうなるイメージ
Web Browser
Yeoman Preview Server
(localhost:9000)
API Server
(localhost:3000)
Proxy Server
(localhost:8000)
ajax request

45.
Yo, Grunt, Bower, (node.js) の相互依存
性が低いので工夫次第でいくらでも便利
にカスタマイズできそう。:)

46.
まとめ

47.
Yeomanを使うと、
Webアプリ開発効率が
アップすると思います。

48.
ぜひ使ってみてください！

49.
happy