JavaScript Development Tools

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

JavaScript Development Tools JavaScript開発の効率アップ平木聡 / id:Layzie CyberAgent,Inc. Frontrend（フロントレンド） Vol.4 powered by CyberAgent

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

http://layzie.hatenablog.com/

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

https://github.com/enja-oss

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Agenda

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

GUI Tools for JavaScript Dev

Slide 12

Slide 12 text

Chrome Developer Tool ʴ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Chrome Developer Tool ⌘+Option+I DevTool起動 ⌘+O js/cssファイル選択 ⌘+Shift+O js関数選択 ⌘+L 指定行移動 ⌘+Option+F js全体の検索ショートカットを覚えると効率UP

Slide 15

Slide 15 text

Chrome Developer Tool JavaScriptを書いてて上手く動かない… そんな時はデバッグが必要です Chrome Developer Toolは複数の方法でデバッグできます

Slide 16

Slide 16 text

Click! Break Point

Slide 17

Slide 17 text

Break Point Stop! Control!

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Timeline

Slide 21

Slide 21 text

Profile

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

chrome://net-internals/

Slide 24

Slide 24 text

Charles ʴ

Slide 25

Slide 25 text

http://www.charlesproxy.com/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

MapLocal

Slide 28

Slide 28 text

Throttle

Slide 29

Slide 29 text

DocHub ʴ

Slide 30

Slide 30 text

http://dochub.io/#css/

Slide 31

Slide 31 text

jsFiddle ʴ

Slide 32

Slide 32 text

http://jsfiddle.net/

Slide 33

Slide 33 text

jsPerf ʴ

Slide 34

Slide 34 text

http://jsperf.com/

Slide 35

Slide 35 text

Setup

Slide 36

Slide 36 text

Test

Slide 37

Slide 37 text

Result

Slide 38

Slide 38 text

Revisions

Slide 39

Slide 39 text

browserling ʴ

Slide 40

Slide 40 text

https://browserling.com/

Slide 41

Slide 41 text

Browser Test

Slide 42

Slide 42 text

CUI Tools for JavaScript Dev

Slide 43

Slide 43 text

JSHint ʴ

Slide 44

Slide 44 text

http://www.jshint.com/

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

JSHint % brew install node % npm install -g jshint % jshint -v 0.9.1

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

jq ʴ

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

% brew install jq % jq --version jq version 1.1 jq

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Doctor JS ʴ

Slide 55

Slide 55 text

http://doctorjs.org/

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Yeoman ʴ

Slide 59

Slide 59 text

http://yeoman.io/

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

% yeoman init % yeoman build % yeoman server % yeoman test % yeoman install % yeoman uninstall % yeoman update % yeoman list % yeoman search % yeoman lookup Yeoman

Slide 63

Slide 63 text

Web App (default) AngularJS Backbone BBB (Backbone Boilerplate) Chrome Apps Basic Boilerplate Ember Jasmine Mocha Testacular Yeoman

Slide 64

Slide 64 text

Conclusion

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Thank you!!

Slide 67

Slide 67 text

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