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
複雑なコンポーネントで 状態をもつのをやめた話
Search
Daisuke Mino
July 31, 2020
Programming
0
120
複雑なコンポーネントで 状態をもつのをやめた話
Daisuke Mino
July 31, 2020
Tweet
Share
More Decks by Daisuke Mino
See All by Daisuke Mino
io.Writerで学ぶGoのインターフェース
minodisk
0
240
Goのエラーハンドリング
minodisk
0
190
Yet another side effect layer for Redux
minodisk
2
2.7k
Other Decks in Programming
See All in Programming
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
0
150
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Unity Android XR入門
sakutama_11
0
160
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
100
Ruby on cygwin 2025-02
fd0
0
140
Honoとフロントエンドの 型安全性について
yodaka
7
1.2k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Software Architecture
hschwentner
6
2.1k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
Grafana Cloudとソラカメ
devoc
0
170
Featured
See All Featured
Building an army of robots
kneath
303
45k
A Tale of Four Properties
chriscoyier
158
23k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Speed Design
sergeychernyshev
27
790
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Typedesign – Prime Four
hannesfritz
40
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Transcript
複雑なコンポーネントで 状態をもつのをやめた話 PrAha x Resily 勉強会 vol.1 Daisuke Mino
複雑なコンポーネント構成での お話です
状態、 どこにもたせてますか?
Objectの中? data = [{ id: 1, visible: true, }, {
id: 2, visible: false, }]
やばい(やばい)
やばいポイント1 例えば `isDragging` , `isHover` , `isScrolling` のような、ユーザー入力 によって状態が目まぐるしく変わるような状態を、複雑なコンポーネントを操作 する場合においては、状態を操作した場所が追いづらくなる。
コンポーネントに閉じる状態ならばコンポーネント内のstateに閉じておけばよ いが、渡されたデータの状態フィールドに変更を加えつつ他のコンポーネント に伝達する場合を想定する。
やばいポイント2 状態の変更がどのコンポーネントに影響を与えるのか、詳細にコードを見てい かないと分からない。
やばいポイント3 コンポーネントのレンダリングをメモ化する際に、与えられたデータの等価性を 比較する際に全フィールドを検査する必要がある。
データはデータ 状態は状態 で保持する
状態用のリストに状態を保持する data = [{ id: 1, }, { id: 2,
}] invisibleIds = [2]
やばくないポイント1 状態リストを操作したコードを調べていくと、どこでどのような操作がされたの か明確。
やばくないポイント2 どのコンポーネントがどの状態を参照しているか明確になった。
やばくないポイント3 メモ化されたコンポーネントを返すかどうかの判定において、データを舐める必 要がなく、状態のIDリストの内容だけを比較したらよい。
状態の他にも、 構造も別で保持する
状態 • selectedGroupIds: Set<string> • selectedUserIds: Set<string> • focusedIds: Set<string>
• invalidIds: Set<string> • disabledIds: Set<string> • intersectingIds: Set<string>
構造 • idNode: Map<string, NodeFragment> • parentChildren: Map<string, Array<string>> •
childParent: Map<string, string> • parentDescendants: Map<string, Array<string>> • childAncestors: Map<string, Array<string>> • rects: Map<string, Rect>
ただし、 複雑じゃないコンポーネント構 成では、オブジェクトに持たせ るのが明快そう
おわり