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

「第２回AtomicDesignについて考える会」で発表した資料です。
https://thinkatomicdesign.connpass.com/event/115574/

資料中に載せているURLです。

・https://codepen.io/rukiadia/pen/qgVWMQ
・https://codepen.io/rukiadia/pen/bzYxPJ

SpeakerDeckからはURLが開けないようなので、こちらにも載せておきます。

Transcript

1. Atomic DesignͰҙ͍ࣝͨ͠ ͜ͱ inspired by FLOCSS 2019/02/08 ୈೋճ AtomicDesignʹ͍ͭͯߟ͑Δձ @rukiadia
2. ࣗݾ঺հ • Sho Yamada • Twitterɿ@rukiadia • גࣜձࣾΦϛΧϨͰϑϩϯτΤϯυΤϯδχ Ξͯ͠·͢ɻ
3. ࠓ೔࿩͢͜ͱ Atomic DesignΛֶͿ͏ͪʹ ๻͕ҙࣝ͢ΔΑ͏ʹͳͬͨʮ̎ͭͷ͜ͱʯ
4. 2ͭͷҙ͍ࣝͨ͜͠ͱ • ελΠϧͷ࣋ͨͤํ • ίϯϙʔωϯτͷ࠶ར༻ੑ
5. ͜͜Ͱ1࣭ͭ໰Ͱ͢
6. ࠓ೔͍Β͍ͯ͠Δํ͸ React΍Vueʹ׳Εͯ·͔͢ʁ
7. ελΠϧͷ࣋ͨͤํ
8. ·ͣ͸͜ΕΛޚཡ͍ͩ͘͞ • https://codepen.io/rukiadia/pen/qgVWMQ
9. ୯७ͳը໘Ͱ͸͋Γ·͢ɻ Ͱ͕͢ɺߟ͑Δ͜ͱ͸݁ߏଟ ͍ͱࢥ͍·ͤΜ͔ʁ
10. ͖ͬ͞ͷը໘Ͱߟ͑Δ͜ͱ • ཁૉಉ࢜ͷִؒ͸Ͳ͜Ͱهड़ͨ͠Β͍͍Μͩ Ζ͏ɻ • Ϙλϯͷ෯΍จࣈαΠζΛม͑ͳ͍ͱ͍͚ͳ ͍ɻͲ͜ʹهड़͠Α͏ɻ
11. ୯Ұ੹೚ͷ๏ଇ • ʮࢠίϯϙʔωϯτ͸਌ίϯϙʔωϯτͷϨ ΠΞ΢τͷࣄ৘Λ஌Βͳ͍ʯ • ʮ਌ίϯϙʔωϯτ͸ࢠίϯϙʔωϯτͷݟ ͨ໨ͷࣄ৘Λ஌Γ͗͢ͳ͍ʯ • ࣄ৘Λ஌Γ͗͢Δͱɺ࠷దԽ͞Ε͗͢Δɻ
12. ίϯϙʔωϯτͷ࠶ར༻ੑ
13. ίϯϙʔωϯτͷ࠶ར༻ੑ CSS͸࠶ར༻ੑΛҙࣝ͢Δ΂͖ͱΑ͘ݴΘΕ ͍ͯΔҹ৅͕͋Γ·͢ɻ ͦ͜Ͱࠓճ͸ɺͲ͜·Ͱ࠶ར༻͍ͯ͘͠΂͖ ͳͷ͔ߟ͑ͯΈ·͢ɻ
14. ·ͣ͸͜ΕΛޚཡ͍ͩ͘͞ ʢ2ճ໨ʣ • https://codepen.io/rukiadia/pen/bzYxPJ • Ϩετϥϯͷ৘ใΛݕࡧͰ͖ΔαʔϏεΛࢥ ͍ු͔΂͍͚ͯͨͩΕ͹Α͍Ͱ͢ɻ
15. ͜ͷύʔπͷࠓޙ • ޱίϛͷ৘ใΛࡌͤͯɺΧʔυͷ৘ใΛϦο νʹ͍ͨ͠ʂ • ؾʹͳΔʢϋʔτϚʔΫʣΛ͍ͯ͠Δਓͷ਺ Λදࣔͤ͞Δͷ͸Ͳ͏͔ʁ • Ϣʔβͷཤྺʹ΋ಉ͡ύʔπ࢖͍͍͚ͨͲɺ ͦ͜Ͱ͸ޱίϛͷ৘ใཁΒͳ͍ΑͶʁ
17. ࠶ར༻͗͢͠ΔͱͲ͏ͳΔ͔ ૝૾ͯ͠ΈΑ͏
18. ࠶ར༻͗ͨ݁͢͠Ռ • CSSͷӨڹൣғ͕޿͘ͳΓ͗ͯ͢͠·͍ɺม ߋ͢Δࡍͷίετ΍ࣺͯΔࡍʹߟ͑Δ͜ͱ͕ ଟ͘ͳΔɻ • ίϯϙʔωϯτࢦ޲։ൃͷ৔߹ • ίϯϙʔωϯτʹؔΘΔࣄ৘͕૿͑͗ͯ͢ ͠·͍ɺ౉͢஋΍಺෦෼ذ΋ଟ͘ͳΔɻ
19. ࠶ར༻ੑʹ͍ͭͯͷ݁࿦ • ʮࠓޙ͜͏ͳΔͩΖ͏͔Βʙ͢Δʯ͸େମແ ବʹऴΘΔɻ • ίϯϙʔωϯτʹవΘΔࣄ৘͕૿͖͑ͯͨΒɺ ࢥ͍੾ͬͯผʑʹ͠Α͏ɻ • Өڹൣғ͕૿͑͗ͯ͢ಈ͚ͳ͘ͳΔΑΓɺ ௚͢Օॴ͕૿͑Δํ͕Ϛγɻ
20. 2ͭͷ࿩ͷ·ͱΊ
21. 2ͭͷ࿩ͷڞ௨఺ • ڞ௨͢Δͷ͸ίϯϙʔωϯτ͕஌Δࣄ৘ • ʮελΠϧͷ࣋ͨͤํʯ • ଞͷίϯϙʔωϯτͷࣄ৘Λ஌Γ͗͢ͳ͍ɻ • ʮίϯϙʔωϯτͷ࠶ར༻ੑʯ • ࣄ৘Λࣗ෼Ͱ࣋ͪ͗͢ͳ͍ɻ
22. ༨ஊ
23. FLOCSSͷ࿩͕ ग़͖ͯͯͳ͍ͷͰ͸ʁ
24. FLOCSS͔Βड͚ͨӨڹ ࠓճ๻͕ൃදͨ͠ωλΛߟ͑Δʹ͋ͨΓɺ FLOCSSͰߦ͍ͬͯΔΞϓϩʔνʹେ͖ͳӨ ڹΛड͚·ͨ͠ɻ
25. ݁࿦ͷग़͍ͯͳ͍೰Έ • ૉͷCSSͰAtomic DesignΛ΍͍ͬͯ͘ͳΒɺ Ϋϥε໊͸Ͳ͏͠Α͏ɻAtoms΍Moleculesͷ ಄จࣈΛ࢖͏ͷ͸ΞϦͳͷ͔ɻ • FLOCSSͰ͍͏ͱ͜ΖͷʮObjectʯͰίϯ ϙʔωϯτͷཻ౓Λߟ͑ΔࡍɺAtomic Design ͷߟ͑͸ࢀߟʹग़དྷͳ͍͔ɻ
26. ଞͷਓͷҙݟ΋ฉ͖͍ͨ ͔ͤͬ͘ͷػձͳͷͰɺࠓ೔ࢀՃ͞Ε͍ͯΔ ํͷҙݟ΍ΞϓϩʔνΛ࢕͑ͨΒ޾͍Ͱ͢ɻ
27. ࢀߟจݙ • ࠷ۙͷϑϩϯτΤϯυͷίϯϙʔωϯτઃܭ ʹཱͪ޲͔͏ɻ • https://qiita.com/seya/items/ 8814e905693f00cdade2
28. Thanks!!