Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

最近のフロントエンドツールの紹介

10,023 views

Published on

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

Published in: Software
  • Be the first to comment

最近のフロントエンドツールの紹介

  1. 1. Frontend Tools #gotanda.vm 2015/01/28 Mobile Factory @mizuki_r
  2. 2. name. 飯沼 遼 account. twitter: @mizuki_r github: ry_mizuki role. フロントエンド寄りのエンジニア
  3. 3. フロントエンドの 最近使っているツールの紹介
  4. 4. context • Node界隈の発展が速い • たくさんライブラリあって迷い • こういうツールがあるらしいけどどうなんだろ? という意見をちらほら聞く。
  5. 5. トークの狙い • 懇親会のネタの提供 • NodeJSやツールに触れてみるきっかけ • ツールやライブラリ選びの参考
  6. 6. フロントエンド開発の構成
  7. 7. とあるSPAの環境 • Mac OS上でコーディング • Mac OS上でローカルサーバをたてて動作確認 • coffee-script や SCSS などのメタ言語のコンパイル • APIをJSONファイルをレスポンスとして返すモックサー バで置き換え
  8. 8. coffee scss html js css html server user mock server API server
  9. 9. 今日お話すること • タスクランナー • ブラウザサイド CommonJS • API モックサーバー • ローカルサーバー
  10. 10. タスクランナー
  11. 11. coffee scss html js css html server user mock server API server
  12. 12. Grunt • 実装と設定が分離している • Pluginのサポートが手厚い • Grunt自体のAPIが充実している • `—help` オプションが標準搭載
  13. 13. gulp • 速い • nodeのままタスクが記述できる • 設定と実装が密になりがち • `—help` は自分が実装する
  14. 14. Grunt vs gulp • Grunt • あまりNodeに慣れてない、これから勉強する人向け • すでにあるpluginの設定を再利用で簡単に動く • gulp • Nodeに慣れてる人向け • 速いし融通が聞くので複雑なタスクに 利用者と用途を考慮して選択して欲しい
  15. 15. ブラウザサイド CommonJS
  16. 16. coffee scss html js css html server user mock server API server
  17. 17. CommonJSとは • JavaScriptにおけるモジュールシステムの標準的な概念 • NodeJSの `module.exports` や `require` などの仕組みの 原型
  18. 18. ブラウザサイド • ファイルの依存関係を考慮しつつ1ファイルに結合 • 依存関係がコード上でも明示的になる • HTMLやJSONをJavaScript内に埋め込める
  19. 19. Browserify • Browser side CommonJSの代表格 • `module.exports` `require` などのモジュールシステム • pluginによる幅広いファイルのロード・コンパイル
  20. 20. Webpack • browserifyの強力な対抗馬 • NodeJSライクなモジュールシステム • 幅広く柔軟性の高いローダー・コンパイラ • `require` の細かい挙動制御
  21. 21. browserify vs webpack • 個人的にはWebpack(あまり客観的に対比してないのです。。。) • 別ファイルで定義されているモジュールへの参照 • 独自ローダーの書きやすさ • ドキュメントの充実性 • loaderの名前空間が `*-loader` で統一されている • 公式が多くのpluginを提供している
  22. 22. APIモックサーバー
  23. 23. coffee scss html js css html server user mock server API server
  24. 24. stubcell • リクエストとレスポンスを定義してJSON-APIを再現 • YAMLでレスポンスの細かい制御 • JSON5対応なのでJSONファイルの中にコメント書ける • stubcellから別URLにプロキシしてそのレスポンス内容 を保存するrecord機能
  25. 25. JSON-API Mock • バックとフロントで役割を完全分担できるのは素晴らしい • カジュアルにMockが書けて素晴らしい • JSONのレスポンスのバリエーション増えると辛い • Docs, Mock,Validatorがセットになってると嬉しかった • API Blueprint, prmd等他にもツールはある • どこも試行錯誤中っぽい・・・
  26. 26. ローカルサーバー
  27. 27. coffee scss html js css html server user mock server API server
  28. 28. connect • 鉄板ライブラリ • nodeのライトウェイトサーバ • expressとミドルウェアの互換性がある • grunt-contrib-connect, gulp-connect, etc…
  29. 29. browser-sync • サーバーの機能はおまけに過ぎない • 複数のブラウザ間でクリック・遷移・フォームインプッ トを共有できる • grunt-contrib-connectのサーバにプロキシしてもいい し、内部に組み込まれているconnectのサーバを使って もいい • 複数端末を同時に操作したいときにおすすめ
  30. 30. おわりに
  31. 31. おわりに • GruntやGulp周りで出てくるツールは開発効率化への貢 献度が高め • 知っておくだけでも開発のしやすさとか全然違うかも
  32. 32. ご清聴ありがとうございました

×