Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

438799c739f93d00abc30fa2da33c543?s=128

TwitterID:@rukiadia

February 08, 2019
Tweet

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

  16. None
  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!!