Slide 1

Slide 1 text

コードメトリクス計測による課題可視 化と品質確保

Slide 2

Slide 2 text

自己紹介
 森田 勝駿(@texdeath) AI事業本部 AIクリエイティブディビジョン AIタレント事業部 フロントエンドエンジニア ● 2021/08 ~ 中途入社 ● ツール開発を担当

Slide 3

Slide 3 text

コードメトリクス

Slide 4

Slide 4 text

コードメトリクス ● 開発者が開発中のコードをより理解できるようにするソフトウェア の一連の基準 ● 開発チームは潜在的なリスクを特定し、プロジェクトの現在の状態 を把握し、ソフトウェア開発中の進行状況を追跡できる Visual Studio IDE > コードメトリック値より引用 https://learn.microsoft.com/ja-jp/visualstudio/code-quality/code-metrics-values

Slide 5

Slide 5 text

モチベーション ● チームの具体的な品質指標が欲しかった ● まだ未成熟のプロダクトのうちに品質を保証するための道標 が欲しかった ● プロダクトの内在的な不具合の種をあぶり出したかった ● 品質は保証したいが、Linterでガチガチにルールを固めて開 発スピードを落としたくはない

Slide 6

Slide 6 text

技術選定

Slide 7

Slide 7 text

導入を検討したもの ● octocov ○ GitHub Actionsに特化している ■ シンプルだったがカバレッジレポート生成やバッジの表示など、特 定の機能用途にしか使えなさそう ■ ローカル環境で試すのが大変そう ● SonarCube / SonarCloud ○ ダッシュボードがあって分析には活用できそう ○ カスタマイズの敷居が高い ■ 体系的な知識がないと使いこなすのは難しそうだと判断した ■ 初期設定に少し手間がかかった

Slide 8

Slide 8 text

ESLintで解析 ● 導入が手軽だった ○ プロジェクトにもともとESLintを導入していたので、拡張が容易 ● 拡張性が高かった ○ 解析→出力のスクリプトを自前で作るので、よりプロジェクトの環境に 合わせた設定ができた ○ コンフィグの設定次第で柔軟に解析の調整ができるので、落とし所を探 るのにちょうどよかった ● ESLint の complexity を使って循環的複雑度を重点的に計測

Slide 9

Slide 9 text

循環的複雑度 ● =サイクロマティック複雑度として扱う ● コードが複雑になることで、理解や保守が難しくなる度合い ● 関数やメソッド内の分岐やループの数によって決まる指標 ● 高い循環的複雑度はバグのリスクやテストの困難さを増加させる

Slide 10

Slide 10 text

解析方法

Slide 11

Slide 11 text

AST構文解析で判定 ● 計測用の eslintrc ファイルを 作成 ● eslint の静的構文解析を使い json レポートを出力し、そこ から修正すべき箇所を抜き出 すようにした ● リポジトリに JavaScript / TypeScript 以外の言語をあ まり入れたくなかったので Node で作成

Slide 12

Slide 12 text

AST構文解析で判定 作成したJSONレポートから必要なルールを抜き出してまとめる

Slide 13

Slide 13 text

より危険そうな箇所を精査 ● コードスニペットを抜き出したあとにさらに精査する ● 基本的に eslint の plugin で担保できるようなものをチェックする ● ECMA Scriptのルールはプロジェクトのlinterでもチェックしてい るので除外

Slide 14

Slide 14 text

危険度の精査 ● プロジェクトではそこまでeslintを 厳しくしていない ● 精査時には様々なルールを設定した 専用のconfigを使う ● より現場に即した形で使えるように 修正するかどうかはコードの危険度 によって優先度をつける ● 優先度と案件対応状況・対応工数に 応じてチケットを切り対応する

Slide 15

Slide 15 text

現状の悩み

Slide 16

Slide 16 text

MathWorks > 循環的複雑度より引用 https://jp.mathworks.com/discovery/cyclomatic-complexity.html 今の悩み ● 循環複雑度の閾値をどうするか ○ 現在の設定では10以上 ○ 11~29 であってもテストコードなどで担保できるのであれば、開発 スピードを落とすくらいならある程度は許容すべき?

Slide 17

Slide 17 text

今の悩み ● 関数名のわかりやすさはESlintでは拾いきれない ○ ChatGPT API を使いプロンプトに関数名を渡してレビューしても らうのもありかも ○ ただし、そのまま渡すとまずいので名前は汎用化してリクエスト する ○ プロジェクトを特定しうる単語のブラックリストを作成し、その 単語が関数名内部に登場したら置き換えるなど

Slide 18

Slide 18 text

今後考えていること

Slide 19

Slide 19 text

今後考えていること ● 頻繁にレポートに出力されるものをドキュメント化する ○ 一定数ワーニングが出たコンポーネントや関数、ルールに関して は専用のドキュメントを作り、規約化する ● CI に組み込む・パッケージ化 ○ もろもろコストも考えるとあまりやりすぎたくない ● 取り組みを始めたばかりなので成果が出たわけではないが、フロント の環境だけで完結して指標が見えたのは光明

Slide 20

Slide 20 text

EOF