Chrome Tech Talk Night #4に行ってきたよ！：UXClip（15）（3/3 ページ）

[西谷 太郎，＠IT]

Webアプリケーション開発のワークフローとYeoman（ Webapp Workflow & Yeoman ）（講演者:Paul Irish）

　タイトルはちょっとカタめですが、全体のテーマは「楽しくWebアプリをつくろう！」です。そのため大事なのは

• ツールを使ってどんどん自動化する！
• 見た目にもこだわる！

　ことです。

　そのためのいろんなツールやスタイルを紹介してくれています。ただ個人によって最適な環境というのは違うので、それぞれが自分に合った環境を追求するのが良いでしょう。（こういう内容だと参加者の皆さんかなりこだわりがあるようで、質疑応答でもばんばん宗教戦争が勃発していました。）

dotfile

　講演者のdotfileはここで紹介されています。中でもお勧めのエイリアスは、

• z
• ディレクトリ移動
• server
• 簡易Webサーバの起動
• c
• 色付きcat
• gz
• gzip圧縮
• estract
• tarオプションの省略

　だそうです。

　いろんなドットファイルに関するコミュニティもあるので、興味がある方はぜひ参加してみてください。（ちなみにここで紹介されたのがbashだったので、質疑応答のときに「zshにはしないんですか？」というツッコミが……。）

git

　ファイルに変更を掛けて、リポジトリにcommitして、サーバにpushして、サーバにログインして、サーバ上で変更を反映して……なんてやってられません！ push時にデプロイするようなフックスクリプトを書くのがクールですね！

　また、commitの度に写真を取るようなフックも紹介されました。それらをつなげたものがこんな感じです！ 直接開発に関わりがない工夫ですが、日々の開発がちょっと楽しくなりますね。

Yeoman

　Webアプリを楽しく！ 速く！ 作るためのフレームワークとツールセット。オープンソースです。

• http://yeoman.io/
• https://github.com/yeoman/yeoman

何ができるの？

• Compass、Sass、Cofeescript
• AMDモジュールのサポート - RequireJS，ECMAScript6など。（AMDについては http://www.slideshare.net/othree/module-amd-requirejs など参照）
• Bootstrap、HTML5Boilerplate、Modernizr（HTML/CSSテンプレート）
• Twitter Bower（https://github.com/twitter/bower、http://www.ideaxidea.com/archives/2012/09/bower.html）
• Mocha. PhantomJSのサポート
• r.js、OptiPNG、jpegtran、confess.js

　こういったものを利用している皆様に朗報！ フレームワーク全体で連携を支援します。

パッケージマネージャー

　多くの外部ライブラリをパッケージ管理でき、githubで更新があればマネージャー経由で更新を掛けられます。（なお設定でgithub以外のコードを利用することもできます）。パッケージ同士の依存関係も管理してくれます。

ジェネレーター

　上記ライブラリを組み込んだ形でスキャッフォールドを生成できます。

リアルタイム更新

　かけた修正は自動で読み込んでレンダリングします。

テスト

　PhantomJSによるテストをサポートしています。bunyipによる、モバイルブラウザエミュレーションによるテストを可能に。テスト実行中はこんな感じ（スライド）だと楽しいですよね！

まとめ

　あなたが何かを繰り返して行っていると感じたら、それはきっと誰かが自動化してくれています。探してみよう。探してもなかったら……そのときはあなたが自動化してね！

その他参考

• 当日のtwitterまとめ
• 告知のブログ……次回以降に参加したい人はここをチェックするといいです。