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

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

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

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

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

<a>タグ <button>タグ

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

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

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

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

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

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

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

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

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

Tech Leverages PRO

More Decks by Tech Leverages

Other Decks in Technology

Featured

Transcript