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