Atomic Design について語るイベントで登壇した際の資料です
# イベント詳細 https://techplay.jp/event/827002
Atomic Design ͷ՝ͱͦͷݱ࣮తղܾࡦגࣜձࣾ Topotal CDO@sawa-zen@sawa-zen (2021/8/24) Atomic Design 1
View Slide
@sawa-zenॴଐɿגࣜձࣾ Topotal৬छɿCDO• ओʹϑϩϯτΤϯυͱσβΠϯΛ୲• UIσβΠϯσβΠϯγεςϜ͕େ@sawa-zen (2021/8/24) Atomic Design 2
@sawa-zen (2021/8/24) Atomic Design 3
Atomic Designͬͨ͜ͱ͋Γ·͔͢ʁ@sawa-zen (2021/8/24) Atomic Design 4
͋Γ·͕͢...@sawa-zen (2021/8/24) Atomic Design 5
ఘΊ·ͨ͠@sawa-zen (2021/8/24) Atomic Design 6
Α͘ݟΔ File Structuresrc/├─ components/│ ├─ atoms/ ŋŋŋ ࠷খ୯ҐUI│ ├─ molecules/ ŋŋŋ 2ͭҎ্ͷAtomΛ࣋ͭUI│ ├─ organisms/ ŋŋŋ ͦΕ୯ମͰίϯςϯπͱͯ͠ΓཱͭUI│ ├─ layouts/ ŋŋŋ ϖʔδͷܗ│ ├─ pages/ ŋŋŋ ࣮ࡍʹσʔλ͕ྲྀ͠ࠐ·Εͨͷ@sawa-zen (2021/8/24) Atomic Design 7
͜Ε͕͏·͍͔͘ͳ͍!@sawa-zen (2021/8/24) Atomic Design 8
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁݪҼ1: Atom ͱ Molecule ʹ໎͏• ʮAtom ͦΕҎ্ղͰ͖ͳ͍࠷খཁૉʯ͕ෆ໌ྎ͗͢Δ• ʮղͰ͖ͳ͍ʯͱͲͷঢ়ଶΛࢦ͢ͷ͔ॻ͔Ε͍ͯͳ͍• Atom ͱࢥΘΕͨίϯϙʔωϯτ͕ଞͷ Atom ʹґଘ͕ͪ͠• ྫ: ΞΠίϯɺςΩετΛؚΉϘλϯ Molecule ʁ@sawa-zen (2021/8/24) Atomic Design 9
ͳͥ͏·͘ߦ͔ͳ͍ͷ͔ʁݪҼ2: Organism ͕ංେԽͯ͠͠·͏• ίϯςΩετΛؚΉ͕ Organism ʹूத• 1֊͚ͩͰՙ͕ॏ͗͢Δ@sawa-zen (2021/8/24) Atomic Design 10
͏·͍͔͘ͳͯ͘વ@sawa-zen (2021/8/24) Atomic Design 11
"5ͭͷͷ͏ͪͲͷUIίϯϙʔωϯτΛͲͷʹྨ͢ΕΑ͍͔ɺ۩ମతͳج४ࣗͨͪͰܾΊΔඞཁ͕͋Γ·͢ɻ"@sawa-zen (2021/8/24) Atomic Design 12
ϧʔϧΛܾΊΒΕΔ͔͕伴@sawa-zen (2021/8/24) Atomic Design 13
ϧʔϧܾΊਏ͍• ίϛϡχέʔγϣϯίετ͕͔͔Γ͗͢Δ• νʔϜશһ͕ೲಘ͢Δʹ͠߹͍• ϧʔϧ͕େʹͳΓͦ͏• ϧʔϧͰໃ६͕ੜ·Εͦ͏@sawa-zen (2021/8/24) Atomic Design 14
ࣗ͜͜Ͱམ!@sawa-zen (2021/8/24) Atomic Design 15
ͦͦ Atomic Design ͷྑͬͯ͞ͳΜ͚ͩͬʁ@sawa-zen (2021/8/24) Atomic Design 16
Atomic Design ͷྑ͞• ίϯϙʔωϯτͷͷൣғʹ͍ͭͯߟ͑Δ͖͔͚ͬΛ࡞ΕΔ• UIͱͯ͠ͷҰ؏ੑΛอͯΔ• ΞδϦςΟͷߴ͍ίϯϙʔωϯτΛ࡞ΕΔ@sawa-zen (2021/8/24) Atomic Design 17
5֊Ͱ͋Δඞཁͳ͍!@sawa-zen (2021/8/24) Atomic Design 18
ͰͲ͏͢Δ͔ʁ@sawa-zen (2021/8/24) Atomic Design 19
ࡦͱͯ͠ͷ File Structure ͷఏҊҎԼΛ݅ʹಠࣗͷ File Structure Λߟ͑ͯΈͨ1. ίϯϙʔωϯτͷ֊ʹ੍ݶΛͨͤͳ͍2. ྨʹ·ͳ͍@sawa-zen (2021/8/24) Atomic Design 20
ࡦͱͯ͠ͷ File Structure ͷఏҊ1. PCFS (Per-component File Structure)2. શମͷߏ@sawa-zen (2021/8/24) Atomic Design 21
PCFS (Per-component File Structure)• ίϯϙʔωϯτ୯Ґͷ File Structure ͷ͜ͱ• ίϯϙʔωϯτඞͣ͜ͷߏΛकΔ@sawa-zen (2021/8/24) Atomic Design 22
PCFS (Per-component File Structure)Button/├─ index.tsx ᶃ├─ styles.ts ᶄ├─ components/ ᶅ│ ├─ SubComponentA│ ├─ ...1. ֎෦ export ͞ΕΔ root2. Γग़͞ΕͨελΠϧ3. ࢠཁૉͷίϯϙʔωϯτ܈• PCFS ͷ܁Γฦ͠@sawa-zen (2021/8/24) Atomic Design 23
PCFS (Per-component File Structure)Button/├─ index.tsx ᶃ├─ styles.ts ᶄ├─ components/ ᶅ│ ├─ SubComponentA│ ├─ ...1. ֎෦ export ͞ΕΔ root2. Γग़͞ΕͨελΠϧ3. ࢠཁૉͷίϯϙʔωϯτ܈• PCFS ͷ܁Γฦ͠@sawa-zen (2021/8/24) Atomic Design 24
PCFS (Per-component File Structure)Button/├─ index.tsx ᶃ├─ styles.ts ᶄ├─ components/ ᶅ│ ├─ SubComponentA│ ├─ ...1. ֎෦ export ͞ΕΔ root2. Γग़͞ΕͨελΠϧ3. ࢠཁૉͷίϯϙʔωϯτ܈• PCFS ͷ܁Γฦ͠@sawa-zen (2021/8/24) Atomic Design 25
PCFS (Per-component File Structure)Button/├─ index.tsx ᶃ├─ styles.ts ᶄ├─ components/ ᶅ│ ├─ SubComponentA│ ├─ ...1. ֎෦ export ͞ΕΔ root2. Γग़͞ΕͨελΠϧ3. ࢠཁૉͷίϯϙʔωϯτ܈• PCFS ͷ܁Γฦ͠@sawa-zen (2021/8/24) Atomic Design 26
શମͷߏsrc/├─ components/ ᶃ│ ├─ core/│ │ ├─ CoreComponentA│ │ ├─ ...│ ├─ CommonComponentA│ ├─ CommonComponentB│ ├─ ...├─ screens/ ᶄ│ ├─ HogeScreen/│ ├─ HugaScreen/│ ├─ ...@sawa-zen (2021/8/24) Atomic Design 27
શମͷߏsrc/├─ components/ ᶃ│ ├─ core/│ │ ├─ CoreComponentA│ │ ├─ ...│ ├─ CommonComponentA│ ├─ CommonComponentB│ ├─ ...├─ screens/ ᶄ│ ├─ HogeScreen/│ ├─ HugaScreen/│ ├─ ...① ڞ௨ίϯϙʔωϯτ܈• core/ ίϯςΩετΛ࣋ͨͳ͍• Atom, Molecule Ϩϕϧ• ͜ͷ֊ಉ࢜ͷґଘOK• core/ Ҏ֎ίϯςΩετΛ࣋ͭ• Organism Ϩϕϧ@sawa-zen (2021/8/24) Atomic Design 28
શମͷߏsrc/├─ components/ ᶃ│ ├─ core/│ │ ├─ CoreComponentA│ │ ├─ ...│ ├─ CommonComponentA│ ├─ CommonComponentB│ ├─ ...├─ screens/ ᶄ│ ├─ HogeScreen/│ ├─ HugaScreen/│ ├─ ...② ը໘ίϯϙʔωϯτ܈• Atomic Design ͷ Pages@sawa-zen (2021/8/24) Atomic Design 29
Atomic Design ͱൺͯԿ͕خ͍͔͠• ڧ੍ྗ͕ڧ͍ͭᐆດͳϧʔϧ͕ແ͍• ྨͷͨΊͷڥք͕ͨͬͨ̎ͭ1. ෳՕॴͰΘΕ͍ͯΔ͔ʁ2. ίϯςΩετΛؚΜͰ͍Δ͔ʁ@sawa-zen (2021/8/24) Atomic Design 30
Atomic Design ѱͳͷ͔ʁ• ͦΜͳ͜ͱͳ͍• ͬ͘͟Γͱͨ͠ίϯϙʔωϯτͷઢҾͯ͘͠Εͨ• ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ• Atom Ϩϕϧͷʓʓ• Molecule Ϩϕϧͷʓʓ• etc...• File Structure ͱ૬ੑ͕ѱ͔͚ͬͨͩ@sawa-zen (2021/8/24) Atomic Design 31
·ͱΊ• Atomic Design ͋͘·ͰࢦͰ͔͠ͳ͍• ۜͷؙͰͳ͍• ࣮ʹద͍ͯ͠Δ͔Αۛ͘ຯͨ͠΄͏͕ྑ͍• Atomic Design ڞ௨ݴޠͱ͍ͯ͠ଓ͚ΒΕΔ• ఏҊͨ͠ File Structure Λࢀߟʹ͍͚ͯͨͩ͠Εخ͍͠Ͱ͢@sawa-zen (2021/8/24) Atomic Design 32