Atomic designで助かった人たち

frontrend vol.8 LT枠にて、AbemaTVで採用しているatomic designの話を「Atomic designで助かった人たち」というタイトルで発表しました。

Transcript

1. atomic designͰ
 ͔ͨͬͨ͢ਓͨͪ front-end engineer＠AbemaTV Yukako IIDA @becyn
2. about myself • front-end engineer @ AbemaTV • AbemaTV join࣌͸ۀ຿Ͱͷfrontܦݧ΄΅0 • atomic designʹͱͯ΋ॿ͚ΒΕͨਓ • server-side 2.5y • android 0.5y
3. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
4. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ίϯϙʔωϯτͷதͷ࠷খ୯Ґ
5. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ATOMSΛ૊Έ߹Θͤͨ΋ͷ
6. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ߋʹ૊Έ߹Θͤͨ
 ࠶ར༻Մೳͳ੡඼ͷύʔπ
7. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ۩ମతʹ֤ίϯϙʔωϯτͷ
 ؔ܎Λද͍ͯ͠Δ΋ͷ
8. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ςϯϓϨʔτͷΠϯελϯε
9. what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏࿦ • ཻ౓ʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠෼ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES ͜ΕΛݩʹϓϩμΫτͷσβΠϯγεςϜΛ࡞͍ͬͯ͘
10. what’s atomic design? • AbemaTVͰ͸ҎԼͷ3۠෼ͷΈ࠾༻ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
11. atomic design খ࿩ with me
12. atomic design খ࿩ • ҟಈॳ೔ɺ؀ڥ੔උͨ͠ޙɺ
 1PR͚ͩͰ͍͍͔Β௺ࠟ࢒ͯ͠ؼΓ͍ͨ…ʂ • ॳ೔ͷλεΫ͸͍͍ͨͩͨ • Ͱ΋Ͳ͔͜Βணखͨ͠Β͍͍ͷ͔ख୳Γ😭
14. atomic design খ࿩ • ͔Βͷ
 atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ
 ͍͍ͨͩͨσβΠϯΛཻ౓͝ͱʹ෼ղ atomic design ͷ఻ಋࢣ @ygoto3_
15. hover࣌
16. ͜Ε͕ҰͭͷओͳཁૉͬΆ͍
17. ओͳίϯϙʔωϯτͷதͷओͳίϯϙʔωϯτ
18. hover࣌ ͦΕͧΕͰ
 ఆٛͰ͖ͦ͏ ΋ͬͱ෼ղͰ͖Δʂ·͍͚ͩΔʂ
19. ORGANISMS MOLECULES ATOMS ORGANISMS hover࣌ ATOMS ATOMS
20. atomic design খ࿩ • ͔Βͷ
 atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ
 ͍͍ͨͩͨσβΠϯΛཻ౓͝ͱʹ෼ղ • ҟಈॳ೔ʹ”όϧʔϯͷ࡞੒” ͷ
 PRΛૹΔ͜ͱ͕Ͱ͖ͨʢ҆ṉʣ atomic design ͷ఻ಋࢣ @ygoto3_ ͜ͷtooltipత
 balloon࡞੒PR
21. atomic designΛݩʹ͠ɺ ʮίϯϙʔωϯτࢥߟʯͷ
 ʢײ֮తʹڞ༗͍ͯ͠Δʣཻ౓Λ ΑΓΘ͔Γ΍͘͢ೝࣝՄೳʹʂ
22. atomic design খ࿩ with designers
23. atomic design খ࿩ (2) ͜ͷؒͷΞϨͱΞϨ૊Έ߹Θͤͯ
 งғؾͰ࡞͓ͬͯ͘ͷͰɺ
 ଞͷσβΠϯͷޙணखͰOKͰ͢Α💪 ϑϩϯτΤϯυ͞Μ ৽ϖʔδͷσβΠϯ΍ΔͶ💦 σβΠφʔ͞Μ ࠷ߴɻ σβΠφʔ͞Μ
24. σβΠφʔ͞ΜͱѨჴͷݺٵ͕
 ΑΓͰ͖ΔΑ͏ʹͳΔʂ
 ʢຊϦϦʔε௚લͱ͔ͱͯ΋͍͍ײ͡ʹಈ͚ͨʣ
25. atomic design খ࿩ (3) • σβΠφʔI௩͞Μ
 ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా
 ʮΞϓϦΞΠίϯͷѹॖ཰ɺมߋͨ͠ʂʯ
26. atomic design খ࿩ (3) • σβΠφʔI௩͞Μ
 ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా
 ʮΞϓϦΞΠίϯͷѹॖ཰ɺมߋͨ͠ʂʯ Ͱ͸ͳ͘ɺ ্ͷձ࿩
27. ߏ଄͕γϯϓϧͳͷͰɺ σβΠφʔ͞Μʹͱͬͯ΋ ͓௚͠PRΛૹΓ΍͍͢؀ڥʂ
28. ࠷ߴ
29. ·ͱΊ
30. atomic designͷ͓͢͢ΊϙΠϯτ γϯϓϧͳߟ͑ ΤϯδχΞͷख़࿅౓Λ໰Θͣɺ
 νʔϜ಺Ͱͷڞ௨ೝࣝΛ࣋ͪ΍͍͢ σβΠϯ͕౷Ұ͞Ε΍͍͢ ʮ͜ͷϖʔδ͚ͩ࢓༷͕ҧ͏ʯͳͲ͕ͳ͘ͳΓɺ
 ϓϩμΫτΛ࢖͍΍͍͢ɺૢ࡞ʹ໎͍͕ͳ͘ͳΔ σβΠφʔ͞ΜͱΑΓ஥ྑ͘ͳΕΔ ࿩͢ػձ͕૿͑ɺ͓ޓ͍ʹํ๏࿦Λ࣠ʹ͠ͳ͕Βɺ
 ఏҊ͠߹͏ؔ܎ʹͳΕΔ
31. atomic designͰ
 ͔ͨͬͨ͢ਓͨͪ front-end engineer＠AbemaTV Yukako IIDA ଓ͖͸ɺ࠙਌ձͰ͓࿩͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ