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
2.3k
React_コンポーネントの設計.pdf
Naoto
March 18, 2023
Tweet
Share
More Decks by Naoto
See All by Naoto
ReactとValue Objectで凝集度を高める
knaot0
0
570
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
230
ニーリーにおけるプロダクトエンジニア
nealle
0
830
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.1k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Rails Girls Zürich Keynote
gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Typedesign – Prime Four
hannesfritz
42
2.7k
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設計」という流れで設計することで、段階的に設計する 方法を紹介しました。