Slide 1

Slide 1 text

Webフロントエンドの リプレイスにおける テストとの付き合い方 @berlysia / 2023-10-17 Offers LT

Slide 2

Slide 2 text

誰 - berlysia (べるりしあ、と読む) - Web、特にブラウザの周りに関心 - 株式会社ドワンゴ所属 教育事業のWebフロント担当 - Webフロントをやる人 - Webフロントのためにいろいろやる人 - 入社7年目、リプレイス7年目

Slide 3

Slide 3 text

ドワンゴの教育事業 (仮称) (設置構想中)

Slide 4

Slide 4 text

全てを書き換え続ける。 N予備校Webフロントエンド実装6年のあゆみ ドワンゴ教育サービス開発者ブログ 私たちにとってリプレイスは日常

Slide 5

Slide 5 text

おことわり - JSConf JP 2021の発表からたくさん引用をしています - 今回のLTとは前提が異なりますが同じような話題を扱います - よくわからなかったらこっちも見てね!

Slide 6

Slide 6 text

お品書き 1. 「リプレイス」はリファクタリング 2. リファクタリングにはリグレッションテストが必要 3. リファクタリングの役に立つのはどんなテスト? 4. リプレイスするときに整っていると嬉しいテスト

Slide 7

Slide 7 text

大きい範囲でもリファクタリング 『レガシーソフトウェア改善ガイド』 曰く: - リファクタリング →コードの構造をメソッドやクラスのレベルで変更する - リアーキテクティング →モジュールやコンポーネントのレベルで行うリファクタリング - リライト →可能な限り高いレベルで行うリファクタリング - ビッグ・リライト - 全てを一気に書き直し、置き換える - インクリメンタルなリライト - 小さい単位でリライト、徐々に置き換える - 進め方によってはリアーキテクティングに限りなく近づく

Slide 8

Slide 8 text

このイベントにおける「リプレイス」 - コンポーネント単位で○○を導入、徐々に全体に広げました →リアーキテクティング的なリライト→リファクタリング - ルーティング・画面単位で○○に置き換えていきました →インクリメンタルなリライト→リファクタリング - 全部一気に書き換えました👊 →ビッグ・リライト→リファクタリング 「リプレイス」とは、おおむねリライトのことと言えそう 少なくともリファクタリングの一種ではありそう

Slide 9

Slide 9 text

「リプレイス」 ⊂ リファクタリング ということにして、今後は「」を外して呼ぶことにする リプレイスにもリファクタリングのお作法が通用するはず! ここでは、『レガシーソフトウェア改善ガイド』の言葉のもとで……

Slide 10

Slide 10 text

リファクタリングに欠かせないものはテスト 『リファクタリング(第2版)』によれば: 「外部から見たときの振る舞いを保」つために、テストが不可欠 リファクタリング(名詞) 外部から見たときの振る舞いを保ちつつ、理解や修正が簡単になるように、ソフトウェアの内部 構造を変化させること。 リファクタリングの第一歩 リファクタリングを行うとき、最初にすることは常に同じです。対象となるコードについてきちんと したテスト群を作り上げることです。テストは不可欠です。(略

Slide 11

Slide 11 text

リファクタリングのときに欲しいテストとは 上述のような変化を起こしたときに次のことを検証するテストが欲しい - 外部から見た振る舞いが維持されているか - 機能的、非機能的を問わず - 他に意図しない問題が起きていないか - 風が吹いてなんとやら リファクタリング(名詞) 外部から見たときの振る舞いを保ちつつ、理解や修正が簡単になるように、ソフトウェアの内部 構造を変化させること。 これは「リグレッションテスト」に該当する でも、これは目的の名前で具体性がない 具体的に役立つテストはどんなものか?

Slide 12

Slide 12 text

私たちはこれからリプレイスをする 旧 旧 外側 外側 新 旧 UI向けライブラリを置き換えるとき、たぶんこんな感じ

Slide 13

Slide 13 text

1. 置き換え対象より外側にかける結合テスト 旧 旧 外側 外側:いま置き換え対象にしていない既存のコンポーネント、ルーター あるいはユーザー受け入れテストのシナリオなど

Slide 14

Slide 14 text

2. 置き換える単位への結合テスト 旧 旧 コンポーネントの単位

Slide 15

Slide 15 text

3. 置き換える単位より内側のテスト 旧 コンポーネントから呼び出すロジックやユーティリティ類

Slide 16

Slide 16 text

4. 置き換える単位へのホワイトボックステスト 旧 モック mswみたいな道具ではなくもっと露骨なやつのイメージ

Slide 17

Slide 17 text

再掲)これをやっていくために 旧 旧 外側 外側 新 旧 UI向けライブラリを置き換えるとき、たぶんこんな感じ

Slide 18

Slide 18 text

どれがリファクタリングの役に立つ?

Slide 19

Slide 19 text

どれがリファクタリングの役に立つ? 🤔

Slide 20

Slide 20 text

どれがリファクタリングの役に立つ? 🤔 置き換える対象より大きい単位への ブラックボックステストが欲しい

Slide 21

Slide 21 text

コンポーネントに対するブラックボックステスト

Slide 22

Slide 22 text

ここまで見てきたこと 1. 「リプレイス」はリファクタリングである 2. リファクタリングにはリグレッションテストが必要である 3. リファクタリングの役に立つのは、 置き換え対象より上位へのブラックボックステストである 4. リプレイスするときに整っていると嬉しいテスト ○ ?

Slide 23

Slide 23 text

テストによって何を得たいか 自信 安心

Slide 24

Slide 24 text

リプレイスを当たり前にするためのテストとの付き合い方 リプレイスにあたる開発者が ガードレール・ガイドラインにするための リグレッションテスト 品質保証段階レベルの 最終的なリグレッションテスト 十分高速で、自動化されていると望ましい ユーザー受け入れテストの項目を使ったもの 自信 安心