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

1. © commmune Inc. All rights reserved SOLIDから考える
 良いコンポーネントの設計原則
 1 #ReactLT

2. © commmune Inc. All rights reserved 2 自己紹介
 • 根岸徹也 • コミューン株式会社 副業：2018/11 ~ 2020/11 正社員：2020/12 ~ • フロントエンド + サーバサイド #ReactLT

3. © commmune Inc. All rights reserved 3 SOLIDとは
 #ReactLT

4. © commmune Inc. All rights reserved 4 SOLIDとは
 • 変更に強い・理解しやすい・ 再利用しやすいコードを作るための設計原則 • オブジェクト指向を想定して提唱されたもの ◦ 考え方のコアの部分は普遍的なもの ◦ Reactのコンポーネントを作るときにも適用できる #ReactLT

5. © commmune Inc. All rights reserved 5 5つの原則
 S：単一責任の原則 (SRP) O：オープン・クローズドの原則 (OCP) L：リスコフの置換原則 (LSP) I：インターフェイス分離の原則 (ISP) D：依存関係逆転の原則 (DIP) #ReactLT

6. © commmune Inc. All rights reserved 6 5つの原則
 S：単一責任の原則 (SRP) O：オープン・クローズドの原則 (OCP) L：リスコフの置換原則 (LSP) I：インターフェイス分離の原則 (ISP) D：依存関係逆転の原則 (DIP) #ReactLT

7. © commmune Inc. All rights reserved 7 単一責任の原則
 #ReactLT

8. © commmune Inc. All rights reserved 8 単一責任の原則
 「モジュールを変更する理由はたった1つであるべきである」 #ReactLT

9. © commmune Inc. All rights reserved 9 単一責任の原則
 「モジュールを変更する理由はたった1つであるべきである」 => 役割を意識してコンポーネントを分ける 　 とコンポーネントの変更理由が1つになりやすい #ReactLT

10. © commmune Inc. All rights reserved 10 単一責任の原則(ケーススタディ)
 #ReactLT

11. © commmune Inc. All rights reserved 11 単一責任の原則(ケーススタディ)
 • 円形画像のアイコン -> <CircleImage /> • ユーザ名がボールド体 -> <Text bold /> • ユーザIDがグレーの文字 -> <Text color=“gray” /> • 左に画像アイコン, 右にユーザ情報 を表示 -> <MediaObjectLayout /> #ReactLT

12. © commmune Inc. All rights reserved 12 単一責任の原則(ケーススタディ)
 #ReactLT

13. © commmune Inc. All rights reserved 13 オープン・クローズドの 原則
 #ReactLT

14. © commmune Inc. All rights reserved 14 オープン・クローズドの原則
 「既存のコードを変更せず、新たにコードを追加するだけで振る舞い を変更できるようにするべき」 #ReactLT

15. © commmune Inc. All rights reserved 15 オープン・クローズドの原則
 「既存のコードを変更せず、新たにコードを追加するだけで振る舞い を変更できるようにするべき」 => propsで受け取る値の型をReact.ReactNode 　 にすると既存コードを変更せずに振る舞いを 　 変更しやすい #ReactLT

16. © commmune Inc. All rights reserved 16 オープン・クローズドの原則(ケーススタディ)
 モーダルコンポーネントのpropsを考える #ReactLT

17. © commmune Inc. All rights reserved 17 オープン・クローズドの原則(ケーススタディ)
 #ReactLT

18. © commmune Inc. All rights reserved 18 オープン・クローズドの原則(ケーススタディ)
 タイトルの先頭にアイコンを入れたい 右下にボタンを入 れたい #ReactLT

19. © commmune Inc. All rights reserved 19 オープン・クローズドの原則(ケーススタディ)
 タイトルの先頭にアイコンを入れたい 右下にボタンを入 れたい React.ReactNodeにすると string, numberに加えて `<div>エレメント</div>` を受け取れるようになる #ReactLT

20. © commmune Inc. All rights reserved 20 オープン・クローズドの原則(ケーススタディ)
 propsの型を `React.ReactNode` にするだけで拡張性が 段違いに上がる #ReactLT

21. © commmune Inc. All rights reserved 21 まとめ
 • SOLIDとは変更に強く、理解しやすく、再利用しやすいコードを 作るための設計原則 • 単一責任の原則を守るために 役割を意識してコンポーネントを分ける • オープン・クローズドの原則を守るために React.ReactNode型をpropsに活用すべき #ReactLT

22. © commmune Inc. All rights reserved 22 参考
 • Atomic Design ~堅牢で使いやすいUIを効率良く設計する [技術評論社 (2018/4/25)] ◦ コンポーネント分割のテクニックを学びたい人にオススメ • Clean Architecture　達人に学ぶソフトウェアの構造と設計 [ドワンゴ (2018/8/1)] ◦ SOLIDについて知りたい人向け • 良いコードとは何か - エンジニア新卒研修 スライド公開 (https://note.com/cyberz_cto/n/n26f535d6c575) ◦ SOLIDを守るとなぜ良いコードになるのか背景がよく分かる #ReactLT