SOLID から考える良いコンポーネントの設計原則というスライド

SOLID から考える良いコンポーネントの設計原則 - Speaker Deck

読んだ。

SOLID、名前は知ってるし効いたことあるけどどんなやつかは正直全然分かってなかったのでこのスライドで概要が知れてよかった。

自分のためにメモっておくと、

• S: 単一責任の原則(SRP)
• O: オープン・クローズドの原則(OCP)
• L: リスコフの置換原則(LSP)
• I: インターフェイス分離の原則(ISP)
• D: 依存関係逆転の原則(DIP)

こう見ると S しか知らなかったなとなった。

SOLID は「変更に強い/理解しやすい/再利用しやすいコードを作るための設計原則」ということで、オブジェクト指向のための原理原則だけど React コンポーネントの設計にも応用できるとのこと。Vue にもできるかな〜できないかな〜。

単一責任の原則

「モジュールを変更する理由はたった一つであるべきである」

言葉だけ見るとぱっとは分からないけど、スライドにある画像がめちゃくちゃわかりやすかった。

ぱっと見たらひとつのコンポーネントで済ませそうな感じだなと思っても、役割がそれぞれあるので役割ごとにコンポーネントがある。あとレイアウトもコンポーネントになってるのが面白かった。こういうやり方もできるのか。

React だとこういう感じでできるけど、Vue だと……slot を多用しないといけなくなる気がして真似はできないなと感じた。

オープン・クローズドの原則

「既存のコードを変更せず、新たにコードを追加するだけで振る舞いを変更できるようにすべき」

これも言葉だけ見てもすぐには理解できない感じだった。

そしてこれもスライドを見たらわかりやすくて、props を React.ReactNode 型にすることで拡張性が上がる。たしかにな〜。

React.ReactNode 型を受け取るようにすることで、新たにコード(JSX とか TSX の見た目の部分)を追加すれば、それがそのまま props として追加で流れてくるので、拡張が簡単。

単一責任の原則のほうでも書いたけど、Vue だとこれできないなあ。

まとめ

SOLID、名前しか知らなかった。クリーンアーキテクチャ本を積んでいるので早く読まなければ。