React沼CSSArchitect

Transcript

1. @8845musign React Numa CSS Architect

2. ෲےϩʔϥʔͷྗΛ৴͡Ζ
   @8845musign

3. Anova Frontend Engineer

4. Anova Frontend Engineer ϩʔετϏʔϑΛ࡞͖ͬͯ·ͨ͠ʂʂʂ

5. None

6. σϞϯετϨʔγϣϯ޲͚6* ࢼ༻ظؒʹ͖߱ͬͯͨ

7. 6*ϚʔΫΞοϓ͸ಘҙ෼໺ʂ Ϙλϯ ϓϧμ΢ϯ

8. 6*ͳΒ͓ͯͷ΋ͷ Ϙλϯ ϓϧμ΢ϯ śŘʙŕţʙʂʂʂ ͔͠͠ɺ͍ͭ͜Β͕͍ͨ śŨŜƀŕţʙʂ

9. ࢥͬͨҎ্ʹεϐʔυͰͳ͍ʜ

10. পʹ͸·ͬͨɺͨͬͨ̐ͭͷεςοϓ

11. ऴɹΘɹͬɹͨɹʁ ⾫ґཔओ

12. ґཔओ͕͜Ε͔͠ݴΘͳ͘ͳͬͨ ※൒෼͸ωλͰ͢

13. $44ͷίϯϙʔωϯτΛ੾Δલʹ
    ΅͘ͷΫϏ͕੾ΒΕͦ͏ ※͕͢͞ʹωλͰ͢

14. 1 ͦ͜ʹ͸ن໿΋ͳ͍̍ຕͷ޿େͳ4BTT͕޿͕͍ͬͯͨɻপͩͬͨ ࠷ޙʹ$44
    
    +4
    ίϯϙʔωϯτཻ౓ͷপ͕଴͍ͬͯͨ ࣍ʹίϯύΠϧεϐʔυͷপʹ଍ΛऔΒΕͨ ϓϩδΣΫτʹ͸·ͣ3FBDU͕͋ͬͨɺ๻͸3FBDU্Ͱॻ͖ग़ͨ͠ 2 3 4

15. $44ͷίϯϙʔωϯτΛ੾Δલʹ
    ΅͘ͷΫϏ͕੾ΒΕͦ͏ ࢼ༻ظ͚ؒͩͳΜͱ͔৐Γ੾Εʂʂʂʂ ※ωλͰͬͯ͢ʂʂʂ

16. $44ઃܭ ίʔσΟϯά؀ڥ ̎ͭͷଆ໘͔ΒվળΛ͢Δ

17. $44ઃܭ

18. Ͳ͜ʹ࡞༻͢Δ͔Λ໌֬ʹ͍ͨ͠

19. ٕज़తʹ$44Λղܾ͢ΔΞϓϩʔν

20. طଘͷ4BTT͔ΒͷҠߦ͸ʁ ֶशίετ͕͔͔Γͦ͏ අ༻ରޮՌ͸ʁ νʔϜશһ͕͍ͭ࢖͑ΔΑ͏ʹͳΔʁ

21. ઃܭʹΑΔΞϓϩʔν https://en.bem.info/

22. 1 ಛఆͷٕज़ʹϩοΫΠϯ͞Εͳ͍ ωετΛపఈతʹഉআ͢Δɺͱ͍͏ࢥ૝͸ૉ੖Β͍͠ Ϋϥε໊Λߟ͑Δ͜ͱ͕೉͍͠ 1 2 Good Bad

23. πʔϧ͸ઃܭΛղܾͯ͘͠Εͳ͍

24. ୯७Ͱ୭Ͱ΋ཧղͰ͖Δઃܭ $44ʢ4BTTʣͱXFCQBDLͷMPBEFS͚ͩͰ

25. ͖Ίͨ͜ͱ

26. %JSFDUPSZϕʔεͷΫϥε໋໊ SomeComponent !"" ChildA !"" ChildB #"" childB.scss #"" childB.js

    !"" list.scss .some-component-child-a-child-b-list

27. ௕͍Ϋϥε໊ͷղܾ const CSS_ROOT = ‘some-component-child-a-child-b-list'; class List extends Component {

    render() { return <div className={`${CSS_ROOT}`} /> } }

28. ௕͍Ϋϥε໊ͷղܾ .some-component-child-a-child-b-list { &__item { … } &__button { …

    } … } BlockΛলུ͢Δ
    ͨΊ͚ͩͷωετ

29. 1 ίϯϑϦΫτ͸΄΅ͳ͍ Ϋϥε໊͔ΒσΟϨΫτϦΛ௥͏ͷ͕༰қ ͍ͩ͞ʜ 1 2 Good Bad

30. ίϯϙʔωϯτͷཻ౓  +4ͱ$44Ͱ͕جຊʢྫ֎͸͋Δʣ

31. ίϯϙʔωϯτͷཻ౓ +4ͷ౎߹ʹ߹ΘͤͯίϯϙʔωϯτΛ෼ׂ

32. ྫ͑͹5BCMF head head head head body body body body body

    body body body body body body body body body body body body body body body body body body body

33. ྫ͑͹5BCMF head head head head body body body body body

    body body body body body body body body body body body body body body body body body body body

34. +4ʹ΍ΜΘΓͻΕ෬͢ MPPQͯ͠SFOEFS͢ΔUSͰίϯϙʔωϯτΛ੾Δ QSPQTόέπϦϨʔͷ੾Ε໨Λҙࣝ͢Δ͜ͱͰ
    ύϑΥʔϚϯενϡʔχϯά͕͠΍͘͢ͳΔར఺΋ )5.-$44ͷ౎߹Ͱ͚ͩͰίϯϙʔωϯτ੾ͬͯɺ͏͔ͬΓ
    +4࣮૷࣌ʹελΠϧ͕+4ίϯϙʔωϯτʹΑͬͯ෼அ͞ΕΔͱਏ͍

35. )5.-ϚʔΫΞοϓͱ+4ίʔσΟϯά
    Ͱࣄલ͢Γ߹ΘͤΛ͠ͱ͘ͱ޾ͤ

36. JNQPSUϧʔϧ $PNQPOFOU಺Ͱ҉໧తʹJNQPSU͞Εͨ$44ͷదԠΛېࢭ͢Δ
    ໌ࣔతʹJNQPSUͨ͠$44ͷΈదԠՄೳͱ͢Δ +4ͱ$44ͷͰରԠ͢Δ$44Ҏ֎͸ɺϞδϡʔϧ΋͘͠͸
    γεςϜڞ௨$44ͷΈಡΈࠐΜͰྑ͍ 1 2

37. ҉໧తͳJNQPSUͷېࢭ Component #"" ChildComponent $ #"" child.scss $ !"" child.js

    #"" index.scss !"" index.js

38. ҉໧తͳJNQPSUͷېࢭ Component #"" ChildComponent $ #"" child.scss $ !"" child.js

    #"" sharedComponent.scss #"" index.scss !"" index.js ڞ௨ελΠϧͷநग़

39. JNQPSUՄೳൣғ Component #"" ChildComponentA $ #"" childA.scss $ !"" childA.js

    #"" ChildComponentB $ #"" childB.scss $ !"" childB.scss #"" index.scss !"" index.js ໌ࣔతͰ΋ېࢭ

40. JNQPSU͔ΒదԠελΠϧ͕
    Θ͔Δঢ়ଶΛݎक͢Δ

41. ωετېࢭ .some-class tr td {} .some-class__list__btn {} ཁૉ΋͘͠͸ΫϥεʹΑΔωετ #&.ͰͷΤϨϝϯτಉ࢜ͷωετ ωετͷൃੜ͸ίϯϙʔωϯτ෼ׂͷαΠϯ

42. ωετېࢭ .some-class tr td {} .some-class__list__btn {} ཁૉ΋͘͠͸ΫϥεʹΑΔωετ #&.ͰͷΤϨϝϯτಉ࢜ͷωετ ωετͷൃੜ͸ίϯϙʔωϯτ෼ׂͷαΠϯ

    .some-class__list-btn͸ΞϦ

43. ୭Ͱ΋Θ͔Δϧʔϧ͸ਁಁ͠΍͍͢

44. ίʔσΟϯά؀ڥ

45. #SPXTFS4ZOD࣌୅ͷ
    ɹര଎NTͦͦ͜͜ͷMJWFSFMPBEͱൺ΂

46. XXXXXXFCQBDLʜ

47. ஗͍ XFCQBDL ஗͍

48. None

49. IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL

50. ίϯϙʔωϯτ୯ҐͰ۠੾ΒΕͨ
    αϯυϘοΫε։ൃ؀ڥ

51. None

52. γϯϓϧͳϏϧυઃఆ͕దԠ͞ΕΔɺ͸΍͍ ࣗવͱίϯϙʔωϯτ୯ҐͰͷίʔσΟϯά͕ཁٻ͞ΕΔ
    ίϯϙʔωϯτཆ੒Ϊϓε ผ్ɺઐ༻4UPSZΛهड़ͨ͠+4ϑΝΠϧΛ༻ҙඞཁ͕͋Δ 1 Good Bad υΩϡϝϯςʔγϣϯπʔϧͱͯ͠ΈΔͱඪ४ػೳ͸͔ͳΓශऑ ΠϕϯτͷൃՐ΋هड़Ͱ͖Δ 2

    3 1 2

53. Ϗϧυ͕࣌ؒ
    ਺T͔ΒʙTఔ౓΁ͷվળ ˞ͦ΋ͦ΋ͷݩͷXFCQBDLઃఆʹվળͷ༨஍͕͋Δ͔΋͠Εͳ͍͕

54. 4UPSZͷهड़ import React from ‘react'; import { storiesOf, action }

    from '@kadira/storybook'; import Button from ‘../components/Button'; storiesOf('Button', module) .add('with text', () => ( <Button onClick={action(‘clicked')}> Hello Button </Button> ));

55. TTTTTTTTTTTTTTTTUPSZʜ

56. ໘౗ ໘౗ TUPSZ

57. > yo project:story śŕţ

58. ௥ՃBEEPO TUPSZCPPLTSFBDUTUPSZCPPLBEEPOJOGP
    આ໌จͷϖʔδ಺΁ͷهड़ɺαϯϓϧίʔυ΍
    QSPQTҰཡΛࣗಈੜ੒͕Մೳ UVDILTUPSZCPPLSFBENF
    NBSLEPXOܗࣜͷ3&"%.&ϑΝΠϧΛදࣔ 1 2

59. ࠔΓࣄ ϝχϡʔͷ֊૚Խ͕Ͱ͖ͣɺ໊લͷ෇͚ํ΍
    ̍ϖʔδʹෳ਺4UPSZΛهड़͢ΔͳͲͰରԠʜ

60. ࠔΓࣄ ϝχϡʔͷ֊૚Խ͕Ͱ͖ͣɺ໊લͷ෇͚ํ΍
    ̍ϖʔδʹෳ਺4UPSZΛهड़͢ΔͳͲͰରԠʜ ୭͔ڭ͍͑ͯͩ͘͞ʂ

61. $44ઃܭ ίʔσΟϯά؀ڥ ໎Θͳ͍
    ໌֬ͳϧʔϧઃఆ ࣮૷εϐʔυΛམͱ͞ͳ͍
    շదͳ؀ڥͷ௥ٻ

62. ⾫ґཔओ

63. ͋Μ͠Μ

64. ࠓޙͷ53:

65. 4UZMF(VJEFӡ༻ϑϩʔͷཱ֬

66. 4UZMF(VJEF 4UPSZCPPLΛ࢖͏ 3FBDUίϯϙʔωϯτΧλϩάͱσβΠϯΨΠυϥΠϯΛ౷߹ ΤϯδχΞ͔ΒσβΠφʔɺϓϩδΣΫτʹؔΘΔਓ͢΂ͯʹ
    ͱͬͯՁ஋ͷ͋Δ΋ͷͱ͢Δ

67. Build Design ΤϯδχΞ σβΠφʔ

68. Build Design ΤϯδχΞ σβΠφʔ HJU
    QVTI

69. Build Design ΤϯδχΞ σβΠφʔ HJU
    QVTI +FOLJOTͰ੩తϏϧυ

70. Build Design ΤϯδχΞ σβΠφʔ HJU
    QVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠
    σβΠϯ

71. Build Design ΤϯδχΞ σβΠφʔ HJU
    QVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠
    σβΠϯ σβΠϯΛίʔσΟϯά
    ͭͭ͠ΨΠυԽ

72. Build Design ΤϯδχΞ σβΠφʔ HJU
    QVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠
    σβΠϯ σβΠϯΛίʔσΟϯά
    ͭͭ͠ΨΠυԽ

    ҰఆظؒͷΠςϨʔγϣϯͰ܁Γฦ͢

73. Build Design ΤϯδχΞ σβΠφʔ ٕज़తͳো֐΍Ͱ͖Δ͜ͱ
    Λ఻͍͑ͯ͘
    σβΠϯͷ๏ଇੑ΍
    ίϯϙʔωϯτΛൃݟ
    ྫ͑͹Ϛʔδϯ୯Ґ΍Α͘࢖ΘΕΔ৭ͳͲ

74. Build Design ΤϯδχΞ σβΠφʔ ϒϥϯσΟϯάؚΊΑΓ
    େ͖ͳࢹ఺͔ΒͷνΣοΫ

75. Build Design ΤϯδχΞ σβΠφʔ ϒϥϯσΟϯάؚΊΑΓ
    େ͖ͳࢹ఺͔ΒͷνΣοΫ ίϛϡχέʔγϣϯϋϒ

76. 4UZMF(VJEFΛ࢖ͬͯ౸ୡ͍ͨ͠Ϩϕϧ

77. σβΠφʔͷηϯεΛ໌Β͔ʹͯ͠
    ϊϯσβΠφʔ΋σβΠϯʹࢀՃͰ͖Δ

78. σβΠϯΛεΩϧͱͯ͠ଊ͑Δ

79. ͨ·ʹ͸
    ΤϯδχΞ΋σβΠϯͯ͠ΈΔτΧ

80. Atomic Design Ebook Ϟδϡʔϧࢦ޲ͷσβΠϯ ΫϥΠΞϯτɾ૊৫ͷઆಘ ӡ༻ϑϩʔͷߏங σβΠϯγεςϜͷ༗ޮੑ

81. Atomic Design Ebook Ϟδϡʔϧࢦ޲ͷσβΠϯ ΫϥΠΞϯτɾ૊৫ͷઆಘ ӡ༻ϑϩʔͷߏங σβΠϯγεςϜͷ༗ޮੑ

82. Atomic Design Ebook Ϟδϡʔϧࢦ޲ͷσβΠϯ ΫϥΠΞϯτɾ૊৫ͷઆಘ ӡ༻ϑϩʔͷߏங σβΠϯγεςϜͷ༗ޮੑ Ϟδϡʔϧ͝ͱʹϑΥʔΧεͯ͠ධՁ͢Δ
    ·ͣ͸Կ͕ඒ͍͠ͷ͔ʁΛΫϥΠΞϯτͱͭΊΔ

83. http://atomicdesign.bradfrost.com/chapter-2/

84. http://atomicdesign.bradfrost.com/chapter-2/ ཻ౓ͷ࿩͸͋Μ·͠ࡌͬͯͳ͍

85. http://atomicdesign.bradfrost.com/chapter-2/ atomic design is not rigid dogma - Brad Forst

86. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠