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

React沼CSSArchitect

 React沼CSSArchitect

2017/05/25 【React】Goodpatch×TeamSpirit Meetup
Architect -> Architectureです正しくは

8845musign

May 25, 2017
Tweet

More Decks by 8845musign

Other Decks in Programming

Transcript

  1. @8845musign
    React Numa
    CSS Architect

    View Slide

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

    View Slide

  3. Anova
    Frontend Engineer

    View Slide

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

    View Slide

  5. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. $44ઃܭ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. ͖Ίͨ͜ͱ

    View Slide

  26. %JSFDUPSZϕʔεͷΫϥε໋໊
    SomeComponent
    !"" ChildA
    !"" ChildB
    #"" childB.scss
    #"" childB.js
    !"" list.scss
    .some-component-child-a-child-b-list

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  30. ίϯϙʔωϯτͷཻ౓

    +4ͱ$44Ͱ͕جຊʢྫ֎͸͋Δʣ

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. ҉໧తͳJNQPSUͷېࢭ
    Component
    #"" ChildComponent
    $ #"" child.scss
    $ !"" child.js
    #"" sharedComponent.scss
    #"" index.scss
    !"" index.js
    ڞ௨ελΠϧͷநग़

    View Slide

  39. JNQPSUՄೳൣғ
    Component
    #"" ChildComponentA
    $ #"" childA.scss
    $ !"" childA.js
    #"" ChildComponentB
    $ #"" childB.scss
    $ !"" childB.scss
    #"" index.scss
    !"" index.js
    ໌ࣔతͰ΋ېࢭ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. ίʔσΟϯά؀ڥ

    View Slide

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

    View Slide

  46. XXXXXXFCQBDLʜ

    View Slide

  47. ஗͍
    XFCQBDL
    ஗͍

    View Slide

  48. View Slide

  49. IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL

    View Slide

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

    View Slide

  51. View Slide

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

    View Slide

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

    View Slide

  54. 4UPSZͷهड़
    import React from ‘react';
    import { storiesOf, action } from '@kadira/storybook';
    import Button from ‘../components/Button';
    storiesOf('Button', module)
    .add('with text', () => (

    Hello Button

    ));

    View Slide

  55. TTTTTTTTTTTTTTTTUPSZʜ

    View Slide

  56. ໘౗
    ໘౗
    TUPSZ

    View Slide

  57. > yo project:story
    śŕţ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. ⾫ґཔओ

    View Slide

  63. ͋Μ͠Μ

    View Slide

  64. ࠓޙͷ53:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. Build
    Design
    ΤϯδχΞ σβΠφʔ
    HJUQVTI +FOLJOTͰ੩తϏϧυ
    #PPLΛνΣοΫͭͭ͠
    σβΠϯ
    σβΠϯΛίʔσΟϯά
    ͭͭ͠ΨΠυԽ
    ҰఆظؒͷΠςϨʔγϣϯͰ܁Γฦ͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide