Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

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


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

© 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