1. Yeoman
ではじめる爆速Webアプリ開発
Sencha UG 勉強会 #19@大阪
2014.4.18
Bathtimefish 村岡 正和

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
@bathtimefish

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

4. Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中！
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
（Gaia開発環境の構築とデバッグ）
著

5. 今日のおはなし

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

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

8. それ、Yeomanでできるよ。

9. Web制作の準備はいろいろめんどくさい

10. コード書く前の準備いろいろ
• ディレクトリ構成 js/ styles/ images/ ...
• 制作用Webサーバー
• いいかんじのライブラリとかプラグインさがすの
• いい感じのHTML5ページのテンプレート
• 支援ツール altJS, js/css圧縮, Test ...
etc...

11. このオッサンが全部用意します。

12. Yeoman

13. http://yeoman.io/

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

16. こんな人にモロ刺さります。
• 制作テンプレ持ってない。つーか作るのメンドイ
• 最初っからレスポンシブのテンプレがいい。
• 最適化・軽量化に細かいこだわりはない。いい感じ
にやってほしい
• JSライブラリさがすのだるい
• Sass最高ヒャッハー！
• つーかWeb制作めんどくさい
• つーか仕事めんどくさい。生きるのもめんどい
こんなの

17. セットアップ

18. 黒い画面で、

19. npm install -g yo

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

21. npm install -g generator-webapp

22. webappの作成

23. yo webapp

24. yo webapp --coffee
CoffeeScriptを使う場合

25. サーバーの起動

26. grunt server

27. リリース前のビルド

28. grunt build

29. 実際にやってみる

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

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

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

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

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

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

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

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

38. bower install underscore.number --save
grunt bowerInstall
bower install したライブラリを依存ライブラリとともに
webページに追加してくれる
webappでのJSライブラリの追加

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

40. いろんなgeneratorをつかってみよう！
http://yeoman.io/official-generators.html

41. 応用編

42. 1. YeomanでAMD
Asynchronous Module Definition

43. RequireJS入りwebapp
https://github.com/popox/generator-webapp-rjs

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

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

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

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

48. http://www.slideshare.net/bathtimefish/amd-basic-and-practice

49. Webページごとに別々のモジュール構成を持つJS
を書くと、開発時には動いてるが、build後に動か
なくなる。
※ webappでAMDを使う場合の注意点
grunt buildではr.jsを使ったJSファイルのマージ、圧縮が行われる。このと
きデフォルトの設定だとページごとのJSがひとつのファイルにマージ＆圧
縮されてモジュール構成が破壊されるため。

50. ちゃんと動く設定例書きました。
https://github.com/bathtimefish/yeoman-webapp-rjs-multipage-example
http://bathtimefish.hatenablog.com/entry/2013/11/03/185340
参考記事

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

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

53. Coffee -> JSはいつもこんなかんじ
これはこれでいいことだけど複数Coffeeファイル間でオブジェクトをグローバ
ルで共有してラフに楽をしたい場合とかちょっとアレ。

54. Gruntfile.js coffee:dist ブロックにオプションを追加する
参考: https://github.com/gruntjs/grunt-contrib-coffee#readme
optionsについてはgrunt-contrib-coffeeを参照
https://github.com/gruntjs/grunt-contrib-coffee

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

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

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

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

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

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

61. Yo, Grunt, Bower, (node.js) の相互依存
性が低いので工夫次第でいくらでも便利
にカスタマイズできる。:)
これかなり重要！！

62. http://yeoman.io/generators.html#writing-your-first-generator
カスタムGeneratorを作成する

63. とりあえずつくってみてます。
頓挫中 orz

64. むしゃくしゃしたのでやった
https://github.com/bathtimefish/generator-webapp-typescript
TypeScript 1.0 リリース記念

65. ビール飲みながらつくった。
HTMLをモジュール化してAjaxで取得できるWebApp サンプル
https://github.com/bathtimefish/webapp-handlebars-ajax

66. 御社制作ワークフローのため
のgenerator開発いたします。
企業のみなさまへ、
通常見積もり価格 3割増 のところを、
今ならなんと20%引き！！
Call Now!!

67. generator hackation
やりたいです。

68. まとめ

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

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

71. happy

72. coding

73. :)

74. Thanks.