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
44
UIの情報構造に合わせたReact Componentを作る UI Structureパターン
Tomohito Yamanaka
October 27, 2023
Tweet
Share
More Decks by Tomohito Yamanaka
See All by Tomohito Yamanaka
生産性を上げる考え方
intomyam
0
120
create unreadable_code unless carelessness !always
intomyam
1
660
Wantedly Visit's Account Table Design
intomyam
0
490
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Clear Off the Table
cherdarchuk
84
310k
Producing Creativity
orderedlist
PRO
337
39k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Docker and Python
trallard
34
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Writing Fast Ruby
sferik
621
60k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
The Language of Interfaces
destraynor
151
23k
Visualization
eitanlees
136
14k
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͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ