Asial Blog

Recruit! Asialで一緒に働きませんか?

JavaScriptのコードを測ろう「plato」

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
こんにちは、中川です。
PHPよりもJavaScriptを書く機会が多いこの頃です。

さて、JavaScriptといえば、何も考えずにアプリを作ると
プロジェクトがカオスになることで有名な言語ですね。
気を使って作っていてもちょっとした油断で、
気付いた時にはメンテナンス不可能なコードが出来上がっていたりします。

今回ご紹介するのは、不幸にもそんな状態になってしまったたくさんのコードの
どこがどのような状況なのかをパッと確認できるツールをご紹介します。

■plato


https://github.com/jsoverson/plato

platoはNode.jsで動作します。
プロジェクトのJSファイルを解析して、
コードの行数や複雑度、メンテナンス性、jshintの警告などをHTMLレポートとしてまとめてくれます。



実際のレポート画面は以下で確認できます。

・jquery ( http://jsoverson.github.io/plato/examples/jquery/ )
・grunt ( http://jsoverson.github.io/plato/examples/grunt/ )
・marionette ( http://jsoverson.github.io/plato/examples/marionette/ )

■インストール / 利用方法



インストール・利用方法も非常に簡単です。
※Node.jsはインストールされているものとします。

  1. $ npm install -g plato
  2. $ plato -r -d report src 

これで、srcディレクトリ内のjsファイルを解析し、reportディレクトリにレポート結果のHTMLが生成されます。report/index.htmlをブラウザで開くとレポートが確認できます。

「--jshint」でjshintのファイルが使用できたり「--exclude」で除外ファイル指定が行えたりします。全てのオプションは「plato --help」 で確認できます。

開発者が普段のコーディング中に適宜確認するのは、
以前「JavaScriptのコーディング規約を気軽にチェック ( http://blog.asial.co.jp/896 ) 」でご紹介しました、
Closure Linter、 Syntasticや 、jshint、jslintなどが使いやすいと思います。

今回ご紹介したplatoについては、
レビューのタイミングなど全体の状況を把握・改善するタイミングで活用できるのではないでしょうか。