DRY原則を誤った結果生まれた技術的負債

DRY原則を誤った結果生まれた技術的負債

Transcript

1. DRY原則を誤った結果
   生まれた技術的負債
   

   View Slide

2. TL;DR
   DRYかどうかの前に単一責務かどうか考えて
   

   View Slide

3. これは本当にあった怖い話です
   

   View Slide

4. teratailにはこんなコンポーネントが存在します
   

   View Slide

5. teratailにはこんなコンポーネントが存在します
   違い、分かりますか？
   

   View Slide

6. タグ タグ
   

   View Slide

7. HTMLタグの種類が違うだけなのに
   同じスタイルを都度定義するの、面倒だな ...
   

   View Slide

8. そうだ！propsにhrefがあるかどうかで
   出し分けるように実装しよう！
   DRY原則の適用だ！
   

   View Slide

9. View Slide

10. View Slide

11. 最初はこれでも問題なかった
    最初だけね...
    

    View Slide

12. - 内部コンポーネントを制御するためのPropsが際限なく追加される
    - 内部で利用しているコンポーネントの機能を制御する必要が出てきた
    - 制御変数が多くなりすぎて内部実装が複雑になる
    - 他のライブラリ（ReactHookForm等）との組み込みがしづらくなる
    - 誰も手をつけられない神ボタンコンポーネントの☆完☆成☆
    生まれた問題点
    

    View Slide

13. View Slide

14. 結局何がいけなかったの？
    - DRY(Don’t Repeat Yourself) 原則の適用を間違えた
    - 似て非なるものを同一視してしまった
    - SRP(Single Responsibility Principle)に違反した
    

    View Slide

15. どうすればよかったの？
    - 各コンポーネントを責務という観点で独立させる
    - タグはHTMLにおいて他のリソースへの参照を示す
    - は文書上のフォームのコントロールや単純なボタンとしての機
    能を提供する
    

    View Slide

16. TL;DR
    DRYかどうかの前に単一責務かどうか考えて
    

    View Slide