品質と向き合うための第一歩 #LINEヤフー福岡

品質と向き合うための第⼀歩 ヤフー株式会社 ショッピング統括本部 濱村甚平 ©2021 Yahoo Japan Corporation All rights reserved.

⾃⼰紹介 濱村 甚平 @jinpeih ・⻑崎県五島列島出⾝ ・2017/10 ヤフー中途⼊社 ・福岡開発拠点⽴ち上げ ・Yahoo!ショッピング 出店者向け機能開発 ・2020/02 ~ 基本リモート ・1年間で出社回数6回 在宅環境整備にハマってます ©2021 Yahoo Japan Corporation All rights reserved. 2

もうすぐヤフーの福岡拠点は引っ越し(統合)します︕ ■⼈数 博多駅 エンジニア・営業など総勢200名ほど ■エンジニア LINE Fukuoka ヤフー コマースからメディア、テクノロジー系まで 80名ほど ■場所 LINE Fukuokaのすぐ近く︕ ©2021 Yahoo Japan Corporation All rights reserved. 3

今⽇話すこと 品質と向き合っていった過程 ©2021 Yahoo Japan Corporation All rights reserved. 4

品質とは︖🤔 ©2021 Yahoo Japan Corporation All rights reserved. 5

今回着⽬する品質の定義 外部品質 内部品質 楽で早く安全に開発できるか ©2021 Yahoo Japan Corporation All rights reserved. 6

今回着⽬する品質の定義 外部品質 内部品質 楽で早く安全に開発できるか → 安定して早くユーザに価値を届け続ける ©2021 Yahoo Japan Corporation All rights reserved. 7

ヤフーでの仕事経歴 Yahoo!ウォレット決済サービス ↓ Yahoo!ショッピング ストア向け管理ツール ↓ Yahoo!ショッピング 広告管理BE ↓ ・・・ ©2021 Yahoo Japan Corporation All rights reserved. 8

ヤフーでの仕事経歴 Yahoo!ウォレット決済サービス ↓ キャッチアップが⼤変・・・ Yahoo!ショッピング ストア向け管理ツール ↓ Yahoo!ショッピング 広告管理BE ↓ ・・・ ©2021 Yahoo Japan Corporation All rights reserved. 9

なにがキャッチアップを妨げているのか ©2021 Yahoo Japan Corporation All rights reserved. 10

なにがキャッチアップを妨げているのか ドキュメント不⾜ 業務知識不⾜ ©2021 Yahoo Japan Corporation All rights reserved. コードがむずかしい 11

なにがキャッチアップを妨げているのか ドキュメント不⾜ 業務知識不⾜ ©2021 Yahoo Japan Corporation All rights reserved. コードがむずかしい 12

なにがキャッチアップを妨げているのか ドキュメント不⾜ 業務知識不⾜ ©2021 Yahoo Japan Corporation All rights reserved. コードがむずかしい 13

なにがキャッチアップを妨げているのか ドキュメント不⾜ 業務知識不⾜ コードがむずかしい 必要なものが(理想状態と⽐べて)⾜りていない ©2021 Yahoo Japan Corporation All rights reserved. 14

なにがキャッチアップを妨げているのか ︖ ドキュメント不⾜ 業務知識不⾜ 必要なものが(理想状態と⽐べて)⾜りていない ©2021 Yahoo Japan Corporation All rights reserved. コードがむずかしい 現状・理想・⽅法がわからない 15

“コードがむずかしい”︖ = 意図が理解できない ・コード⻑いネスト深い ・継ぎ接ぎだらけ ・頻繁に不具合が起きている (テストコードの信頼性・・・︖) ©2021 Yahoo Japan Corporation All rights reserved. 16

“コードがむずかしい”︖ = 意図が理解できない ・コード⻑いネスト深い ・継ぎ接ぎだらけ ・頻繁に不具合が起きている (テストコードの信頼性・・・︖) 楽で早く安全に開発できない 品質の保たれていないコードが⽣産性を妨げている ©2021 Yahoo Japan Corporation All rights reserved. 17

“コードがむずかしい” は伝わるか︖ どれぐらいやばい？ 当たり前だと思ってました 他にも大変なサービスあるんだけど じゃあ直してください 本当にまずいのか スキル不足なのかわからない ©2021 Yahoo Japan Corporation All rights reserved. 18

“コードがむずかしい” は伝わるか︖ どれぐらいやばい？ 当たり前だと思ってました 他にも大変なサービスあるんだけど じゃあ直してください 本当にまずいのか スキル不足なのかわからない コードのむずかしさや複雑さを 感覚で共有するのは難しい ©2021 Yahoo Japan Corporation All rights reserved. 19

“コードがむずかしい” は伝わるか︖ コードのむずかしさや複雑さを 感覚で共有するのは難しい 可視化・定量化 感覚ではなく定量的に 共有、評価できるようにしたい ©2021 Yahoo Japan Corporation All rights reserved. 20

“コードがむずかしい” は伝わるか︖ コードのむずかしさや複雑さを 感覚で共有するのは難しい 可視化・定量化 感覚ではなく定量的に 共有、評価できるようにしたい 現状から前進するための⽅向性を与えたい ©2021 Yahoo Japan Corporation All rights reserved. 21

コードのむずかしさを可視化する ©2021 Yahoo Japan Corporation All rights reserved. 22

社内の事例・仕組みを探す 社内で⽣産性に関するデータが⽉次で集計されている - デプロイ数推移 - ChangeLeadTime(開発開始からデプロイまでの時間) - SonarQubeによるコードの静的分析 ©2021 Yahoo Japan Corporation All rights reserved. 23

社内の事例・仕組みを探す 社内で⽣産性に関するデータが⽉次で集計されている - デプロイ数推移 - ChangeLeadTime(開発開始からデプロイまでの時間) - SonarQubeによるコードの静的分析 多くのサービスの記録があり ⾃社内での⽐較が容易 ©2021 Yahoo Japan Corporation All rights reserved. 24

社内の事例・仕組みを探す 社内で⽣産性に関するデータが⽉次で集計されている - デプロイ数推移 - ChangeLeadTime(開発開始からデプロイまでの時間) - SonarQubeによるコードの静的分析 多くのサービスの記録があり ⾃社内での⽐較が容易 ©2021 Yahoo Japan Corporation All rights reserved. 25

SonarQubeとは コードの品質を静的分析するOSS 下記のような項⽬を分析できる ・技術的負債 ・バグ ・脆弱性 ・コードの複雑性 など ©2021 Yahoo Japan Corporation All rights reserved. 26

静的分析の指標候補 Cyclomatic Complexity(循環的複雑度) Cognitive Complexity(認知複雑性) ロジックを担保するのに 直感的なコードの理解しにくさ 必要なテストケース数 (ネストなど) Code Smells(コードの匂い) その他 後々負債になる可能性のあるコード ⾏数、ファイル数、脆弱性など ©2021 Yahoo Japan Corporation All rights reserved. 27

静的分析の指標候補 Cyclomatic Complexity(循環的複雑度) Cognitive Complexity(認知複雑性) ロジックを担保するのに 直感的なコードの理解しにくさ 必要なテストケース数 (ネストなど) Code Smells(コードの匂い) その他 後々負債になる可能性のあるコード ⾏数、ファイル数、脆弱性など ©2021 Yahoo Japan Corporation All rights reserved. 28

どちらも機能的には同じ複雑度 循環的複雑度︓4 循環的複雑度︓4 ©2021 Yahoo Japan Corporation All rights reserved. 29

どちらも機能的には同じ複雑度だが、右の⽅が理解するのが難しい 循環的複雑度︓4 循環的複雑度︓4 認知複雑度︓1 認知複雑度︓7 ©2021 Yahoo Japan Corporation All rights reserved. 30

どちらも機能的には同じ複雑度だが、右の⽅が理解するのが難しい // ＋１ // ＋１ // ＋2(1+1) // ＋3(1+2) // ＋1 循環的複雑度︓4 循環的複雑度︓4 認知複雑度︓1 認知複雑度︓7 ©2021 Yahoo Japan Corporation All rights reserved. 31

静的分析の指標候補 Cyclomatic Complexity(循環的複雑度) Cognitive Complexity(認知複雑性) ロジックを担保するのに 直感的なコードの理解しにくさ 必要なテストケース数 (ネストなど) Code Smells(コードの匂い) その他 後々負債になる可能性のあるコード ⾏数、ファイル数、脆弱性など まずは理解しやすいコードを⽬指す ©2021 Yahoo Japan Corporation All rights reserved. 32

実際に集計・⽐較してみた ©2021 Yahoo Japan Corporation All rights reserved. 33

リポジトリ単位の認知複雑度ヒストグラム リ ポ ジ ト リ 数 複雑度 ©2021 Yahoo Japan Corporation All rights reserved. 34

関わったリポジトリをプロットしてみる リ ポ ジ ト リ 数 複雑度 ©2021 Yahoo Japan Corporation All rights reserved. 35

刷新状況で⽐較する ヤフーには歴史が⻑いサービスもたくさんある ここ数年で多くのサービスが脱レガシーのために刷新されている 刷新前後でソースの歴史の桁が違うので、分離して⽐較する 10年以上経つ レガシーコード フルスクラッチ 刷新したコード ©2021 Yahoo Japan Corporation All rights reserved. 36

刷新状況で⽐較する レガシーなリポジトリ 10年以上続くサービスのコード if⽂の中が500⾏ぐらいあったりする 秘伝のソース (読み解くにはかなりの熟練度が必要) 刷新した脱レガシーリポジトリ レガシーコードをフルスクラッチで刷新 まだ歴史は1, 2年ぐらい ソースを読めば仕様がわかる(はず) ©2021 Yahoo Japan Corporation All rights reserved. 37

刷新状況で⽐較する レガシーなリポジトリ 10年以上続くサービスのコード if⽂の中が500⾏ぐらいあったりする 秘伝のソース (読み解くにはかなりの熟練度が必要) 刷新した脱レガシーリポジトリ 気になる🤔 レガシーコードをフルスクラッチで刷新 まだ歴史は1, 2年ぐらい ソースを読めば仕様がわかる(はず) ©2021 Yahoo Japan Corporation All rights reserved. 38

刷新後のリポジトリだけで⽐較する 最⼩限の責務を持つ APIリポジトリ 2つの責務(画⾯)を持つ FEリポジトリ ©2021 Yahoo Japan Corporation All rights reserved. 複数の責務を持つ モノリスリポジトリ 39

刷新後のリポジトリだけで⽐較する 最⼩限の責務を持つ APIリポジトリ 2つの責務(画⾯)を持つ FEリポジトリ 複数の責務を持つ モノリスリポジトリ ※今回はマイクロサービスやモノリスの是⾮には着⽬しない → リポジトリの合計複雑度が⾼いからといって コードが本当に複雑とは限らない → 複雑度の⾼さの内訳を⾒ていく ©2021 Yahoo Japan Corporation All rights reserved. 40

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) A: 合計複雑度81 B: 合計複雑度263 ©2021 Yahoo Japan Corporation All rights reserved. C: 合計複雑度1161 41

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) A: 合計複雑度81 B: 合計複雑度263 ©2021 Yahoo Japan Corporation All rights reserved. C: 合計複雑度1161 42

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) A: 合計複雑度81 B: 合計複雑度263 C: 合計複雑度1161 SonarLintでの 警告しきい値は 複雑度15 ※⾯積には着⽬しない ©2021 Yahoo Japan Corporation All rights reserved. 43

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) A: 合計複雑度81 合計複雑度XXX ©2021 Yahoo Japan Corporation All rights reserved. C: 合計複雑度1161 44

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) ©2021 Yahoo Japan Corporation All rights reserved. 45

刷新後のリポジトリだけで⽐較する(内訳に着⽬する) ※⾯積には着⽬しない ©2021 Yahoo Japan Corporation All rights reserved. 46

認知複雑度の⾼いコード ・分岐・ループが多い ・ネストが深い ・⾏数が多い 詳細に知りたい⽅はこちら COGNITIVE COMPLEXITY - A new way of measuring understandability - G. Ann Campbell ©2021 Yahoo Japan Corporation All rights reserved. 47

認知複雑度の⾼いコード +1 +1 +1 +1 +1 +２ +３ ・分岐・ループが多い ・ネストが深い ・⾏数が多い +1 詳細に知りたい⽅はこちら COGNITIVE COMPLEXITY - A new way of measuring understandability - G. Ann Campbell ©2021 Yahoo Japan Corporation All rights reserved. 48

なぜこのようなことが起こるのか 共通認識、”よいコード”の指針がない - レガシーコードを担当していたエンジニアのスキル・マインドチェンジが必要 スケジュール優先 - ユーザに価値を届けないと意味がないのである程度は仕⽅ない “継続して素早く価値を届ける”ために 保守性・品質に⽬を向ける必要がある ©2021 Yahoo Japan Corporation All rights reserved. 49

定量化したあとはどうするのか ©2021 Yahoo Japan Corporation All rights reserved. 50

複雑なコードをどうするのか リファクタをする︖ → また同じことの繰り返しになってしまう可能性がある 複雑なのでリファクタのリスクも⾼め ©2021 Yahoo Japan Corporation All rights reserved. 51

複雑なコードをどうするのか リファクタをする︖ → また同じことの繰り返しになってしまう可能性がある 複雑なのでリファクタのリスクも⾼め エンジニアのスキルアップと品質と向き合う⽂化を作り レガシー化させない体制を整える ©2021 Yahoo Japan Corporation All rights reserved. 52

これからのアプローチ 1. 学びの機会を作る 2. 点検する 3. (最⼩限の)改善をする ©2021 Yahoo Japan Corporation All rights reserved. 53

アプローチ︓学びの機会を作る ・定量化されたコードをモブリーディングする ・どうして読みにくいのか、どう書くべきなのか ・設計を学ぶ ・定量的な数値が全てではない、そもそもの設計を学ぶ ・アーキテクチャ、設計、レガシー、リファクタに関する書籍 ・輪読会や発表形式だとハードルが上がる ・事前準備不要な読書会・⾳読会はおすすめ ©2021 Yahoo Japan Corporation All rights reserved. 54

アプローチ︓点検する ・複雑であるが故に既にバグが混⼊している可能性がある ・モブリーディングしながら確認する ・テストコードで仕様が担保されているのか ・改修後どのような動作確認をすべきなのか ©2021 Yahoo Japan Corporation All rights reserved. 55

アプローチ︓(最⼩限の)改善をする ・リファクタするにはリスクとコストが⾒合わない場合もある ・次にコードを読む⼈のために、解説コメントをつける ・モブリーディングしながら、有識者の暗黙知を記録する 理解のしやすさ コメント不要な明確なコード > 複雑なコード(コメントあり) > 複雑なコード(コメントなし) 少しだけ前進させる ©2021 Yahoo Japan Corporation All rights reserved. 56

アプローチ︓(最⼩限の)改善をする ©2021 Yahoo Japan Corporation All rights reserved. 57

アプローチ︓(最⼩限の)改善をする ・リファクタするにはリスクとコストが⾒合わない場合もある ・次にコードを読む⼈のために、解説コメントをつける ・モブリーディングしながら、有識者の暗黙知を記録する 理解のしやすさ コメント不要な明確なコード > 複雑なコード(コメントあり) > 複雑なコード(コメントなし) 少しだけ前進させる ©2021 Yahoo Japan Corporation All rights reserved. 58

品質と向き合うということ “コードがむずかしくて⾟い”という状態から 問題に対して感情ではなく定量的にアプローチすることができはじめた まだ⽬⽴つ成果は得られていないが、⽂化を作って浸透させていきたい 品質と向き合う ＝現状を把握し、どのような状態を⽬指すのかチームで同じ⽅向を向く ©2021 Yahoo Japan Corporation All rights reserved. 59

いきなり品質向上はむずかしい 少しずつ、まずは⼀歩⽬(把握)から 試してみてはいかがでしょうか ©2021 Yahoo Japan Corporation All rights reserved. 60