JavaScript Development Tools

7abf6b0f75a5facea016cc58485a4a45?s=47 HIRAKI Satoru
February 20, 2013

JavaScript Development Tools

Frontrend Vol.4 powered by CyberAgent, Inc.

http://frontrend.github.com/events/04/

2013年2月9日(土)に行われたFrontrend Vol.rの第1セッション"JavaScript Development Tools– JavaScript開発の効率アップ"の資料です。

7abf6b0f75a5facea016cc58485a4a45?s=128

HIRAKI Satoru

February 20, 2013
Tweet

Transcript

  1. None
  2. JavaScript Development Tools JavaScript開発の効率アップ 平木 聡 / id:Layzie CyberAgent,Inc. Frontrend(フロントレンド)

    Vol.4 powered by CyberAgent
  3. Self‐Introduction 平木 聡 Webディベロッパー JavaScriptを書くのがメイン業務 主にソーシャルゲーム作ってます。 ネットでは大体Layzieで活動してますがTwitterは やってない

  4. http://layzie.hatenablog.com/

  5. http://bonsaiden.github.com/JavaScript-Garden/ja/

  6. http://www.html5rocks.com/ja/tutorials/async/deferred/

  7. https://github.com/enja-oss

  8. Purpose JavaScriptツール初心者 から脱初心者へ

  9. Agenda

  10. Agenda JavaScript開発に役立つGUIツールの紹介 JavaScript開発に役立つCUIツールの紹介 まとめ

  11. GUI Tools for JavaScript Dev

  12. Chrome Developer Tool ʴ

  13. Chrome Developer Tool 実は既に弊社社内勉強会で、吉川 徹さんが発表 してくれており非常に参考になります。 http://www.slideshare.net/yoshikawa_t/ chrome-devtoolsnext

  14. Chrome Developer Tool ⌘+Option+I DevTool起動 ⌘+O js/cssファイル選択 ⌘+Shift+O js関数選択 ⌘+L

    指定行移動 ⌘+Option+F js全体の検索 ショートカットを覚えると効率UP
  15. Chrome Developer Tool JavaScriptを書いてて上手く動かない… そんな時はデバッグが必要です Chrome Developer Toolは複数の方法でデバッ グできます

  16. Click! Break Point

  17. Break Point Stop! Control!

  18. Chrome Developer Tool 他にもこんなタイミングでブレークできます DOMの属性が変更 Errorが投げられたとき 特定のイベントが発生したとき etc..

  19. Chrome Developer Tool 他にもこんなことが分かります

  20. Timeline

  21. Profile

  22. Chrome url chrome://chrome-urlのアドレスで特殊なURL 一覧が表示されます 色々な隠し項目があります 話題のSPDYなんかの通信状態も見れます

  23. chrome://net-internals/

  24. Charles ʴ

  25. http://www.charlesproxy.com/

  26. デバッグ用Proxy 有料$50 (試用期間30日あり) 多機能なんで、よく使う機能紹介 Charles

  27. MapLocal

  28. Throttle

  29. DocHub ʴ

  30. http://dochub.io/#css/

  31. jsFiddle ʴ

  32. http://jsfiddle.net/

  33. jsPerf ʴ

  34. http://jsperf.com/

  35. Setup

  36. Test

  37. Result

  38. Revisions

  39. browserling ʴ

  40. https://browserling.com/

  41. Browser Test

  42. CUI Tools for JavaScript Dev

  43. JSHint ʴ

  44. http://www.jshint.com/

  45. JavaScriptシンタックスチェッカー Webアプリ / CUIで提供 CUIはNode.jsで動作します JSHint

  46. JSHint % brew install node % npm install -g jshint

    % jshint -v 0.9.1
  47. JSHint 1 (function (window, undefined) { 2 WIN = window;

    3 DOC = document; 4 5 doc.addEventListener(function(e) { 6 e.preventDefault(); 7 dd.style.display = 'none' 8 9 if (!!e.target) { 10 console.log('This target is ' + e.target); 11 } else { 12 console.log('This have no target.'); 13 } 14 15 for (var i = 0; i < e.touches.length; i++) { 16 e[i] = arguments.callee; 17 } 18 }); 19 20 }(this)); 21
  48. JSHint % jshint wrong_pattern.js wrong_pattern.js: line 2, col 3, Expected

    'WIN' to have an indentation at 5 instead at 3. wrong_pattern.js: line 3, col 3, Expected 'DOC' to have an indentation at 5 instead at 3. wrong_pattern.js: line 5, col 3, Expected 'doc' to have an indentation at 5 instead at 3. wrong_pattern.js: line 5, col 32, Missing space after 'function'. wrong_pattern.js: line 16, col 14, Avoid arguments.callee. wrong_pattern.js: line 17, col 5, Expected '}' to have an indentation at 9 instead at 5. wrong_pattern.js: line 18, col 3, Expected '}' to have an indentation at 5 instead at 3. wrong_pattern.js: line 2, col 3, 'WIN' is not defined. wrong_pattern.js: line 3, col 3, 'DOC' is not defined. wrong_pattern.js: line 5, col 3, 'doc' is not defined. wrong_pattern.js: line 7, col 5, 'dd' is not defined. 20 errors
  49. jq ʴ

  50. http://stedolan.github.com/jq/

  51. JSONプロセッサ JSONの出力結果をクエリで操作 最新版は1.2だけど、Homebrewだと1.1 jq

  52. % brew install jq % jq --version jq version 1.1

    jq
  53. % cat twitter.json | jq '.' % cat twitter.json |

    jq '.results[0]' % cat twitter.json | jq '.results[0] | {from_user, text}' jq
  54. Doctor JS ʴ

  55. http://doctorjs.org/

  56. JavaScript用タグファイル生成 Firefox作っているMozilla製 対応しているエディタなどで効果発揮 Doctor JS

  57. % npm install -g jsctags % jsctags demo/doctorjs Doctor JS

  58. Yeoman ʴ

  59. http://yeoman.io/

  60. Webアプリケーション作成支援ライブラリ Googleの中の人達で開発(Google製ではない) 既存ライブラリを組み合わせて開発されてる Yeoman

  61. % npm install -g yeoman % curl -L get.yeoman.io |

    bash Yeoman
  62. % yeoman init % yeoman build % yeoman server %

    yeoman test % yeoman install % yeoman uninstall % yeoman update % yeoman list % yeoman search % yeoman lookup Yeoman
  63. Web App (default) AngularJS Backbone BBB (Backbone Boilerplate) Chrome Apps

    Basic Boilerplate Ember Jasmine Mocha Testacular Yeoman
  64. Conclusion

  65. 最近のJavaScript開発には便利なツールが いっぱい 「不便だな」と思ったらツールを探してみる サイクル作ると生産性UP 特にCUIツールは「黒い画面」だからと尻込み しないで使うと幸せになれる Conclusion

  66. Thank you!!

  67. http://www.flickr.com/photos/zzpza/ 3269784239/ Photo Credit Thanks