JSの品質 #scripty02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• http://nodejs.org/

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

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

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

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

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

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

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

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