React沼CSSArchitect

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

Transcript

1. @8845musign React Numa CSS Architect
2. ෲےϩʔϥʔͷྗΛ৴͡Ζ
   @8845musign
3. Anova Frontend Engineer
4. Anova Frontend Engineer ϩʔετϏʔϑΛ࡞͖ͬͯ·ͨ͠ʂʂʂ
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 ஗͍
49. IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL
50. ίϯϙʔωϯτ୯ҐͰ۠੾ΒΕͨ
    αϯυϘοΫε։ൃ؀ڥ
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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠