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

Tweet

Tweet

Slide 1

Slide 1 text

6*ͷ৘ใߏ଄ʹ߹Θͤͨ3$Λ࡞Δ 6*4USVDUVSFύλʔϯ Oct 26, 2023 - Tomohito Yamanaka

Slide 2

Slide 2 text

5PNPIJUP:BNBOBLB 1SFTFOUFS @intomyam @intomyam

Slide 3

Slide 3 text

6*4USVDUVSFύλʔϯ ྫ"SUJDMF ྫ"SUJDMFT

Slide 4

Slide 4 text

UI Structure ύλʔϯ

Slide 5

Slide 5 text

UI Structure ύλʔϯ $PNQPOFOU͸ ʮ6*ཁૉΛදݱͨ͠΋ͷʯ

Slide 6

Slide 6 text

UI Structure ύλʔϯ 1. DataΛදݱ͢Δ 2. DataΛૢ࡞͢Δ 3. Ϣʔβૢ࡞ʹΑͬͯঢ়ଶΛม͑Δ Componentͷ੹຿ 1. ͨͩͻͱͭͷData 2. DataΛૢ࡞͢Δhandler (onCreate, onUpdate, onDelete) 3. ঢ়ଶมԽʹͱ΋ͳ͏handler (onActive, onOpen, onClose) Componentͷpropsͷछྨ

Slide 7

Slide 7 text

ྫ: Article

Slide 8

Slide 8 text

ྫ: Article ͜ͷComponentͷ࣮૷Λߟ͑Δ

Slide 9

Slide 9 text

ྫ: Article ߏ଄తʹ͸͜͏

Slide 10

Slide 10 text

ྫ: Article Component໊ͱData໊͸Ұகͤ͞Δ

Slide 11

Slide 11 text

ྫ: Article Supplementʹ͸ϒοΫϚʔΫϘλϯ͕͋Δ → article.id͕ඞཁ

Slide 12

Slide 12 text

ྫ: Article Supplementʹ௚઀౉ͣ͞ ContextΛ࢖͏

Slide 13

Slide 13 text

ྫ: Articles

Slide 14

Slide 14 text

ྫ: Articles ͜ͷComponentͷ࣮૷Λߟ͑Δ

Slide 15

Slide 15 text

ྫ: Articles

Slide 16

Slide 16 text

ྫ: Articles Article͕ArticleͷฤूػೳΛ࣋ͬͨΒʁ

Slide 17

Slide 17 text

ྫ: Articles

Slide 18

Slide 18 text

ྫ: Articles onUpdateΛΧϦʔԽͯ͠ɺ ࢠComponentͷonUpdateʹ౉͢

Slide 19

Slide 19 text

σΟϨΫτϦߏ଄ͱ1SPQT͕ γϯϓϧͰݟ௨͕͠ྑ͘ͳΔ