Compound Pattern紹介

Transcript

1. Compound Patternの紹介 issei1213
2. About me 名前：issei1213（三浦 壱生） 所属会社：合同会社ノマドリ 技術スタック：React / Vue.js / TypeScript / たまにLaravel(PHP) 好きな言語：TypeScript
3. アジェンダ • 背景 • Compound Patternの概要 • ユースケース • メリット・デメリット • 感想
4. Compound Patternの概要 • Reactにおけるコンポーネント設計パターンの一つ • 複数のコンポーネントを組み合わせて、複雑なコンポーネ ント構築する方法
5. ユースケース① お知らせ機能をModalコンポーネントを使って実現している
6. ユースケース② コンポーネント設計 使用コード
7. ユースケース③ 次に、削除確認モーダルをModalコンポーネント を使って実装する
8. ユースケース④ Modalコンポーネント内部で閉じるボタンを実装しているため、propsで切り替えしていく コンポーネント設計 使用コード
9. ユースケース⑤ 改善点 • 表示関連のpropsが増えていく可能性がある ◦ Ex: Modalコンポーネントの中でフッターの内容ま で含めていると、isVisibleFooterみたいなpropsが 作成される可能性がある • オプショナルなpropsが発生するので、デフォルト値を考 慮しないといけない • オプショナルなpropsを作成しない場合、修正箇所が多 くなる。
10. ユースケース⑥ このようなpropsを生やさなくていいように、 Compound Patternと使って実装していきます！
11. ユースケース⑦ Compound Patternを使ったModalコンポーネント
12. ユースケース⑧ Compound Patternを使ったModalコンポーネントの使用例
13. ユースケース⑨ Compound Patternを使ったModalコンポーネントの使用例 解決方法 • 閉じるアイコンを非表示にしたい場合は、 <Modal.CloseButton />のみを削除す ればいい • <Modal.Footer />を削除することで、 フッターなしのモーダルを作成できる。
14. メリット・デメリット メリット • 直感的なコンポーネント • コンポーネントの柔軟性があがる • LocalStateやGlobalStateがコンポーネント内部で完結することができる、使 用する側は意識せずに使用できる デメリット • 子コンポーネントや孫コンポーネントにpropsを渡したい場合、複雑な設計 になる可能性がある ◦ Ex: ▪ 1. React.ChildrenやReact.cloneElementを使う場合 ▪ 2. createContextなどを用いたGlobalStoreを使う場合
15. 感想 • 今回のユースケースで提示したような、コンポーネント間でpropsを共有しな いケースは、積極的に使っていいと思う • コンポーネント間でprops渡しが発生する場合は、実装方法が主に２パター ンがあるので、チーム内で議論して決めていく必要があると思う。
16. 参考記事 • 【React デザインパターン】Compound Components を使って直感的なコ ンポーネントを実装しよう • Compound Pattern