JSの品質 #scripty02

>100 Views

December 18, 14

#scripty02 #JavaScript #コード品質 #Plato #ソフトウェアメトリクス #Node.js

スライド概要

2014/12/15の勉強会にて発表された資料です。

SCRIPTY#2　～フロントエンド紳士・淑女のための勉強会～
http://scripty.connpass.com/event/10345/

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 159.9K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.4K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.6K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.4K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

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.

Plato JavaScriptコードのソフトウェアメトリクスを計測し、HTMLで レポートを生成してくれるnode.jsで動くツール 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) Plato • Estimated errors in implementation -> 見積もりエラー数 • Lint errors -> JSHintエラー数 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.

テキストエディタで、以下を「○○.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. 無断引用・転載禁止

29.

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

30.

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

31.

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