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
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
For a Future-Friendly Web
brad_frost
176
9.6k
Visualization
eitanlees
146
15k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Making Projects Easy
brettharned
116
6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
GraphQLとの向き合い方2022年版
quramy
44
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ