最近使っているフロントエンドのツールについて紹介

1. Frontend Tools
#gotanda.vm 2015/01/28
Mobile Factory @mizuki_r

2. name.
飯沼 遼
account.
twitter: @mizuki_r
github: ry_mizuki
role.
フロントエンド寄りのエンジニア

3. フロントエンドの
最近使っているツールの紹介

4. context
• Node界隈の発展が速い
• たくさんライブラリあって迷い
• こういうツールがあるらしいけどどうなんだろ？
という意見をちらほら聞く。

5. トークの狙い
• 懇親会のネタの提供
• NodeJSやツールに触れてみるきっかけ
• ツールやライブラリ選びの参考

6. フロントエンド開発の構成

7. とあるSPAの環境
• Mac OS上でコーディング
• Mac OS上でローカルサーバをたてて動作確認
• coffee-script や SCSS などのメタ言語のコンパイル
• APIをJSONファイルをレスポンスとして返すモックサー
バで置き換え

8. coffee
scss
html
js
css
html
server
user
mock
server
API
server

9. 今日お話すること
• タスクランナー
• ブラウザサイド CommonJS
• API モックサーバー
• ローカルサーバー

10. タスクランナー

11. coffee
scss
html
js
css
html
server
user
mock
server
API
server

12. Grunt
• 実装と設定が分離している
• Pluginのサポートが手厚い
• Grunt自体のAPIが充実している
• `—help` オプションが標準搭載

13. gulp
• 速い
• nodeのままタスクが記述できる
• 設定と実装が密になりがち
• `—help` は自分が実装する

14. Grunt vs gulp
• Grunt
• あまりNodeに慣れてない、これから勉強する人向け
• すでにあるpluginの設定を再利用で簡単に動く
• gulp
• Nodeに慣れてる人向け
• 速いし融通が聞くので複雑なタスクに
利用者と用途を考慮して選択して欲しい

15. ブラウザサイド
CommonJS

16. coffee
scss
html
js
css
html
server
user
mock
server
API
server

17. CommonJSとは
• JavaScriptにおけるモジュールシステムの標準的な概念
• NodeJSの `module.exports` や `require` などの仕組みの
原型

18. ブラウザサイド
• ファイルの依存関係を考慮しつつ1ファイルに結合
• 依存関係がコード上でも明示的になる
• HTMLやJSONをJavaScript内に埋め込める

19. Browserify
• Browser side CommonJSの代表格
• `module.exports` `require` などのモジュールシステム
• pluginによる幅広いファイルのロード・コンパイル

20. Webpack
• browserifyの強力な対抗馬
• NodeJSライクなモジュールシステム
• 幅広く柔軟性の高いローダー・コンパイラ
• `require` の細かい挙動制御

21. browserify vs webpack
• 個人的にはWebpack(あまり客観的に対比してないのです。。。)
• 別ファイルで定義されているモジュールへの参照
• 独自ローダーの書きやすさ
• ドキュメントの充実性
• loaderの名前空間が `*-loader` で統一されている
• 公式が多くのpluginを提供している

22. APIモックサーバー

23. coffee
scss
html
js
css
html
server
user
mock
server
API
server

24. stubcell
• リクエストとレスポンスを定義してJSON-APIを再現
• YAMLでレスポンスの細かい制御
• JSON5対応なのでJSONファイルの中にコメント書ける
• stubcellから別URLにプロキシしてそのレスポンス内容
を保存するrecord機能

25. JSON-API Mock
• バックとフロントで役割を完全分担できるのは素晴らしい
• カジュアルにMockが書けて素晴らしい
• JSONのレスポンスのバリエーション増えると辛い
• Docs， Mock，Validatorがセットになってると嬉しかった
• API Blueprint, prmd等他にもツールはある
• どこも試行錯誤中っぽい・・・

26. ローカルサーバー

27. coffee
scss
html
js
css
html
server
user
mock
server
API
server

28. connect
• 鉄板ライブラリ
• nodeのライトウェイトサーバ
• expressとミドルウェアの互換性がある
• grunt-contrib-connect, gulp-connect, etc…

29. browser-sync
• サーバーの機能はおまけに過ぎない
• 複数のブラウザ間でクリック・遷移・フォームインプッ
トを共有できる
• grunt-contrib-connectのサーバにプロキシしてもいい
し、内部に組み込まれているconnectのサーバを使って
もいい
• 複数端末を同時に操作したいときにおすすめ

30. おわりに

31. おわりに
• GruntやGulp周りで出てくるツールは開発効率化への貢
献度が高め
• 知っておくだけでも開発のしやすさとか全然違うかも

32. ご清聴ありがとうございました