Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tomohito Yamanaka Tomohito Yamanaka
October 27, 2023
74
0

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

Avatar for Tomohito Yamanaka

Tomohito Yamanaka

October 27, 2023

More Decks by Tomohito Yamanaka

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

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
890
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
510
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
230
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
810
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
820
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
440
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k

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͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ