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
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
効率的な開発手段として VRTを活用する
ishkawa
0
140
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
PicoRuby on Rails
makicamel
2
130
Hack Claude Code with Claude Code
choplin
4
2k
Discover Metal 4
rei315
2
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
GitHub's CSS Performance
jonrohan
1031
460k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
We Have a Design System, Now What?
morganepeng
53
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
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設計」という流れで設計することで、段階的に設計する 方法を紹介しました。