ビルドプロセスから考えるCSSアンチパターン

Transcript

1. Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula

2. CSSͷ࿩Λ͠·͢

3. ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ੎ CSSۤख੎

4. CSSಘҙ੎ CSSۤख੎ ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ

5. ͦΜͳࢲͰ͕͢

6. ৭ʑ͋ͬͯɺ CSSͱਅ݋ʹ޲͖߹Θͳ͚Ε͹ ͳΒͳ͍ͱ͖͕͖ͨ…

7. ਺ϲ݄ܦա

8. ؾ͕͍ͭͨ͜ͱ

9. Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍

10. Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍ ͜ͷ࿩͸͠·ͤΜ

11. Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢

12. Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢ ͜ͷ࿩Λ͠·͢

13. Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ

14. Ξϯνύλʔϯ1

15. ίϯϙʔωϯτϕʔεͳͷʹ CSS͸άϩʔόϧ

16. ͦ΋ͦ΋CSSͱ޲͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ

17. • ϑϩϯτΤϯυ։ൃ͸ίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓ෼ׂ ίϯϙʔωϯτϕʔε։ൃ

18. ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔

19. άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘ͸όϯυϥʔ ͔Βݟ͑ͳ͍

20. όϯυϥʔʹΑΔޮ཰తͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔Ε࢖ΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷௿ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴ଎Խ ࢪࡦͷಋೖ͕೉͘͠ͳΔ

    • ϖʔδͷද͕ࣔ஗͘ͳΔ

21. άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ࢖͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules •

    ͦͷଞCSS in JS • ఻౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚Ε͹ͳΒͳ͍

22. ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δ೉қ౓্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚Ε͹ͳΒͳ͍

23. ղܾࡦ

24. CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X

25. ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘؔ܎͕໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕࢖͑Δ • ϙʔλϏϦςΟ͕޲্͢Δ

26. Ξϯνύλʔϯ2

27. ίʔυ͸DRYɺग़ྗ͸ඇDRY

28. CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center',

    cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };

29. Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ

30. ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //

    ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }

31. ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; //

    ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … } DRY͡Όͳ͍

32. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

33. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

34. ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ

35. ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞

36. ίʔυ͕DRYͰ΋ ग़ྗ͕DRYͰͳ͍ͱ͸ݶΒͳ͍ ※SASSͷ@extends΍ɺCSS Modulesͷcomposes͸ग़ྗ΋DRYͰ͢

37. ղܾࡦ

38. ൚༻తͳελΠϧΛෳ਺ͷ ίϯϙʔωϯτͰ࢖͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷ΋ͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ࢖͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ࢖͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱ͸ͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ

    τ͕ͨ͘͞ΜͰ͖Δ

39. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';

    function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); }

40. ෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css';

    function Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.children} </button> ); } ͜͜ʹ΋஫໨
    w ར༻ଆ͔Βʮத਎ʯΛ౉ͤΔ Α͏ʹ͢Δ
    w 8FC$PNQPOFOUT
    7VFKT ͳΒTMPU
    w "OHVMBSͳΒOHDPOUFOU

41. • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function

    Button(props) { return ( <button className={classNames( button, { [red]: props.isRed } )}> {props.text} </button> ); } ͜Ε͸Α͘ͳ͍ ෦෼తʹελΠϧΛม͍͑ͨ࣌

42. ར༻ଆ͔Βݟͨ৔߹ // ྑ͍ྫ: ॊೈ <Book>Click Me!</Book> <Book><a href="...">Click Me!</a></Book> <Book><i

    className="icon"></i>Click Me!</Book> // ѱ͍ྫ: ॊೈͰͳ͍ // ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ // ίϯϙʔωϯτͷ࣮૷͕ͲΜͲΜෳࡶʹ <Book text="Click Me!"></Book> ͜Ε΋Ξϯνύλʔϯ
    ˞$44ࣗମͷ΋ͷͰ͸ͳ͍͕

43. ͭ·Γ

44. ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛ࢖ͬͯॊೈੑΛ֬อ͢Δ

45. ॳΊ͸ෆ҆ͩͬͨ • ओͳݒ೦఺ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ࢖͍ճ͠ Ͱ͸ཻ౓͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ࢖͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰ͸ʁ -> ࠓͷͱ͜Ζᐜ༕

46. Atomic Design?

47. ͏·Έ͕Α͘෼͔͍ͬͯͳ͍ • ͏·͍ͷ͔΋͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔΋ • Atoms, Molecules, Organismsͷ۠෼͚͕೉͠ ͍ͱ͍͏࿩ΛΑ͘ฉ͘

    -> ࠓͷ΍Γํ͸ɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍఺Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍

48. Thank you!