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

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

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

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