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
200
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
650
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
8.9k
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
XP, Testing and ninja testing
m_seki
3
230
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
590
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
740
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Speed Design
sergeychernyshev
32
1k
Writing Fast Ruby
sferik
628
62k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
KATA
mclloyd
30
14k
Become a Pro
speakerdeck
PRO
28
5.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Six Lessons from altMBA
skipperchong
28
3.9k
Building Applications with DynamoDB
mza
95
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
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設計」という流れで設計することで、段階的に設計する 方法を紹介しました。