つかってみよう！yeoman 〜riaビルドツール超入門+α〜
DESCRIPTION
TRANSCRIPT
YeomanRIA ビルドツール超入門＋α
JS MEET UP Vol.12013.6.29
Bathtimefish 村岡 正和
つかってみよう！
自己紹介
Webアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和 @bathtimefish
http://html5-west.jp/
HTML5-WEST.jpHTML5 JavaScript中国拳法 Python 主夫になりたい
炊事 Google Apps
監修しました。
実例ごとの実装例がたくさん書いてあります。ウェブサイト制作やCMSの運用時に便利です。
好評販売中！！
<htmlday>
<htmlday> 凸撃生放送舞台裏 Photoレポート：世界のITエキスパートたちを捕獲！ 凸撃インタビュー - ＠IT
http://bit.ly/ZGGQA3
今日のおはなし
HTML5でイマドキっぽいWebサイトやWebアプリをつくるときにいろいろメンドイことがあって、
今日のおはなし
メンドイことがいい感じに自動的になったりしたらめんどくなくていいんだけどナンかいいのない？
今日のおはなし
それ、Yeomanでできるよ。というおはなし。
Yoemanつかったことない人向けにカンタンな紹介をします。あと、実用的なこともすこし。
おはなしの流れ
•制作でめんどうなこといろいろあるよね•セットアップ•Yeomanを構成するツール•実際に使ってみる •とりあえず覚えておくコマンド•応用編 Tips
制作でめんどうなこといろいろあるよね？
コード書く前の準備いろいろ
• ディレクトリ構成• ローカルWebサーバー• クロスプラットフォームなページのスケルトン。ベストプラクティスなやつ。
• いいかんじのライブラリとかプラグインさがすの
etc...
コード書き中のいろいろ
• Save Reload Save Reload Save Reload...• CoffeeとかSassとかのコンパイル• テストの実行• 最適化、軽量化• ライブラリやフレームワークのアップデート
etc...
このオッサンがテキトーにやります。
Yeoman
Yeoman’s service
デキるオッサン
い ざ と い う と き の 際 立 っ た 働 き
こんな人にモロ刺さります。
• 制作テンプレ持ってない。つーか作るのメンドイ• 最近JavaScript書いてない。Coffee依存症• 最適化・軽量化に細かいこだわりはない。いい感じにやってほしい
• Sass最高ヒャッハー！• もうCompassでいいです• もうBootstrapでいいです
こんなの
まずはつかってみる
セットアップ
黒い画面で、
npm install -g yo grunt-cli bower
※ grunt0.3以前をインストールしている場合、アンインストールしておく。
...と、そのまえに入れておくもの。
node.js (>=0.8.0)
ruby
compass
※ compass はgemで、node.jsは nodebrewが個人的にオススメhttp://compass-style.org/https://github.com/hokaccha/nodebrew
Yeomanを構成するツール
yo grunt bower
scaffolding preview, build, test package management
Yo
•Yeomanのプロジェクトを生成する$ yo webapp
angular, backbone, ember, chromeapp...様々なフレームワークのscaffoldingが可能。HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
Bower
•JSライブラリのパッケージマネージャ$ bower install underscore
install, search, list, update...JSライブラリ、jQueryプラグインなどを検索してapp/componentsに自動インストール。既存ライブラリの管理に便利。
Grunt
•JSベースの作業自動化ツール$ grunt server
server, build, test, clean...様々な作業を自動化、ローカルWebサーバー起動、ファイル更新監視、リリースビルド、テストetc...
制作時の中核的ツール。はっきりいって神！
実際につかってみるとわかるけど、
裏ではGruntが相当がんばっている！
コーディング中にお世話になるのはほとんどGrunt
あと実は最初、、、
Bower要らないと思ってました
サーセン！
トリも食ってみるとウマかったです
component を検索してみよう
http://sindresorhus.com/bower-components/
まずはこれだけ覚えよう！
$ yo webapp
$ grunt server
はじめる前のじゅもん リリースのじゅもん
$ grunt build
or
$ grunt server:dist
まずは Designing in the Browserを快適に楽しんでみるといいよ！
YeomanでAMD
Asynchronous Module Definition
RequireJSをインクルードしてwebappを生成すると、JSはモジュール化されたファイル構成で出力される。
•main.js•app.js
モジュールの読み込み、依存関係を記述する（require）
モジュール本体（define）
AMDについては以下を読むといいhttp://requirejs.org/docs/why.htmlhttp://requirejs.org/docs/whyamd.html
RequireJSをとはつまり、
C言語の import とかRubyの require みたいに
JavaScriptで外部JavaScriptファイルの読み込みを実現するライブラリ
main.js
モジュールのパスを指定
モジュールの依存関係を定義
モジュールを利用した処理を記述
app.js
モジュールの処理を記述
app.js を変更してjqueryを使えるようにする
応用編
1.モジュール化したCoffeeをグローバルにコンパイルする
YeomanはCoffeeScriptを自動的にコンパイルする。便利なんだけど、CoffeeScriptはデフォルトで即時関数化するので複数のCoffeeファイル間でグローバル空間を利用するようなプログラムはコンパイル後に動かなくなる。
※ RequireJSとか使ってうまいことやらない場合のお話です。
Coffeeはいつもこんなかんじ
これはこれでいいんだけど複数Coffeeファイルで生成したインスタンスをグローバルで共有して楽をしたい場合とかちょっとアレ。
Gruntfile.js coffee:dist ブロックにオプションを追加する
参考: https://github.com/gruntjs/grunt-contrib-coffee#readme
以前ブログに書きました Yeoman v0.9時点の話だけど。http://goo.gl/hc4Em
2.REST API サーバーを同時に開発する
Yeomanはプレビュー用localhostサーバーを立てる。便利なんだけど、JSONベースのREST APIサーバーを同時に開発する場合は別サーバーを立てないといけない。その場合クロスオリジンになるのでそのまんまだとajax通信ができなくて不便。
そしたら、
@kamiyamさんがもっと便利なの書いてくれたhttp://bit.ly/13r1xj5
ぜったいこっちをつかうべき！
こうが、、、
Web Browser
Yoman Preview Server(localhost:9000)
API Server(localhost:3000)
✘ajax request
こうなるイメージ
Web Browser
Yeoman Preview Server(localhost:9000)
API Server(localhost:3000)
Proxy Server(localhost:8000)
ajax request
Yo, Grunt, Bower, (node.js) の相互依存性が低いので工夫次第でいくらでも便利にカスタマイズできそう。:)
まとめ
Yeomanを使うと、 Webアプリ開発効率がアップすると思います。
ぜひ使ってみてください！
happy����������� ������������������ coding����������� ������������������ :)
Thanks.