最近のフロントエンドツールの紹介
- 1. Frontend Tools #gotanda.vm 2015/01/28 Mobile Factory @mizuki_r
- 4. context • Node界隈の発展が速い • たくさんライブラリあって迷い • こういうツールがあるらしいけどどうなんだろ？ という意見をちらほら聞く。
- 5. トークの狙い • 懇親会のネタの提供 • NodeJSやツールに触れてみるきっかけ • ツールやライブラリ選びの参考
- 6. フロントエンド開発の構成
- 7. とあるSPAの環境 • Mac OS上でコーディング • Mac OS上でローカルサーバをたてて動作確認 • coffee-script や SCSS などのメタ言語のコンパイル • APIをJSONファイルをレスポンスとして返すモックサー バで置き換え
- 9. 今日お話すること • タスクランナー • ブラウザサイド CommonJS • API モックサーバー • ローカルサーバー
- 10. タスクランナー
- 12. Grunt • 実装と設定が分離している • Pluginのサポートが手厚い • Grunt自体のAPIが充実している • `—help` オプションが標準搭載
- 13. gulp • 速い • nodeのままタスクが記述できる • 設定と実装が密になりがち • `—help` は自分が実装する
- 14. Grunt vs gulp • Grunt • あまりNodeに慣れてない、これから勉強する人向け • すでにあるpluginの設定を再利用で簡単に動く • gulp • Nodeに慣れてる人向け • 速いし融通が聞くので複雑なタスクに 利用者と用途を考慮して選択して欲しい
- 15. ブラウザサイド CommonJS
- 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モックサーバー
- 24. stubcell • リクエストとレスポンスを定義してJSON-APIを再現 • YAMLでレスポンスの細かい制御 • JSON5対応なのでJSONファイルの中にコメント書ける • stubcellから別URLにプロキシしてそのレスポンス内容 を保存するrecord機能
- 25. JSON-API Mock • バックとフロントで役割を完全分担できるのは素晴らしい • カジュアルにMockが書けて素晴らしい • JSONのレスポンスのバリエーション増えると辛い • Docs， Mock，Validatorがセットになってると嬉しかった • API Blueprint, prmd等他にもツールはある • どこも試行錯誤中っぽい・・・
- 26. ローカルサーバー
- 28. connect • 鉄板ライブラリ • nodeのライトウェイトサーバ • expressとミドルウェアの互換性がある • grunt-contrib-connect, gulp-connect, etc…
- 29. browser-sync • サーバーの機能はおまけに過ぎない • 複数のブラウザ間でクリック・遷移・フォームインプッ トを共有できる • grunt-contrib-connectのサーバにプロキシしてもいい し、内部に組み込まれているconnectのサーバを使って もいい • 複数端末を同時に操作したいときにおすすめ
- 30. おわりに
- 32. ご清聴ありがとうございました