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