$30 off During Our Annual Pro Sale. View Details »

UIの情報構造に合わせたReact Componentを作る UI Structureパターン

Avatar for Tomohito Yamanaka Tomohito Yamanaka
October 27, 2023
0
66

UIの情報構造に合わせたReact Componentを作る UI Structureパターン

Avatar for Tomohito Yamanaka

Tomohito Yamanaka

October 27, 2023
Tweet

More Decks by Tomohito Yamanaka

See All by Tomohito Yamanaka
生産性を上げる考え方
Avatar for Tomohito Yamanaka intomyam
0
200
create　unreadable_code　unless　carelessness　!always
Avatar for Tomohito Yamanaka intomyam
1
710
Wantedly Visit's Account Table Design
Avatar for Tomohito Yamanaka intomyam
0
540

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
85
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.7k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
91k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
140
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
2
61
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
40
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
100

Transcript

  1. 6*ͷ৘ใߏ଄ʹ߹Θͤͨ3$Λ࡞Δ 6*4USVDUVSFύλʔϯ Oct 26, 2023 - Tomohito Yamanaka

  2. 5PNPIJUP:BNBOBLB 1SFTFOUFS @intomyam @intomyam

  3.  6*4USVDUVSFύλʔϯ  ྫ"SUJDMF  ྫ"SUJDMFT

  4. UI Structure ύλʔϯ

  5. UI Structure ύλʔϯ $PNQPOFOU͸ ʮ6*ཁૉΛදݱͨ͠΋ͷʯ

  6. UI Structure ύλʔϯ 1. DataΛදݱ͢Δ 2. DataΛૢ࡞͢Δ 3. Ϣʔβૢ࡞ʹΑͬͯঢ়ଶΛม͑Δ Componentͷ੹຿

    1. ͨͩͻͱͭͷData 2. DataΛૢ࡞͢Δhandler (onCreate, onUpdate, onDelete) 3. ঢ়ଶมԽʹͱ΋ͳ͏handler (onActive, onOpen, onClose) Componentͷpropsͷछྨ

  7. ྫ: Article

  8. ྫ: Article ͜ͷComponentͷ࣮૷Λߟ͑Δ

  9. ྫ: Article ߏ଄తʹ͸͜͏

  10. ྫ: Article Component໊ͱData໊͸Ұகͤ͞Δ

  11. ྫ: Article Supplementʹ͸ϒοΫϚʔΫϘλϯ͕͋Δ → article.id͕ඞཁ

  12. ྫ: Article Supplementʹ௚઀౉ͣ͞ ContextΛ࢖͏

  13. ྫ: Articles

  14. ྫ: Articles ͜ͷComponentͷ࣮૷Λߟ͑Δ

  15. ྫ: Articles

  16. ྫ: Articles Article͕ArticleͷฤूػೳΛ࣋ͬͨΒʁ

  17. ྫ: Articles

  18. ྫ: Articles onUpdateΛΧϦʔԽͯ͠ɺ ࢠComponentͷonUpdateʹ౉͢

  19. σΟϨΫτϦߏ଄ͱ1SPQT͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ