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

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

Avatar for Tomohito Yamanaka Tomohito Yamanaka
October 27, 2023
72
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
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 Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
310
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
250
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
180
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
730
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.2k

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