React_コンポーネントの設計.pdf

Transcript

1. React コンポーネントの設計 株式会社BuySell Technologies 金子 直人
2. • 金子 直人（かねこ なおと） • フロントエンジニア / テックリード • Reactが好き • 趣味は、ソフトテニス、サイクリング、アニメ 自己紹介
3. 複雑度の高いコンポーネントの設計手法に関して、 実例を踏まえて紹介します 今日話すこと
4. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
5. 現代のWebフロントエンドは複雑な操作を求められるようになっている。 • ユーザー操作の複雑化 • 画面状態の複雑化 よって、「画面設計」だけでなく「ソフトウェア設計」が必要である。 背景 参考：WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration of software design in WEB front end
6. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
7. 要件 Google Forms のようなフォームを作る。 要件は、以下の3つを満たすこと。 1. 自由入力の質問ができること 2. 単一選択の質問ができること 3. 複数選択の質問ができること
8. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
9. 設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
10. 設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
11. 設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
12. 設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
13. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
14. コンポーネント分割 画面イメージに対し、枠で区切ってコンポーネントを定義する。 親子関係を明確にするため、同じ階層における枠の色は同じにする。 分割
15. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
16. ツリー図 分割したコンポーネントを、木構造に起こします。 段階を踏むことで、少しずつ抽象化できます。 木構造に する
17. 目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5. ツリー図 6. IF設計
18. IF設計 (前提) IF（インターフェース）の設計は、 View と State と Action の３つに分けて行います。 Stateは使っているライブラリ等に依存するので、前提を以下のように定めます。 1. React Hook Form でフォームのStateを一元管理する 2. FormProviderを用いてStateのバケツリレーは行わない
19. IF設計 (前提) React Hook Form を用いた、View と State と Action の関係性は、 (Reducerはないですが) Fluxと似たような処理の流れで表せます。
20. IF設計 (View) TextQuestionを定義します。 TextQuestion を定義
21. IF設計 (View) RadioQuestionを定義します。 RadioQuestion を定義
22. IF設計 (View) CheckboxQuestionを定義します。 CheckboxQuestion を定義
23. IF設計 (View) QuestionGroupを定義する際に、Questionの出しわけができないことに気づきます。 よって、以下のようなFactoryを定義することにします。
24. IF設計 (View) Factoryパターンを用いることで、以下のようなメリットが得られます。 参考：React.js with Factory Pattern: Building Complex UI With Ease
25. IF設計 (View) QuestionFactoryを定義します。 QuestionFactoryを 定義
26. IF設計 (View) QuestionGroupを定義します。 QuestionGroupを 定義
27. IF設計 (View) SubmitButtonを定義します。 SubmitButton を定義
28. IF設計 (View) ResetButtonを定義します。 ResetButtonを 定義
29. IF設計 (View) Questionnaireを定義します。 Questionnaire を定義
30. IF設計 (State) Questionタイプに応じたStateを定義できるようにします。
31. IF設計 (Action) 最後にActionを考えることで、ViewとActionとState の関係性を示します。
32. まとめ • 複雑度の高いコンポーネントの設計手法に関して、実例を踏まえて紹介しました • 「コンポーネント分割」→「ツリー図」→「IF設計」という流れで設計することで、段階的に設計する 方法を紹介しました。