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

1.7K Views

March 31, 21

スライド概要

2021年3月30日に開催した、LINE Fukuoka & ヤフー福岡 Developer Meetup #1の登壇資料です。
「サービス品質向上」をテーマに開催されました。

イベントページ URL はこちらです。
https://yahoo-fukuoka.connpass.com/event/205931/

コードがわかりにくく苦労していおり、品質が意識できていなかった状況から
コードの品質を定量的に評価し、チームとして品質と向き合っていった過程をご紹介します。

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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