Webフロントエンドのリプレイスにおけるテストとの付き合い方

Offers様主催経験談から学ぶ　Webフロントエンドリプレイスの進め方LTでLTしたスライドです。（15分のため広義LT）

全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ - ドワンゴ教育サービス開発者ブログ

関連するスライド： Webフロントエンドのリプレースを支えるテストの考え方 / JSConf JP 2021

ドワンゴ教育事業採用サイト

Transcript

1. Webフロントエンドの リプレイスにおける テストとの付き合い方 @berlysia / 2023-10-17 Offers LT
2. 誰 - berlysia （べるりしあ、と読む） - Web、特にブラウザの周りに関心 - 株式会社ドワンゴ所属 教育事業のWebフロント担当 - Webフロントをやる人 - Webフロントのためにいろいろやる人 - 入社7年目、リプレイス7年目
3. ドワンゴの教育事業 (仮称) (設置構想中)
4. 全てを書き換え続ける。 N予備校Webフロントエンド実装6年のあゆみ ドワンゴ教育サービス開発者ブログ 私たちにとってリプレイスは日常
5. おことわり - JSConf JP 2021の発表からたくさん引用をしています - 今回のLTとは前提が異なりますが同じような話題を扱います - よくわからなかったらこっちも見てね！
6. お品書き 1. 「リプレイス」はリファクタリング 2. リファクタリングにはリグレッションテストが必要 3. リファクタリングの役に立つのはどんなテスト？ 4. リプレイスするときに整っていると嬉しいテスト
7. 大きい範囲でもリファクタリング 『レガシーソフトウェア改善ガイド』 曰く： - リファクタリング →コードの構造をメソッドやクラスのレベルで変更する - リアーキテクティング →モジュールやコンポーネントのレベルで行うリファクタリング - リライト →可能な限り高いレベルで行うリファクタリング - ビッグ・リライト - 全てを一気に書き直し、置き換える - インクリメンタルなリライト - 小さい単位でリライト、徐々に置き換える - 進め方によってはリアーキテクティングに限りなく近づく
8. このイベントにおける「リプレイス」 - コンポーネント単位で◦◦を導入、徐々に全体に広げました →リアーキテクティング的なリライト→リファクタリング - ルーティング・画面単位で◦◦に置き換えていきました →インクリメンタルなリライト→リファクタリング - 全部一気に書き換えました👊 →ビッグ・リライト→リファクタリング 「リプレイス」とは、おおむねリライトのことと言えそう 少なくともリファクタリングの一種ではありそう
9. 「リプレイス」 ⊂ リファクタリング ということにして、今後は「」を外して呼ぶことにする リプレイスにもリファクタリングのお作法が通用するはず！ ここでは、『レガシーソフトウェア改善ガイド』の言葉のもとで……
10. リファクタリングに欠かせないものはテスト 『リファクタリング（第2版）』によれば： 「外部から見たときの振る舞いを保」つために、テストが不可欠 リファクタリング（名詞） 外部から見たときの振る舞いを保ちつつ、理解や修正が簡単になるように、ソフトウェアの内部 構造を変化させること。 リファクタリングの第一歩 リファクタリングを行うとき、最初にすることは常に同じです。対象となるコードについてきちんと したテスト群を作り上げることです。テストは不可欠です。（略
11. リファクタリングのときに欲しいテストとは 上述のような変化を起こしたときに次のことを検証するテストが欲しい - 外部から見た振る舞いが維持されているか - 機能的、非機能的を問わず - 他に意図しない問題が起きていないか - 風が吹いてなんとやら リファクタリング（名詞） 外部から見たときの振る舞いを保ちつつ、理解や修正が簡単になるように、ソフトウェアの内部 構造を変化させること。 これは「リグレッションテスト」に該当する でも、これは目的の名前で具体性がない 具体的に役立つテストはどんなものか？
12. 私たちはこれからリプレイスをする 旧 旧 外側 外側 新 旧 UI向けライブラリを置き換えるとき、たぶんこんな感じ
13. 1. 置き換え対象より外側にかける結合テスト 旧 旧 外側 外側：いま置き換え対象にしていない既存のコンポーネント、ルーター あるいはユーザー受け入れテストのシナリオなど
14. 2. 置き換える単位への結合テスト 旧 旧 コンポーネントの単位
15. 3. 置き換える単位より内側のテスト 旧 コンポーネントから呼び出すロジックやユーティリティ類
16. 4. 置き換える単位へのホワイトボックステスト 旧 モック mswみたいな道具ではなくもっと露骨なやつのイメージ
17. 再掲）これをやっていくために 旧 旧 外側 外側 新 旧 UI向けライブラリを置き換えるとき、たぶんこんな感じ
18. どれがリファクタリングの役に立つ？
19. どれがリファクタリングの役に立つ？ 🤔
20. どれがリファクタリングの役に立つ？ 🤔 置き換える対象より大きい単位への ブラックボックステストが欲しい
21. コンポーネントに対するブラックボックステスト
22. ここまで見てきたこと 1. 「リプレイス」はリファクタリングである 2. リファクタリングにはリグレッションテストが必要である 3. リファクタリングの役に立つのは、 置き換え対象より上位へのブラックボックステストである 4. リプレイスするときに整っていると嬉しいテスト ◦ ？
23. テストによって何を得たいか 自信 安心
24. リプレイスを当たり前にするためのテストとの付き合い方 リプレイスにあたる開発者が ガードレール・ガイドラインにするための リグレッションテスト 品質保証段階レベルの 最終的なリグレッションテスト 十分高速で、自動化されていると望ましい ユーザー受け入れテストの項目を使ったもの 自信 安心