Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React_コンポーネントの設計.pdf
Search
Naoto
March 18, 2023
Programming
1
1.3k
React_コンポーネントの設計.pdf
Naoto
March 18, 2023
Tweet
Share
More Decks by Naoto
See All by Naoto
ReactとValue Objectで凝集度を高める
knaot0
0
400
Other Decks in Programming
See All in Programming
Rust.Nagoya #1
codemountains
0
170
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
CSC307 Lecture 05
javiergs
PRO
0
210
Trial
cairolibrary720
1
130
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
CSC307 Lecture 13
javiergs
PRO
0
150
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 07
javiergs
PRO
0
220
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Featured
See All Featured
Visualization
eitanlees
139
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Designing Experiences People Love
moore
136
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building Adaptive Systems
keathley
34
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Transcript
React コンポーネントの設計 株式会社BuySell Technologies 金子 直人
• 金子 直人(かねこ なおと) • フロントエンジニア / テックリード • Reactが好き
• 趣味は、ソフトテニス、サイクリング、アニメ 自己紹介
複雑度の高いコンポーネントの設計手法に関して、 実例を踏まえて紹介します 今日話すこと
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. IF設計
現代のWebフロントエンドは複雑な操作を求められるようになっている。 • ユーザー操作の複雑化 • 画面状態の複雑化 よって、「画面設計」だけでなく「ソフトウェア設計」が必要である。 背景 参考:WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration
of software design in WEB front end
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. IF設計
要件 Google Forms のようなフォームを作る。 要件は、以下の3つを満たすこと。 1. 自由入力の質問ができること 2. 単一選択の質問ができること 3.
複数選択の質問ができること
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. IF設計
設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
設計手順 画面イメージから徐々に抽象化していきます。 1. コンポーネント分割 2. ツリー図 3. IF設計
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. IF設計
コンポーネント分割 画面イメージに対し、枠で区切ってコンポーネントを定義する。 親子関係を明確にするため、同じ階層における枠の色は同じにする。 分割
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. IF設計
ツリー図 分割したコンポーネントを、木構造に起こします。 段階を踏むことで、少しずつ抽象化できます。 木構造に する
目次 1. 背景 2. 要件 3. 設計手順 4. コンポーネント分割 5.
ツリー図 6. 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設計」という流れで設計することで、段階的に設計する 方法を紹介しました。