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

Transcript

1. React
   コンポーネントの設計
   株式会社BuySell Technologies 金子 直人
   

   View Slide

2. ● 金子 直人（かねこ なおと）
   ● フロントエンジニア / テックリード
   ● Reactが好き
   ● 趣味は、ソフトテニス、サイクリング、アニメ
   自己紹介
   

   View Slide

3. 複雑度の高いコンポーネントの設計手法に関して、
   実例を踏まえて紹介します
   今日話すこと
   

   View Slide

4. 目次
   1. 背景
   2. 要件
   3. 設計手順
   4. コンポーネント分割
   5. ツリー図
   6. IF設計
   

   View Slide

5. 現代のWebフロントエンドは複雑な操作を求められるようになっている。
   ● ユーザー操作の複雑化
   ● 画面状態の複雑化
   よって、「画面設計」だけでなく「ソフトウェア設計」が必要である。
   背景
   参考：WEBフロントエンドにおけるソフトウェア設計の考察
   / Consideration of software design in WEB front end
   

   View Slide

6. 目次
   1. 背景
   2. 要件
   3. 設計手順
   4. コンポーネント分割
   5. ツリー図
   6. IF設計
   

   View Slide

7. 要件
   Google Forms のようなフォームを作る。
   要件は、以下の3つを満たすこと。
   1. 自由入力の質問ができること
   2. 単一選択の質問ができること
   3. 複数選択の質問ができること
   

   View Slide

8. 目次
   1. 背景
   2. 要件
   3. 設計手順
   4. コンポーネント分割
   5. ツリー図
   6. IF設計
   

   View Slide

9. 設計手順
   画面イメージから徐々に抽象化していきます。
   1. コンポーネント分割
   2. ツリー図
   3. IF設計
   

   View Slide

10. 設計手順
    画面イメージから徐々に抽象化していきます。
    1. コンポーネント分割
    2. ツリー図
    3. IF設計
    

    View Slide

11. 設計手順
    画面イメージから徐々に抽象化していきます。
    1. コンポーネント分割
    2. ツリー図
    3. IF設計
    

    View Slide

12. 設計手順
    画面イメージから徐々に抽象化していきます。
    1. コンポーネント分割
    2. ツリー図
    3. IF設計
    

    View Slide

13. 目次
    1. 背景
    2. 要件
    3. 設計手順
    4. コンポーネント分割
    5. ツリー図
    6. IF設計
    

    View Slide

14. コンポーネント分割
    画面イメージに対し、枠で区切ってコンポーネントを定義する。
    親子関係を明確にするため、同じ階層における枠の色は同じにする。
    分割
    

    View Slide

15. 目次
    1. 背景
    2. 要件
    3. 設計手順
    4. コンポーネント分割
    5. ツリー図
    6. IF設計
    

    View Slide

16. ツリー図
    分割したコンポーネントを、木構造に起こします。
    段階を踏むことで、少しずつ抽象化できます。
    木構造に
    する
    

    View Slide

17. 目次
    1. 背景
    2. 要件
    3. 設計手順
    4. コンポーネント分割
    5. ツリー図
    6. IF設計
    

    View Slide

18. IF設計 (前提)
    IF（インターフェース）の設計は、
    View と State と Action の３つに分けて行います。
    Stateは使っているライブラリ等に依存するので、前提を以下のように定めます。
    1. React Hook Form でフォームのStateを一元管理する
    2. FormProviderを用いてStateのバケツリレーは行わない
    

    View Slide

19. IF設計 (前提)
    React Hook Form を用いた、View と State と Action の関係性は、
    (Reducerはないですが) Fluxと似たような処理の流れで表せます。
    

    View Slide

20. IF設計 (View)
    TextQuestionを定義します。
    TextQuestion
    を定義
    

    View Slide

21. IF設計 (View)
    RadioQuestionを定義します。
    RadioQuestion
    を定義
    

    View Slide

22. IF設計 (View)
    CheckboxQuestionを定義します。
    CheckboxQuestion
    を定義
    

    View Slide

23. IF設計 (View)
    QuestionGroupを定義する際に、Questionの出しわけができないことに気づきます。
    よって、以下のようなFactoryを定義することにします。
    

    View Slide

24. IF設計 (View)
    Factoryパターンを用いることで、以下のようなメリットが得られます。
    参考：React.js with Factory Pattern: Building Complex UI With Ease
    

    View Slide

25. IF設計 (View)
    QuestionFactoryを定義します。
    QuestionFactoryを
    定義
    

    View Slide

26. IF設計 (View)
    QuestionGroupを定義します。
    QuestionGroupを
    定義
    

    View Slide

27. IF設計 (View)
    SubmitButtonを定義します。
    SubmitButton
    を定義
    

    View Slide

28. IF設計 (View)
    ResetButtonを定義します。
    ResetButtonを
    定義
    

    View Slide

29. IF設計 (View)
    Questionnaireを定義します。
    Questionnaire
    を定義
    

    View Slide

30. IF設計 (State)
    Questionタイプに応じたStateを定義できるようにします。
    

    View Slide

31. IF設計 (Action)
    最後にActionを考えることで、ViewとActionとState の関係性を示します。
    

    View Slide

32. まとめ
    ● 複雑度の高いコンポーネントの設計手法に関して、実例を踏まえて紹介しました
    ● 「コンポーネント分割」→「ツリー図」→「IF設計」という流れで設計することで、段階的に設計する
    方法を紹介しました。
    

    View Slide