Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

berlysia
October 17, 2023
32

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

berlysia

October 17, 2023
Tweet

Transcript

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 3. 置き換える単位より内側のテスト

    コンポーネントから呼び出すロジックやユーティリティ類

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide