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