1. Yeoman
RIA ビルドツール超入門＋α
JS MEET UPVol.1
2013.6.29
Bathtimefish 村岡 正和
つかってみよう！

2. 自己紹介
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス
ティバル実行委員など
むらおか まさかず
村岡正和 @bathtimefish
http://html5-west.jp/
HTML5-WEST.jp
HTML5 JavaScript
中国拳法 Python 主夫になりたい
炊事 Google Apps

3. 監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中！！

4. マークアップ部発足！
html5j.org
初代 部長になりました。

5. <htmlday>
<htmlday> 凸撃生放送舞台裏 Photoレポート：世界のITエキスパートたちを捕獲！ 凸撃インタビュー - ＠IT
http://bit.ly/ZGGQA3

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

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

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

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

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

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

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

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

14. Yeoman

15. http://yeoman.io/

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

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

19. まずはつかってみる

20. セットアップ

21. 黒い画面で、

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

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

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

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

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

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

28. 実際につかってみるとわかるけど、
裏ではGruntが
相当がんばっている！
コーディング中にお世話になるのはほとんどGrunt

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

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

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

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

33. YeomanでAMD
Asynchronous Module Definition

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

35. RequireJSをとはつまり、
C言語の import とか
Rubyの require みたいに
JavaScriptで外部JavaScriptファイル
の読み込みを実現するライブラリ

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

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

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

39. 応用編

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

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

42. Coffeeはいつもこんなかんじ
これはこれでいいんだけど複数Coffeeファイルで生成したインスタンスをグロ
ーバルで共有して楽をしたい場合とかちょっとアレ。

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

44. 2.REST API サーバーを
同時に開発する

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

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

47. そしたら、
@kamiyamさんがもっと便利なの書いてくれた
http://bit.ly/13r1xj5
ぜったいこっちをつかうべき！

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

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

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

51. まとめ

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

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

54. happy

55. coding

56. :)

57. Thanks.