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.4k
React_コンポーネントの設計.pdf
Naoto
March 18, 2023
Tweet
Share
More Decks by Naoto
See All by Naoto
ReactとValue Objectで凝集度を高める
knaot0
0
580
Other Decks in Programming
See All in Programming
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
Goで作る、開発・CI環境
sin392
0
260
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
189
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Balancing Empowerment & Direction
lara
1
450
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Bash Introduction
62gerente
613
210k
Rails Girls Zürich Keynote
gr2m
95
14k
BBQ
matthewcrist
89
9.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設計」という流れで設計することで、段階的に設計する 方法を紹介しました。