Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

More Decks by レバレジーズTechアカウント

Other Decks in Technology

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