Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Naoto
March 18, 2023

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

Naoto

March 18, 2023
Tweet

More Decks by Naoto

Other Decks in Programming

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 の3つに分けて行います。
    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