React沼CSSArchitect

 React沼CSSArchitect

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

66b5fea05e9370317581701c87e50eae?s=128

8845musign

May 25, 2017
Tweet

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 ΤϯδχΞ σβΠφʔ HJUQVTI

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

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

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

  72. Build Design ΤϯδχΞ σβΠφʔ HJUQVTI +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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠