Edited at

JSコードの品質チェックをしてくれるgrunt-platoについて紹介するよ

More than 5 years have passed since last update.


grunt-platoとは

platoというツールから、JavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるGruntプラグインです。

https://npmjs.org/package/grunt-plato

https://github.com/jsoverson/grunt-plato


platoとは

上でほとんど書きましたが、platoはJavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるNode製のツールです。

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

platoではjQuery, Grunt, marionetteのレポートをサンプルとして公開してくれてるので、まずはこれらを見て、どのようなものなのか知ってください。

http://es-analysis.github.io/plato/examples/jquery/

http://es-analysis.github.io/plato/examples/grunt/

http://es-analysis.github.io/plato/examples/marionette/

plato report


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

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

LoCやCyclomatic Numberという表現は良く目にすると思いますが、典型的なメトリクスとして下記のものが挙げられています。(Wikipediaより引用)


http://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E6%B8%AC%E5%AE%9A%E6%B3%95

* 成長オーダー(アルゴリズム解析、O記法など参照)

* ソースコードの行数(LoC)

* 循環的複雑度(Cyclomatic Number)

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

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

* コード網羅率

* 顧客要求仕様の行数

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

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

* 凝集度

* 結合度


ソフトウェアメトリクスについては、2005年と古いですがこの記事は読みやすいです。

初めてのソフトウェアメトリクス

http://www.itmedia.co.jp/im/articles/0507/22/news101.html


platoで計測できるメトリクス

infoマークにhoverすると簡易説明が見れて、clickすると各メトリクスの解説ページを見ることができます。

info


導入


インストール

npm installでgrunt-platoをインストールします。package.jsonのdevDependenciesに追加されるように--save-devオプションを忘れずに。

% npm install grunt-plato --save-dev


Gruntfile.js

grunt-plato タスクをロードするように追記し、platoタスクを定義します。

ここではdocs/report/platoディレクトリにplatoレポートを生成するようにしています。

実際には、他にもいろいろなドキュメントやレポートを生成するので階層を分けています。

module.exports = function(grunt) {

grunt.initConfig({
plato: {
options: {
jshint: grunt.file.readJSON('.jshintrc'),
complexity: {
logicalor: true,
switchcase: true,
forin: true,
trycatch: true
}
},
dist: {
files: {
'docs/report/plato': [’src/**/*.js', 'test/**/*.js']
}
}
}
});
grunt.loadNpmTasks(‘grunt-plato');
};


.jshintrc

JSHintによるLintチェックをするので、.jshintrcファイルを定義します。

チェックしない場合はjshint: falseと設定してください。

JSHintのコーディングルール設定はこちらを参照してください。

http://www.jshint.com/docs/options/

{

curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
node: true,
es5: true
}


実行

% grunt plato

プロジェクトのJavaScriptコードについて、下記の例のようなレポートが作られます。

http://es-analysis.github.io/plato/examples/grunt/


まとめ

JavaScriptコードのメトリクスを計測することにより「不吉な匂い」が見える化されてリファクタリングするポイントを明確にできます。

これまで「何となく」リファクタリングしてませんでしたか?

http://www.objectclub.jp/technicaldoc/refactoring/refact-smell

過去の計測結果もグラフに表示されて、時間の経過と共に改善してきたか悪化してきたかが見えて、コードの品質にこれまで以上に気をつけることができると思います。


Tips

Jenkinsのジョブに組み込むときはHTML Publisher Pluginをインストールして、grunt-platoが生成するレポートのHTMLファイルをPublish HTML reportsに指定すると、メンバー間でレポートを一緒に見られて良いと思いますよ。

https://wiki.jenkins-ci.org/display/JENKINS/HTML+Publisher+Plugin


Appendix

Grunt Plugins

http://gruntjs.com/plugins