TalkNote Vol.8「TalkNote × Frontrend」 - JavaScript開発の効率アップ -

http://talknote.me/vol8/event/

TalkNote Vol.8「TalkNote × Frontrend」のセッション2「JavaScript開発の効率アップ」の発表資料になります。

Transcript

1. JavaScript Development Tools JavaScript開発の効率アップ 平木 聡 / id:Layzie CyberAgent,Inc. TalkNote Vol.8「TalkNote × Frontrend」
2. Self‐Introduction 平木 聡 Webディベロッパー JavaScriptを書くのがメイン業務 主にソーシャルゲームの共通基盤の仕事 ネットでは大体Layzieで活動してますがTwitterは やってない
3. http://layzie.hatenablog.com/
4. http://qiita.com/users/Layzie@github
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 開発時には、毎日更新されるChrome Canaryの使 用をオススメします https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
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 Developer Tool 実は既に弊社社内勉強会で、吉川 徹さんが発表 してくれており非常に参考になります。 http://www.slideshare.net/yoshikawa_t/ chrome-devtoolsnext https://vimeo.com/67775750
23. Dash ʴ
24. http://kapeli.com/dash
25. Mac OS X専用のドキュメントビューア デフォルトで色々な言語・ライブラリに対応 色々なアプリと連携可能 Dash
26. JS Bin ʴ
27. http://jsbin.com/
28. HTML/CSS/JavaScriptエディタ ライブラリも多く、SASSやCoffeeScriptも JavaScriptの実行は自動でしてくれる JS Bin
29. jsPerf ʴ
30. http://jsperf.com/
31. Setup
32. Test
33. Result
34. Revisions
35. JSter ʴ
36. http://jster.net/
37. JavaScriptライブラリを検索できるサイト 細かいカテゴリで分類されている 自分のライブラリも登録できる JSter
38. backlift ʴ
39. https://www.backlift.com/
40. Dropboxと連携してWebサービス作れる Backbone.jsのテンプレートも用意 Backbone.jsで使えるRESTfulなAPIも用意 backlift
41. CUI Tools for JavaScript Dev
42. JSHint ʴ
43. http://www.jshint.com/
44. JavaScriptシンタックスチェッカー Webアプリ / CUIで提供 CUIはNode.jsで動作します JSHint
45. JSHint % brew install node % npm install -g jshint % jshint -v jshint v2.1.2
46. 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
47. 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
48. jq ʴ
49. http://stedolan.github.com/jq/
50. JSONプロセッサ JSONの出力結果をクエリで操作 jq
51. % brew install jq % jq --version jq version 1.3 jq
52. % curl https://api.github.com/gists/ public | jq '.' % curl https://api.github.com/gists/ public | jq '.[] .comments_url' jq
53. plato ʴ
54. https://github.com/jsoverson/plato
55. JavaScriptソースコード静的解析 結果をグラフなどでビジュアライズ 作ったものの解析に便利 http://ameblo.jp/ca-1pixel/ entry-11473173453.html plato
56. % npm install -g plato % plato -r -d report src jq
57. Yeoman ʴ
58. http://yeoman.io/
59. Webアプリケーション作成支援ライブラリ Googleの中の人達で開発(Google製ではない) 1.0BETAになってから仕組みが大幅に変更 同種のものはroots、node-front、Brunchなど Yeoman
60. % brew install ruby % gem install compass % npm install -g yo grunt-cli bower % npm search yeoman-generator Yeoman
61. % yo webapp % bower install underscore % grunt % grunt server Yeoman
62. Yeoman 日本語で多分一番Yeomanに関して実務に即した 記事を書いてくださってる、HTML5-WEST.jpの村 岡さんのブログ http://bathtimefish.hatenablog.com/search? q=yeoman
63. Conclusion
64. 最近のJavaScript開発には便利なツールがい っぱい 「不便だな」と思ったらツールを探してみる サイクル作ると生産性UP GitHubのタイムラインなどは有益な情報源 Conclusion
65. Thank you!!
66. http://www.flickr.com/photos/pennuja/ 5364124040/ Photo Credit Thanks