JSの品質 #scripty02

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

軽く自己紹介

JavaScriptの品質って

どう判断してる？


A：「俺のコードは神！」 B：「そうか？オレオレコードじゃん」 A：「バカ、これが最高なんだよー！」


とか、


部下：「今月はコードのリファクタリング頑張りました！」上司：「JSの事良く分からないけど、何がどの位よくなったの？」部下：「えーっと、あーっと、、、」


みたいな事ってありませんか？

あなたの頑張りが正当に評価されないと感じた経験がある人もいるかもしれません。


そこで、ツールを使って JSコードの品質を

数値化して評価しませんか？


どんなツール!?


Plato

色々なツールがあるけど、今回紹介するのは

https://github.com/es-analysis/plato Copyright (C) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

https://github.com/es-analysis/plato



JavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるnode.jsで動くツール

Plato


ソフトウェアメトリクスとは

ソースコードの品質をさまざまな視点から数値化して定量的に評価する測定法のこと。

* 成長オーダー（アルゴリズム解析、O記法など参照） * ソースコードの行数(LoC)

* 循環的複雑度(Cyclomatic Number)

* ファンクションポイント法

* ソースコードの行当たりのバグ数

* コード網羅率

* 顧客要求仕様の行数

* クラスおよびインタフェースの個数

* Robert Cecil Martin のソフトウェアパッケージ測定法

* 凝集度

* 結合度

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

Plato

• Maintainability -> メンテナンス性

• Lines of code -> ソースコードの行数(LoC)

• Estimated errors in implementation -> 見積もりエラー数

• Lint errors -> JSHintエラー数

Platoが出せるのは


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で表す係数。

（数値が高いほうがメンテナンスしやすい）


何個か試しにチェックしてみました


jQuery



Backbone.js



使ってみた感想


■判断できる・見通しがいい・わかりやすい・書き方がきれい ■判断できない・セキュリティへの配慮・効率の良いロジックか？

JsHintで！

Jasmine等で！


Platoの使い方


1. Node.js をインストール http://nodejs.org/


http://nodejs.org/

2. PlatoとJSHint をインストール

Windows なら、コマンドプロンプト Macならターミナルで以下を入力

$ npm install -g plato $ npm install -g jshint


3. Platoを実行

$ plato -r -d plato-report develop

対象ディレクトリで上記を実行すると、「develop」ディレクトリの中身をチェックして「plato-report」に結果のHTMLを出力


＼(＾▽＾)／


黒い画面苦手。コマンド打つの面倒。

そんな人は


@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. 無断引用・転載禁止

デモ


または、gruntやgulp等のタスクランナーに組み込んでみて


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

Technology

JSの品質 #scripty02