20190610 kansai.ts #1 s2terminal / suzuki.sh Twitter@suzukiterminal GitHub@s2terminal Qiita@suzuki_sh Cognitive Complexity で コードの複雑さを定量的に計測しよう

Self Introduction $ man s2terminal NAME: s2terminal or suzuki.sh JOB: Web Application Engineer REGION: Nagoya (5 years), Osaka (2 years) SKILL: PHP, Ruby, Azure, AWS, and TypeScript LOVE: Etrian Odyssey, Ninja Slayer, Puella Magi Madoka Magica (Miki Sayaka), THE IDOLM@STER SHINY COLORS (Kuwayama Chiyuki)

を 使ってみた

Code Climate とは？ • GitHub リポジトリと連携することで、 品質(Quality)や生産性(Velocity)を測定できるサービス • OSSなら、Quality機能は無料で利用可能 • JavaScriptはもちろんTypeScriptにも標準対応

使ってみた結果 https://codeclimate.com/github/s2terminal/i-read-u/issues 拙作のOSS「I Read U」 TypeScript 製 CLIツール $ npm install --global i-read-u 詳しくは: https://s2terminal.github.io/i-read-u/

使ってみた結果 “toCommandSections() メソッドが 29行もあるから、25行以下にしろよ” “1時間あれば直せるだろ” わかる お前誰？

使ってみた結果 “read()メソッドのCognitive Complexityが 8あるから、5以下にしろよ” “45分あれば直せるだろ” わからない お前誰？

Cognitive Complexity とは ？ Photo by Shahadat Shemul on Unsplash

Cognitive Complexity is 何？ Cognitive Complexity (コグニティブ・コンプレクシティー) 訳してみれば「認知的 複雑度」 コードの複雑さを測る指標のひとつ 2016年 SonarSource社が提唱

「Cyclomatic Complexity」と「Cognitive Complexity」 似たものに Cyclomatic Complexity(循環的複雑度) がある • 線形的に独立した経路の数 • 分岐網羅に必要なテストケースの数 約40年前に考案された Cyclomatic Complexity の 問題点を解決するための指標として、 あらたに Cognitive Complexity が考え出された、とのこと

Cyclomatic Complexity Cognitive Complexity サイクロマティック コンプレクシティー コグニティブ コンプレクシティー 循環的 複雑度 認知的 複雑度 1976 年 Thomas McCabe氏が考案 2016 年 SonarSource社が考案 機械的なテストの難しさを測る 人間にとっての理解の難しさを測る

どちらのコードが ”複雑” だと思いますか？

4 Cyclomatic Complexity 4 1 Cognitive Complexity 7

「Cyclomatic Complexity」と「Cognitive Complexity」 • Cyclomatic Complexity は、単純な switch 文で「4」 • switch 文の分岐網羅のためにテストケースが 4 必要になるため • テストケースが増えるので複雑である、という考え方 • Cognitive Complexity は、単純な switch 文では「1」 • switch 文がひとつなので、+1 • 人間が読むには複雑ではない、という考え方 Cognitive Complexity を使うことで、ソースコードの 人間にとっての理解しやすさを定量的に計測できる

Cognitive Complexity の 具体例 Photo by Immo Wegmann on Unsplash

Code is considered more complex for each "break in the linear flow of the code“ 「コードの線形的な流れを乱す」とき、より複雑とみなす

線形的な流れを乱すとき、複雑とみなす Cognitive Complexity: 0 Cognitive Complexity: 1 Cognitive Complexity: 1

線形的な流れを乱すとき、複雑とみなす +1 +1 +1 +1 Cognitive Complexity: 2 Cognitive Complexity: 2

Code is considered more complex when "flow breaking structures are nested" 「線形的な流れを乱すコードが、ネストされている」ようなときは 一層複雑であるとみなす

流れを乱すネストが深いほど、複雑とみなす +1 +2 ( if 1 + nest 1 ) Cognitive Complexity: 3

流れを乱すネストが深いほど、複雑とみなす +1 +2 ( if 1 + nest 1 ) +3 ( if 1 + nest 2 ) Cognitive Complexity: 6

Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one 言語仕様によって提供されているショートハンドで 複数の式をひとつにまとめたようなときは、複雑であるとはみなされない

ショートハンドが使われていれば、複雑とみなさない Cognitive Complexity: 2 Cognitive Complexity: 1

冒頭の指摘の実例 (Cognitive Complexity 8) +1 +2 ( if 1 + nest 1) +1 +1 +3 ( if 1 + nest 2 )

Cognitive Complexity の 使い方 Photo by: https://pixabay.com/images/id-1463929/

Cognitive Complexity を測るには？ • Code Climate を使うことで、Cognitive Complexity など さまざまな指標を測定できる • OSSなら、Quality機能は無料で利用可能

Cognitive Complexity の計測を手軽に試せる環境を作った https://github.com/s2terminal/cognitive-complexity-example git clone して、index.ts 等を適当に編集したのち docker-compose run --rm analyze コマンドを打つと Cognitive Complexity を算出してくれる (※Windows非対応) やっていることは、CodeClimate CLI 版の Docker イメージ持ってきて Cognitive Complexity だけ 許容値-1(ゼロ以上でアラート)で動かしているだけ。

まとめ • Cognitive Complexity の低い、読みやすいコードを書こう • 分岐を減らす • ネストを減らす • ショートハンドを使う • Code Climate で Cognitive Complexity を測定できる • OSSなら無料 • TypeScript にも標準対応 • CLI版もあり、Dockerで動作する

おまけ: NGな使い方 • 「お前のコード Cognitive Complexity 高すぎない？」と 新人にコードレビューしてはいけません • 新人が死にます • 「俺なら45分で直せる」と 新人にコードレビューしてはいけません • 新人が死にます

参考 • Cognitive Complexity - Code Climate • https://docs.codeclimate.com/docs/cognitive-complexity • COGNITIVE COMPLEXITY - A new way of measuring understandability - G. Ann Campbell • https://www.sonarsource.com/docs/CognitiveComplexity.pdf • Cognitive Complexity で、コードの読みやすさを定量的に計測しよう • https://qiita.com/suzuki_sh/items/824c36b8d53dd2f1efcb • 新人プログラマをレビューで殺さない方法 • https://qiita.com/hiraike32/items/32840b11536fa1b78621 • Code Climate • https://codeclimate.com/ • 画像の出典 • https://unsplash.com/photos/qnrJoo2_4EQ • https://unsplash.com/photos/O2MdroNurVw • https://pixabay.com/photos/pasta-spaghetti-food-italian-1463929/#content

Thank you! follow me https://twitter.com/suzukiterminal