Atomic Designで意識したいこと inspired by FLOCSS

by TwitterID：@rukiadia

Slide 1

Slide 1 text

Atomic DesignͰҙ͍ࣝͨ͠ ͜ͱ inspired by FLOCSS 2019/02/08 ୈೋճ AtomicDesignʹ͍ͭͯߟ͑Δձ @rukiadia

Slide 2

Slide 2 text

ࣗݾ঺հ • Sho Yamada • Twitterɿ@rukiadia • גࣜձࣾΦϛΧϨͰϑϩϯτΤϯυΤϯδχ Ξͯ͠·͢ɻ

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ Atomic DesignΛֶͿ͏ͪʹ ๻͕ҙࣝ͢ΔΑ͏ʹͳͬͨʮ̎ͭͷ͜ͱʯ

Slide 4

Slide 4 text

2ͭͷҙ͍ࣝͨ͜͠ͱ • ελΠϧͷ࣋ͨͤํ • ίϯϙʔωϯτͷ࠶ར༻ੑ

Slide 5

Slide 5 text

͜͜Ͱ1࣭ͭ໰Ͱ͢

Slide 6

Slide 6 text

ࠓ೔͍Β͍ͯ͠Δํ͸ React΍Vueʹ׳Εͯ·͔͢ʁ

Slide 7

Slide 7 text

ελΠϧͷ࣋ͨͤํ

Slide 8

Slide 8 text

·ͣ͸͜ΕΛޚཡ͍ͩ͘͞ • https://codepen.io/rukiadia/pen/qgVWMQ

Slide 9

Slide 9 text

୯७ͳը໘Ͱ͸͋Γ·͢ɻ Ͱ͕͢ɺߟ͑Δ͜ͱ͸݁ߏଟ ͍ͱࢥ͍·ͤΜ͔ʁ

Slide 10

Slide 10 text

͖ͬ͞ͷը໘Ͱߟ͑Δ͜ͱ • ཁૉಉ࢜ͷִؒ͸Ͳ͜Ͱهड़ͨ͠Β͍͍Μͩ Ζ͏ɻ • Ϙλϯͷ෯΍จࣈαΠζΛม͑ͳ͍ͱ͍͚ͳ ͍ɻͲ͜ʹهड़͠Α͏ɻ

Slide 11

Slide 11 text

୯Ұ੹೚ͷ๏ଇ • ʮࢠίϯϙʔωϯτ͸਌ίϯϙʔωϯτͷϨ ΠΞ΢τͷࣄ৘Λ஌Βͳ͍ʯ • ʮ਌ίϯϙʔωϯτ͸ࢠίϯϙʔωϯτͷݟ ͨ໨ͷࣄ৘Λ஌Γ͗͢ͳ͍ʯ • ࣄ৘Λ஌Γ͗͢Δͱɺ࠷దԽ͞Ε͗͢Δɻ

Slide 12

Slide 12 text

ίϯϙʔωϯτͷ࠶ར༻ੑ

Slide 13

Slide 13 text

ίϯϙʔωϯτͷ࠶ར༻ੑ CSS͸࠶ར༻ੑΛҙࣝ͢Δ΂͖ͱΑ͘ݴΘΕ ͍ͯΔҹ৅͕͋Γ·͢ɻ ͦ͜Ͱࠓճ͸ɺͲ͜·Ͱ࠶ར༻͍ͯ͘͠΂͖ ͳͷ͔ߟ͑ͯΈ·͢ɻ

Slide 14

Slide 14 text

·ͣ͸͜ΕΛޚཡ͍ͩ͘͞ ʢ2ճ໨ʣ • https://codepen.io/rukiadia/pen/bzYxPJ • Ϩετϥϯͷ৘ใΛݕࡧͰ͖ΔαʔϏεΛࢥ ͍ු͔΂͍͚ͯͨͩΕ͹Α͍Ͱ͢ɻ

Slide 15

Slide 15 text

͜ͷύʔπͷࠓޙ • ޱίϛͷ৘ใΛࡌͤͯɺΧʔυͷ৘ใΛϦο νʹ͍ͨ͠ʂ • ؾʹͳΔʢϋʔτϚʔΫʣΛ͍ͯ͠Δਓͷ਺ Λදࣔͤ͞Δͷ͸Ͳ͏͔ʁ • Ϣʔβͷཤྺʹ΋ಉ͡ύʔπ࢖͍͍͚ͨͲɺ ͦ͜Ͱ͸ޱίϛͷ৘ใཁΒͳ͍ΑͶʁ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

࠶ར༻͗͢͠ΔͱͲ͏ͳΔ͔ ૝૾ͯ͠ΈΑ͏

Slide 18

Slide 18 text

࠶ར༻͗ͨ݁͢͠Ռ • CSSͷӨڹൣғ͕޿͘ͳΓ͗ͯ͢͠·͍ɺม ߋ͢Δࡍͷίετ΍ࣺͯΔࡍʹߟ͑Δ͜ͱ͕ ଟ͘ͳΔɻ • ίϯϙʔωϯτࢦ޲։ൃͷ৔߹ • ίϯϙʔωϯτʹؔΘΔࣄ৘͕૿͑͗ͯ͢ ͠·͍ɺ౉͢஋΍಺෦෼ذ΋ଟ͘ͳΔɻ

Slide 19

Slide 19 text

࠶ར༻ੑʹ͍ͭͯͷ݁࿦ • ʮࠓޙ͜͏ͳΔͩΖ͏͔Βʙ͢Δʯ͸େମແ ବʹऴΘΔɻ • ίϯϙʔωϯτʹవΘΔࣄ৘͕૿͖͑ͯͨΒɺ ࢥ͍੾ͬͯผʑʹ͠Α͏ɻ • Өڹൣғ͕૿͑͗ͯ͢ಈ͚ͳ͘ͳΔΑΓɺ ௚͢Օॴ͕૿͑Δํ͕Ϛγɻ

Slide 20

Slide 20 text

2ͭͷ࿩ͷ·ͱΊ

Slide 21

Slide 21 text

2ͭͷ࿩ͷڞ௨఺ • ڞ௨͢Δͷ͸ίϯϙʔωϯτ͕஌Δࣄ৘ • ʮελΠϧͷ࣋ͨͤํʯ • ଞͷίϯϙʔωϯτͷࣄ৘Λ஌Γ͗͢ͳ͍ɻ • ʮίϯϙʔωϯτͷ࠶ར༻ੑʯ • ࣄ৘Λࣗ෼Ͱ࣋ͪ͗͢ͳ͍ɻ

Slide 22

Slide 22 text

༨ஊ

Slide 23

Slide 23 text

FLOCSSͷ࿩͕ ग़͖ͯͯͳ͍ͷͰ͸ʁ

Slide 24

Slide 24 text

FLOCSS͔Βड͚ͨӨڹ ࠓճ๻͕ൃදͨ͠ωλΛߟ͑Δʹ͋ͨΓɺ FLOCSSͰߦ͍ͬͯΔΞϓϩʔνʹେ͖ͳӨ ڹΛड͚·ͨ͠ɻ

Slide 25

Slide 25 text

݁࿦ͷग़͍ͯͳ͍೰Έ • ૉͷCSSͰAtomic DesignΛ΍͍ͬͯ͘ͳΒɺ Ϋϥε໊͸Ͳ͏͠Α͏ɻAtoms΍Moleculesͷ ಄จࣈΛ࢖͏ͷ͸ΞϦͳͷ͔ɻ • FLOCSSͰ͍͏ͱ͜ΖͷʮObjectʯͰίϯ ϙʔωϯτͷཻ౓Λߟ͑ΔࡍɺAtomic Design ͷߟ͑͸ࢀߟʹग़དྷͳ͍͔ɻ

Slide 26

Slide 26 text

ଞͷਓͷҙݟ΋ฉ͖͍ͨ ͔ͤͬ͘ͷػձͳͷͰɺࠓ೔ࢀՃ͞Ε͍ͯΔ ํͷҙݟ΍ΞϓϩʔνΛ࢕͑ͨΒ޾͍Ͱ͢ɻ

Slide 27

Slide 27 text

ࢀߟจݙ • ࠷ۙͷϑϩϯτΤϯυͷίϯϙʔωϯτઃܭ ʹཱͪ޲͔͏ɻ • https://qiita.com/seya/items/ 8814e905693f00cdade2

Slide 28

Slide 28 text

Thanks!!