Save 37% off PRO during our Black Friday Sale! »

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

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

3d944ac176998af7e7b116993d06cdd1?s=128

Tetsuya Negishi

October 29, 2021
Tweet

Transcript

  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