2014/12/15の勉強会にて発表された資料です。 SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/

2. Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
軽く自己紹介

3. JavaScriptの品質って
どう判断してる？
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

4. A：「俺のコードは神！」
B：「そうか？オレオレコードじゃん」
A：「バカ、これが最高なんだよー！」
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

5. とか、
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

6. 部下：「今月はコードのリファクタ
リング頑張りました！」
上司：「JSの事良く分からないけど、
何がどの位よくなったの？」
部下：「えーっと、あーっと、、、」
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

7. みたいな事ってありませんか？
あなたの頑張りが正当に
評価されないと感じた経験が
ある人もいるかもしれません。
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

8. そこで、ツールを使って
JSコードの品質を
数値化して評価しませんか？
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

9. どんなツール!?
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10. Plato
色々なツールがあるけど、
今回紹介するのは
https://github.com/es-analysis/plato
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

11. JavaScriptコードのソフトウェアメトリクスを計測し、HTMLで
レポートを生成してくれるnode.jsで動くツール
Plato
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

12. ソフトウェアメトリクスとは
ソースコードの品質をさまざまな視点から数値化して定量的に評価
する測定法のこと。
* 成長オーダー（アルゴリズム解析、O記法など参照）
* ソースコードの行数(LoC)
* 循環的複雑度(Cyclomatic Number)
* ファンクションポイント法
* ソースコードの行当たりのバグ数
* コード網羅率
* 顧客要求仕様の行数
* クラスおよびインタフェースの個数
* Robert Cecil Martin のソフトウェアパッケージ測定法
* 凝集度
* 結合度
(Wikipediaより引用)
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

13. Plato
• Maintainability
-> メンテナンス性
• Lines of code
-> ソースコードの行数(LoC)
• Estimated errors in implementation
-> 見積もりエラー数
• Lint errors
-> JSHintエラー数
Platoが出せるのは
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

14. Maintainability -メンテナンス性
計算式
Maintainability Index = MAX(0,(171 - 5.2 * ln(Halstead Volume) - 0.23 *
(Cyclomatic Complexity) - 16.2 * ln(Lines of Code))*100 / 171)
• サイクロマティック複雑度
制御フローの数から算出されるコードの構造上の複雑さ。（if文等の多さ）
• コード行
コードの行数
• Halstead Volume
ソースコード中の演算子と非演算子の種類数、出現回数の総和から算出
上記を使って、0から100で表す係数。
（数値が高いほうがメンテナンスしやすい）
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

15. 何個か試しに
チェックしてみました
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

16. jQuery
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

17. Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

18. Backbone.js
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

19. Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20. 使ってみた感想
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

21. ■判断できる
・見通しがいい
・わかりやすい
・書き方がきれい
■判断できない
・セキュリティへの配慮
・効率の良いロジックか？
JsHintで！
Jasmine等で！
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

22. Platoの使い方
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

23. 1. Node.js をインストール
http://nodejs.org/
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

24. 2. PlatoとJSHint をインストール
Windows なら、コマンドプロンプト
Macならターミナルで以下を入力
$ npm install -g plato
$ npm install -g jshint
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

25. 3. Platoを実行
$ plato -r -d plato-report develop
対象ディレクトリで上記を実行すると、
「develop」ディレクトリの中身をチェックして
「plato-report」に結果のHTMLを出力
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

26. ＼(＾▽＾)／
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

27. 黒い画面苦手。
コマンド打つの面倒。
そんな人は
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

28. @echo off
rem
rem Platoを実行し、reportディレクトリに出力する
rem
rem このバッチが存在するフォルダをカレントに
pushd %0¥..
cls
echo "完了したら自動でウィンドウが閉じます。数秒お待
ちください。"
plato -r -l .jshintrc -x vendor -d plato-report develop
pause
exit
test.bat
ダブルクリック
するだけで実行
テキストエディタで、以下を「○○.bat」と保存し、
対象ディレクトリで実行すると、全自動で結果を出力
（windowsに限る）
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29. デモ
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

30. または、gruntやgulp等の
タスクランナーに組み込んでみて
Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

31. ご清聴ありがとうございました！