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

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

Transcript

1. DRY原則を誤った結果 生まれた技術的負債
2. TL;DR DRYかどうかの前に単一責務かどうか考えて
3. これは本当にあった怖い話です
4. teratailにはこんなコンポーネントが存在します
5. teratailにはこんなコンポーネントが存在します 違い、分かりますか？
6. <a>タグ <button>タグ
7. HTMLタグの種類が違うだけなのに 同じスタイルを都度定義するの、面倒だな ...
8. そうだ！propsにhrefがあるかどうかで 出し分けるように実装しよう！ DRY原則の適用だ！
11. 最初はこれでも問題なかった 最初だけね...
12. - 内部コンポーネントを制御するためのPropsが際限なく追加される - 内部で利用しているコンポーネントの機能を制御する必要が出てきた - 制御変数が多くなりすぎて内部実装が複雑になる - 他のライブラリ（ReactHookForm等）との組み込みがしづらくなる - 誰も手をつけられない神ボタンコンポーネントの☆完☆成☆ 生まれた問題点
14. 結局何がいけなかったの？ - DRY(Don’t Repeat Yourself) 原則の適用を間違えた - 似て非なるものを同一視してしまった - SRP(Single Responsibility Principle)に違反した
15. どうすればよかったの？ - 各コンポーネントを責務という観点で独立させる - <a>タグはHTMLにおいて他のリソースへの参照を示す - <button>は文書上のフォームのコントロールや単純なボタンとしての機 能を提供する
16. TL;DR DRYかどうかの前に単一責務かどうか考えて