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
0
71

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
220
create　unreadable_code　unless　carelessness　!always
Avatar for Tomohito Yamanaka intomyam
1
720
Wantedly Visit's Account Table Design
Avatar for Tomohito Yamanaka intomyam
0
550

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
68
38k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.2k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
130
Design in an AI World
Avatar for tapps tapps
0
180
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
320

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