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

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