Feature Flag 自動お掃除のための TypeScript プログラム変換

Slide 1

Slide 1 text

1 Feature Flag 自動お掃除のための TypeScript プログラム変換 🧹 TSKaigi 2025 株式会社メルカリ @azrsh

Slide 2

Slide 2 text

2 株式会社メルカリで Web 寄りの Platform Engineering をやっている @azrsh

Slide 3

Slide 3 text

3 TypeScript Compiler API is dead ● What is the API story for this new codebase? · microsoft/typescript-go · Discussion #455 ● Scaffold IPC-based API by andrewbranch · Pull Request #711 · microsoft/typescript-go

Slide 4

Slide 4 text

4 Agenda 01 Feature Flag の課題 02 お掃除を自動化する 03 まとめ 04 Q&A

Slide 5

Slide 5 text

5 Feature Flag の課題

Slide 6

Slide 6 text

6 機能を on/off するためのアプリケーションの実行時に評価されるフラグを用い、アプリケーションのデプロイと機能のリリースを分離する手法 - Feature ﬂags - Trunk Based Development Feature Flag は便利🤩

Slide 7

Slide 7 text

7 アプリケーションの実行時に評価される機能を on/off するためのフラグを用い、アプリケーションのデプロイと機能のリリースを分離する手法 - Feature ﬂags - Trunk Based Development 便利ポイント - timing sensitive なリリース - デプロイ担当者とリリース担当者の分離 - ユーザ単位で feature ﬂag の値を制御することで A/B テスト Feature Flag は便利🤩

Slide 8

Slide 8 text

8 クライアントの実装

Slide 9

Slide 9 text

9 Feature Flag のライフサイクル

Slide 10

Slide 10 text

10 Feature Flag はしんどい 😣 「機能を on/off するためのフラグ」

Slide 11

Slide 11 text

11 Feature Flag のライフサイクル

Slide 12

Slide 12 text

12 Feature Flag はしんどい 😣 誰もクリーンアップに興味ない

Slide 13

Slide 13 text

13 Tech Debt - pitfall Flags get put into codebases over time and often get forgotten as development teams pivot towards new business deliverables. (中略) the application works just ﬁne with the toggle left in place, and the business only really cares about new priorities. (後略) - Feature ﬂags - Trunk Based Development Feature Flag はしんどい 😣

Slide 14

Slide 14 text

14 Feature Flag はしんどい 😣

Slide 15

Slide 15 text

15 お掃除を自動化する

Slide 16

Slide 16 text

16 アイデア特定のシグネチャの式を定数とみなし定数伝播しデッドコードを除去する

Slide 17

Slide 17 text

17 アイデア特定のシグネチャの式を定数とみなし定数伝播しデッドコードを除去する自社の Feature Flag システムのクライアントライブラリを使っているのでシグネチャがわかる！

Slide 18

Slide 18 text

18 アイデア特定のシグネチャの式を定数とみなし定数伝播しデッドコードを除去するいわゆる疎な条件分岐を考慮した定数伝播 (sparse conditional constant propagation)

Slide 19

Slide 19 text

19 武器 TypeScript Compiler API - Using the Compiler API · microsoft/TypeScript Wiki - tsc の基本的な機能や構文木のデータ構造を提供する API TypeScript Language Service API - Using the Language Service API · microsoft/TypeScript Wiki - リッチなエディタに必要な情報や操作を提供する API ts-morph - ts-morph - Documentation - 上ふたつの API をラップしてプログラムから構文木を操作しやすくする薄いライブラリ

Slide 20

Slide 20 text

20 アイデア特定のシグネチャの式を定数とみなし定数伝播しデッドコードを除去する

Slide 21

Slide 21 text

21 特定のシグネチャの式

Slide 22

Slide 22 text

22 特定のシグネチャの式

Slide 23

Slide 23 text

23 構文木

Slide 24

Slide 24 text

24 構文木

Slide 25

Slide 25 text

25 参照の抽出

Slide 26

Slide 26 text

26 構文木

Slide 27

Slide 27 text

27 構文木のパターンマッチ

Slide 28

Slide 28 text

28 定数を伝播していく

Slide 29

Slide 29 text

29 変数の除去

Slide 30

Slide 30 text

30 変数の除去

Slide 31

Slide 31 text

31 条件分岐

Slide 32

Slide 32 text

32 条件分岐

Slide 33

Slide 33 text

33 デッドコード除去アプリケーションコードは良さそう

Slide 34

Slide 34 text

34 デッドコード除去ユニットテストは？

Slide 35

Slide 35 text

35 ユニットテストの除去

Slide 36

Slide 36 text

36 mock された値と同じ値に安定化した場合

Slide 37

Slide 37 text

37 mock された値と同じ値に安定化した場合

Slide 38

Slide 38 text

38 mock された値と異なる値に安定化した場合

Slide 39

Slide 39 text

39 mock された値と同じ値に安定化した場合

Slide 40

Slide 40 text

40 mock された値と同じ値に安定化した場合

Slide 41

Slide 41 text

41 mockFeatureFlag を除去すれば良いユニットテストの除去 mock された値と同じ値に安定化した場合 mock された値と異なる値に安定化した場合 mockFeatureFlag を除去すると feature ﬂag の値がテストが期待する値とずれてテストが落ちる！

Slide 42

Slide 42 text

42 mock された値と異なる値に安定化した場合

Slide 43

Slide 43 text

43 mock された値と異なる値に安定化した場合

Slide 44

Slide 44 text

44 mock された値と異なる値に安定化した場合 ☺

Slide 45

Slide 45 text

45 効果 174 ﬁles changed, 52 insertions(+), 862 deletions(-) メルカリの C2C マーケットプレイス約 4000 行のコードベースに対して

Slide 46

Slide 46 text

46 関数の境界を超えたデッドコード削除 - 関数の境界には何らかの設計意図があるはず - デッドコード除去により定数を返すだけの関数ができた時、関数を除去して良いか？副作用のある式の削除 - 一見して削除できそうな式があっても、副作用があるかもしれない - 特に関数呼び出しデッドコード除去の限界

Slide 47

Slide 47 text

47 まとめ

Slide 48

Slide 48 text

48 まとめ Feature Flag はデリバリする価値のスループットを上げるために必要不可欠な手法だがしんどいソースコードに現れるしんどさはデッドコード除去で緩和できる新たにヒントを与えることで除去できるコードは拡張できるが、やはり限界もあるプログラム変換を通じてコンパイラと触れ合うのは楽しい

Slide 49

Slide 49 text

49 Q&A