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

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

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

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

7abf6b0f75a5facea016cc58485a4a45?s=128

HIRAKI Satoru

June 24, 2013
Tweet

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