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
70

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
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
120
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
9.8k
Design in an AI World
Avatar for tapps tapps
0
170
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
290
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
690
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k

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