$30 off During Our Annual Pro Sale. View Details »

Atomic Design の課題とその現実的解決策/Atomic Design

sawa-zen
August 25, 2021

Atomic Design の課題とその現実的解決策/Atomic Design

Atomic Design について語るイベントで登壇した際の資料です

# イベント詳細
https://techplay.jp/event/827002

sawa-zen

August 25, 2021
Tweet

More Decks by sawa-zen

Other Decks in Design

Transcript

  1. Atomic Design ͷ՝୊ͱ
    ͦͷݱ࣮తղܾࡦ
    גࣜձࣾ Topotal CDO
    @sawa-zen
    @sawa-zen (2021/8/24) Atomic Design 1

    View Slide

  2. @sawa-zen
    ॴଐɿגࣜձࣾ Topotal
    ৬छɿCDO
    • ओʹϑϩϯτΤϯυͱσβΠϯΛ୲౰
    • UIσβΠϯ΍σβΠϯγεςϜ͕େ޷

    @sawa-zen (2021/8/24) Atomic Design 2

    View Slide

  3. @sawa-zen (2021/8/24) Atomic Design 3

    View Slide

  4. Atomic Design
    ΍ͬͨ͜ͱ͋Γ·͔͢ʁ
    @sawa-zen (2021/8/24) Atomic Design 4

    View Slide

  5. ๻͸͋Γ·͕͢...
    @sawa-zen (2021/8/24) Atomic Design 5

    View Slide

  6. ఘΊ·ͨ͠
    @sawa-zen (2021/8/24) Atomic Design 6

    View Slide

  7. Α͘ݟΔ File Structure
    src/
    ├─ components/
    │ ├─ atoms/ ŋŋŋ ࠷খ୯ҐUI
    │ ├─ molecules/ ŋŋŋ 2ͭҎ্ͷAtomΛ࣋ͭUI
    │ ├─ organisms/ ŋŋŋ ͦΕ୯ମͰίϯςϯπͱͯ͠੒ΓཱͭUI
    │ ├─ layouts/ ŋŋŋ ϖʔδͷ਽ܗ
    │ ├─ pages/ ŋŋŋ ࣮ࡍʹσʔλ͕ྲྀ͠ࠐ·Εͨ΋ͷ
    @sawa-zen (2021/8/24) Atomic Design 7

    View Slide

  8. ͜Ε͕͏·͍͔͘ͳ͍
    !
    @sawa-zen (2021/8/24) Atomic Design 8

    View Slide

  9. ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ
    ݪҼ1: Atom ͱ Molecule ʹ໎͏
    • ʮAtom ͸ͦΕҎ্෼ղͰ͖ͳ͍࠷খཁૉʯ͕ෆ໌ྎ͗͢Δ
    • ʮ෼ղͰ͖ͳ͍ʯͱ͸Ͳͷঢ়ଶΛࢦ͢ͷ͔ॻ͔Ε͍ͯͳ͍
    • Atom ͱࢥΘΕͨίϯϙʔωϯτ͕ଞͷ Atom ʹґଘ͕ͪ͠
    • ྫ: ΞΠίϯɺςΩετΛؚΉϘλϯ͸ Molecule ʁ
    @sawa-zen (2021/8/24) Atomic Design 9

    View Slide

  10. ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁ
    ݪҼ2: Organism ͕ංେԽͯ͠͠·͏
    • ίϯςΩετΛؚΉ੹຿͕ Organism ʹूத
    • 1֊૚͚ͩͰ͸ՙ͕ॏ͗͢Δ
    @sawa-zen (2021/8/24) Atomic Design 10

    View Slide

  11. ͏·͍͔͘ͳͯ͘౰વ
    @sawa-zen (2021/8/24) Atomic Design 11

    View Slide

  12. "5ͭͷ૚ͷ͏ͪͲͷUI
    ίϯϙʔωϯτΛͲͷ
    ૚ʹ෼ྨ͢Ε͹Α͍
    ͔ɺ۩ମతͳج४͸ࣗ
    ෼ͨͪͰܾΊΔඞཁ͕
    ͋Γ·͢ɻ"
    @sawa-zen (2021/8/24) Atomic Design 12

    View Slide

  13. ϧʔϧΛܾΊΒΕΔ͔͕伴
    @sawa-zen (2021/8/24) Atomic Design 13

    View Slide

  14. ϧʔϧܾΊ΋ਏ͍
    • ίϛϡχέʔγϣϯίετ͕͔͔Γ͗͢Δ
    • νʔϜશһ͕ೲಘ͢Δʹ͸౎౓࿩͠߹͍
    • ϧʔϧ͕๲େʹͳΓͦ͏
    • ϧʔϧ಺Ͱໃ६͕ੜ·Εͦ͏
    @sawa-zen (2021/8/24) Atomic Design 14

    View Slide

  15. ࣗ෼͸͜͜Ͱ୤མ
    !
    @sawa-zen (2021/8/24) Atomic Design 15

    View Slide

  16. ͦ΋ͦ΋ Atomic Design ͷ
    ྑͬͯ͞ͳΜ͚ͩͬʁ
    @sawa-zen (2021/8/24) Atomic Design 16

    View Slide

  17. Atomic Design ͷྑ͞
    • ίϯϙʔωϯτͷ੹຿ͷൣғʹ͍ͭͯߟ͑Δ͖͔͚ͬΛ࡞ΕΔ
    • UIͱͯ͠ͷҰ؏ੑΛอͯΔ
    • ΞδϦςΟͷߴ͍ίϯϙʔωϯτΛ࡞ΕΔ
    @sawa-zen (2021/8/24) Atomic Design 17

    View Slide

  18. 5֊૚Ͱ͋Δඞཁ͸ͳ͍
    !
    @sawa-zen (2021/8/24) Atomic Design 18

    View Slide

  19. Ͱ͸Ͳ͏͢Δ͔ʁ
    @sawa-zen (2021/8/24) Atomic Design 19

    View Slide

  20. ࡦͱͯ͠ͷ File Structure ͷఏҊ
    ҎԼΛ৚݅ʹಠࣗͷ File Structure Λߟ͑ͯΈͨ
    1. ίϯϙʔωϯτͷ֊૚ʹ੍ݶΛ΋ͨͤͳ͍
    2. ෼ྨʹ೰·ͳ͍
    @sawa-zen (2021/8/24) Atomic Design 20

    View Slide

  21. ࡦͱͯ͠ͷ File Structure ͷఏҊ
    1. PCFS (Per-component File Structure)
    2. શମͷߏ੒
    @sawa-zen (2021/8/24) Atomic Design 21

    View Slide

  22. PCFS (Per-component File Structure)
    • ίϯϙʔωϯτ୯Ґͷ File Structure ͷ͜ͱ
    • ίϯϙʔωϯτ͸ඞͣ͜ͷߏ੒ΛकΔ
    @sawa-zen (2021/8/24) Atomic Design 22

    View Slide

  23. PCFS (Per-component File Structure)
    Button/
    ├─ index.tsx ᶃ
    ├─ styles.ts ᶄ
    ├─ components/ ᶅ
    │ ├─ SubComponentA
    │ ├─ ...
    1. ֎෦΁ export ͞ΕΔ root
    2. ੾Γग़͞ΕͨελΠϧ
    3. ࢠཁૉͷίϯϙʔωϯτ܈
    • PCFS ͷ܁Γฦ͠
    @sawa-zen (2021/8/24) Atomic Design 23

    View Slide

  24. PCFS (Per-component File Structure)
    Button/
    ├─ index.tsx ᶃ
    ├─ styles.ts ᶄ
    ├─ components/ ᶅ
    │ ├─ SubComponentA
    │ ├─ ...
    1. ֎෦΁ export ͞ΕΔ root
    2. ੾Γग़͞ΕͨελΠϧ
    3. ࢠཁૉͷίϯϙʔωϯτ܈
    • PCFS ͷ܁Γฦ͠
    @sawa-zen (2021/8/24) Atomic Design 24

    View Slide

  25. PCFS (Per-component File Structure)
    Button/
    ├─ index.tsx ᶃ
    ├─ styles.ts ᶄ
    ├─ components/ ᶅ
    │ ├─ SubComponentA
    │ ├─ ...
    1. ֎෦΁ export ͞ΕΔ root
    2. ੾Γग़͞ΕͨελΠϧ
    3. ࢠཁૉͷίϯϙʔωϯτ܈
    • PCFS ͷ܁Γฦ͠
    @sawa-zen (2021/8/24) Atomic Design 25

    View Slide

  26. PCFS (Per-component File Structure)
    Button/
    ├─ index.tsx ᶃ
    ├─ styles.ts ᶄ
    ├─ components/ ᶅ
    │ ├─ SubComponentA
    │ ├─ ...
    1. ֎෦΁ export ͞ΕΔ root
    2. ੾Γग़͞ΕͨελΠϧ
    3. ࢠཁૉͷίϯϙʔωϯτ܈
    • PCFS ͷ܁Γฦ͠
    @sawa-zen (2021/8/24) Atomic Design 26

    View Slide

  27. શମͷߏ੒
    src/
    ├─ components/ ᶃ
    │ ├─ core/
    │ │ ├─ CoreComponentA
    │ │ ├─ ...
    │ ├─ CommonComponentA
    │ ├─ CommonComponentB
    │ ├─ ...
    ├─ screens/ ᶄ
    │ ├─ HogeScreen/
    │ ├─ HugaScreen/
    │ ├─ ...
    @sawa-zen (2021/8/24) Atomic Design 27

    View Slide

  28. શମͷߏ੒
    src/
    ├─ components/ ᶃ
    │ ├─ core/
    │ │ ├─ CoreComponentA
    │ │ ├─ ...
    │ ├─ CommonComponentA
    │ ├─ CommonComponentB
    │ ├─ ...
    ├─ screens/ ᶄ
    │ ├─ HogeScreen/
    │ ├─ HugaScreen/
    │ ├─ ...
    ① ڞ௨ίϯϙʔωϯτ܈
    • core/ ͸ίϯςΩετΛ࣋ͨͳ͍
    • Atom, Molecule Ϩϕϧ
    • ͜ͷ֊૚ಉ࢜ͷґଘ͸OK
    • core/ Ҏ֎͸ίϯςΩετΛ࣋ͭ
    • Organism Ϩϕϧ
    @sawa-zen (2021/8/24) Atomic Design 28

    View Slide

  29. શମͷߏ੒
    src/
    ├─ components/ ᶃ
    │ ├─ core/
    │ │ ├─ CoreComponentA
    │ │ ├─ ...
    │ ├─ CommonComponentA
    │ ├─ CommonComponentB
    │ ├─ ...
    ├─ screens/ ᶄ
    │ ├─ HogeScreen/
    │ ├─ HugaScreen/
    │ ├─ ...
    ② ը໘ίϯϙʔωϯτ܈
    • Atomic Design ͷ Pages
    @sawa-zen (2021/8/24) Atomic Design 29

    View Slide

  30. Atomic Design ͱൺ΂ͯԿ͕خ͍͔͠
    • ڧ੍ྗ͕ڧ͍׌ͭᐆດͳϧʔϧ͕ແ͍
    • ෼ྨͷͨΊͷڥք͕ͨͬͨ̎ͭ
    1. ෳ਺ՕॴͰ࢖ΘΕ͍ͯΔ͔ʁ
    2. ίϯςΩετΛؚΜͰ͍Δ͔ʁ
    @sawa-zen (2021/8/24) Atomic Design 30

    View Slide

  31. Atomic Design ͸ѱͳͷ͔ʁ
    • ͦΜͳ͜ͱ͸ͳ͍
    • ͬ͘͟Γͱͨ͠ίϯϙʔωϯτͷઢҾ͸ͯ͘͠Εͨ
    • ڞ௨ݴޠͱͯ͠͸࢖͍ଓ͚ΒΕΔ
    • Atom Ϩϕϧͷʓʓ
    • Molecule Ϩϕϧͷʓʓ
    • etc...
    • File Structure ͱ͸૬ੑ͕ѱ͔͚ͬͨͩ
    @sawa-zen (2021/8/24) Atomic Design 31

    View Slide

  32. ·ͱΊ
    • Atomic Design ͸͋͘·Ͱࢦ਑Ͱ͔͠ͳ͍
    • ۜͷ஄ؙͰ͸ͳ͍
    • ࣮૷ʹద͍ͯ͠Δ͔͸Αۛ͘ຯͨ͠΄͏͕ྑ͍
    • Atomic Design ͸ڞ௨ݴޠͱͯ͠͸࢖͍ଓ͚ΒΕΔ
    • ఏҊͨ͠ File Structure Λࢀߟʹ͍͚ͯͨͩ͠Ε͹خ͍͠Ͱ͢
    @sawa-zen (2021/8/24) Atomic Design 32

    View Slide