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
UIの情報構造に合わせたReact Componentを作る UI Structureパターン
Search
Tomohito Yamanaka
October 27, 2023
0
57
UIの情報構造に合わせたReact Componentを作る UI Structureパターン
Tomohito Yamanaka
October 27, 2023
Tweet
Share
More Decks by Tomohito Yamanaka
See All by Tomohito Yamanaka
生産性を上げる考え方
intomyam
0
160
create unreadable_code unless carelessness !always
intomyam
1
690
Wantedly Visit's Account Table Design
intomyam
0
520
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
1k
The Language of Interfaces
destraynor
156
24k
Become a Pro
speakerdeck
PRO
26
5.2k
It's Worth the Effort
3n
184
28k
A designer walks into a library…
pauljervisheath
205
24k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Navigating Team Friction
lara
183
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
6*ͷใߏʹ߹Θͤͨ3$Λ࡞Δ 6*4USVDUVSFύλʔϯ Oct 26, 2023 - Tomohito Yamanaka
5PNPIJUP:BNBOBLB 1SFTFOUFS @intomyam @intomyam
6*4USVDUVSFύλʔϯ ྫ"SUJDMF ྫ"SUJDMFT
UI Structure ύλʔϯ
UI Structure ύλʔϯ $PNQPOFOU ʮ6*ཁૉΛදݱͨ͠ͷʯ
UI Structure ύλʔϯ 1. DataΛදݱ͢Δ 2. DataΛૢ࡞͢Δ 3. Ϣʔβૢ࡞ʹΑͬͯঢ়ଶΛม͑Δ Componentͷ
1. ͨͩͻͱͭͷData 2. DataΛૢ࡞͢Δhandler (onCreate, onUpdate, onDelete) 3. ঢ়ଶมԽʹͱͳ͏handler (onActive, onOpen, onClose) Componentͷpropsͷछྨ
ྫ: Article
ྫ: Article ͜ͷComponentͷ࣮Λߟ͑Δ
ྫ: Article ߏతʹ͜͏
ྫ: Article Component໊ͱData໊Ұகͤ͞Δ
ྫ: Article SupplementʹϒοΫϚʔΫϘλϯ͕͋Δ → article.id͕ඞཁ
ྫ: Article Supplementʹͣ͞ ContextΛ͏
ྫ: Articles
ྫ: Articles ͜ͷComponentͷ࣮Λߟ͑Δ
ྫ: Articles
ྫ: Articles Article͕ArticleͷฤूػೳΛ࣋ͬͨΒʁ
ྫ: Articles
ྫ: Articles onUpdateΛΧϦʔԽͯ͠ɺ ࢠComponentͷonUpdateʹ͢
σΟϨΫτϦߏͱ1SPQT͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ