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

Slide 1

Slide 1 text

JavaScript Development Tools JavaScript開発の効率アップ平木聡 / id:Layzie CyberAgent,Inc. TalkNote Vol.8「TalkNote × Frontrend」

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

http://layzie.hatenablog.com/

Slide 4

Slide 4 text

http://qiita.com/users/Layzie@github

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 開発時には、毎日更新されるChrome Canaryの使用をオススメします https://www.google.co.jp/intl/ja/chrome/ browser/canary.html

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 Developer Tool 実は既に弊社社内勉強会で、吉川徹さんが発表してくれており非常に参考になります。 http://www.slideshare.net/yoshikawa_t/ chrome-devtoolsnext https://vimeo.com/67775750

Slide 23

Slide 23 text

Dash ʴ

Slide 24

Slide 24 text

http://kapeli.com/dash

Slide 25

Slide 25 text

Mac OS X専用のドキュメントビューアデフォルトで色々な言語・ライブラリに対応色々なアプリと連携可能 Dash

Slide 26

Slide 26 text

JS Bin ʴ

Slide 27

Slide 27 text

http://jsbin.com/

Slide 28

Slide 28 text

HTML/CSS/JavaScriptエディタライブラリも多く、SASSやCoffeeScriptも JavaScriptの実行は自動でしてくれる JS Bin

Slide 29

Slide 29 text

jsPerf ʴ

Slide 30

Slide 30 text

http://jsperf.com/

Slide 31

Slide 31 text

Setup

Slide 32

Slide 32 text

Test

Slide 33

Slide 33 text

Result

Slide 34

Slide 34 text

Revisions

Slide 35

Slide 35 text

JSter ʴ

Slide 36

Slide 36 text

http://jster.net/

Slide 37

Slide 37 text

JavaScriptライブラリを検索できるサイト細かいカテゴリで分類されている自分のライブラリも登録できる JSter

Slide 38

Slide 38 text

backlift ʴ

Slide 39

Slide 39 text

https://www.backlift.com/

Slide 40

Slide 40 text

Dropboxと連携してWebサービス作れる Backbone.jsのテンプレートも用意 Backbone.jsで使えるRESTfulなAPIも用意 backlift

Slide 41

Slide 41 text

CUI Tools for JavaScript Dev

Slide 42

Slide 42 text

JSHint ʴ

Slide 43

Slide 43 text

http://www.jshint.com/

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

JSHint % brew install node % npm install -g jshint % jshint -v jshint v2.1.2

Slide 46

Slide 46 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 47

Slide 47 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 48

Slide 48 text

jq ʴ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

JSONプロセッサ JSONの出力結果をクエリで操作 jq

Slide 51

Slide 51 text

% brew install jq % jq --version jq version 1.3 jq

Slide 52

Slide 52 text

% curl https://api.github.com/gists/ public | jq '.' % curl https://api.github.com/gists/ public | jq '.[] .comments_url' jq

Slide 53

Slide 53 text

plato ʴ

Slide 54

Slide 54 text

https://github.com/jsoverson/plato

Slide 55

Slide 55 text

JavaScriptソースコード静的解析結果をグラフなどでビジュアライズ作ったものの解析に便利 http://ameblo.jp/ca-1pixel/ entry-11473173453.html plato

Slide 56

Slide 56 text

% npm install -g plato % plato -r -d report src jq

Slide 57

Slide 57 text

Yeoman ʴ

Slide 58

Slide 58 text

http://yeoman.io/

Slide 59

Slide 59 text

Webアプリケーション作成支援ライブラリ Googleの中の人達で開発(Google製ではない) 1.0BETAになってから仕組みが大幅に変更同種のものはroots、node-front、Brunchなど Yeoman

Slide 60

Slide 60 text

% brew install ruby % gem install compass % npm install -g yo grunt-cli bower % npm search yeoman-generator Yeoman

Slide 61

Slide 61 text

% yo webapp % bower install underscore % grunt % grunt server Yeoman

Slide 62

Slide 62 text

Yeoman 日本語で多分一番Yeomanに関して実務に即した記事を書いてくださってる、HTML5-WEST.jpの村岡さんのブログ http://bathtimefish.hatenablog.com/search? q=yeoman

Slide 63

Slide 63 text

Conclusion

Slide 64

Slide 64 text

最近のJavaScript開発には便利なツールがいっぱい「不便だな」と思ったらツールを探してみるサイクル作ると生産性UP GitHubのタイムラインなどは有益な情報源 Conclusion

Slide 65

Slide 65 text

Thank you!!

Slide 66

Slide 66 text

http://www.flickr.com/photos/pennuja/ 5364124040/ Photo Credit Thanks