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