Speaker Deckに移行しました https://speakerdeck.com/s2terminal/cognitive-complexity-dekodonofu-za-sawoding-liang-de-niji-ce-siyou

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

2. 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)

3. を 使ってみた

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

5. 使ってみた結果
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/

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

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

8. Cognitive Complexity とは ？
Photo by Shahadat Shemul on Unsplash

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

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

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

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

13. 4 Cyclomatic Complexity 4
1 Cognitive Complexity 7

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

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

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

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

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

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

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

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

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

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

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

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

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

27. 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(ゼロ以上でアラート)で動かしているだけ。

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

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

30. 参考
• 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

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