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開発の効率アップ"の資料です。

Transcript

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