2017/05/25 【React】Goodpatch×TeamSpirit Meetup Architect -> Architectureです正しくは
@8845musignReact NumaCSS Architect
View Slide
ෲےϩʔϥʔͷྗΛ৴͡Ζ@8845musign
AnovaFrontend Engineer
AnovaFrontend EngineerϩʔετϏʔϑΛ࡞͖ͬͯ·ͨ͠ʂʂʂ
σϞϯετϨʔγϣϯ͚6*ࢼ༻ظؒʹ͖߱ͬͯͨ
6*ϚʔΫΞοϓಘҙʂϘλϯϓϧμϯ
6*ͳΒ͓ͯͷͷϘλϯϓϧμϯśŘʙŕţʙʂʂʂ͔͠͠ɺ͍ͭ͜Β͕͍ͨśŨŜƀŕţʙʂ
ࢥͬͨҎ্ʹεϐʔυͰͳ͍ʜ
পʹ·ͬͨɺͨͬͨ̐ͭͷεςοϓ
ऴɹΘɹͬɹͨɹʁ⾫ґཔओ
ґཔओ͕͜Ε͔͠ݴΘͳ͘ͳͬͨ※ωλͰ͢
$44ͷίϯϙʔωϯτΛΔલʹ΅͘ͷΫϏ͕ΒΕͦ͏※͕͢͞ʹωλͰ͢
1ͦ͜ʹنͳ͍̍ຕͷେͳ4BTT͕͕͍ͬͯͨɻপͩͬͨ࠷ޙʹ$44+4ίϯϙʔωϯτཻͷপ͕͍ͬͯͨ࣍ʹίϯύΠϧεϐʔυͷপʹΛऔΒΕͨϓϩδΣΫτʹ·ͣ3FBDU͕͋ͬͨɺ3FBDU্Ͱॻ͖ग़ͨ͠234
$44ͷίϯϙʔωϯτΛΔલʹ΅͘ͷΫϏ͕ΒΕͦ͏ࢼ༻ظ͚ؒͩͳΜͱ͔ΓΕʂʂʂʂ※ωλͰͬͯ͢ʂʂʂ
$44ઃܭ ίʔσΟϯάڥ̎ͭͷଆ໘͔ΒվળΛ͢Δ
$44ઃܭ
Ͳ͜ʹ࡞༻͢Δ͔Λ໌֬ʹ͍ͨ͠
ٕज़తʹ$44Λղܾ͢ΔΞϓϩʔν
طଘͷ4BTT͔ΒͷҠߦʁֶशίετ͕͔͔Γͦ͏අ༻ରޮՌʁνʔϜશһ͕͍ͭ͑ΔΑ͏ʹͳΔʁ
ઃܭʹΑΔΞϓϩʔνhttps://en.bem.info/
1ಛఆͷٕज़ʹϩοΫΠϯ͞Εͳ͍ωετΛపఈతʹഉআ͢Δɺͱ͍͏ࢥૉΒ͍͠Ϋϥε໊Λߟ͑Δ͜ͱ͕͍͠12GoodBad
πʔϧઃܭΛղܾͯ͘͠Εͳ͍
୯७Ͱ୭ͰཧղͰ͖Δઃܭ$44ʢ4BTTʣͱXFCQBDLͷMPBEFS͚ͩͰ
͖Ίͨ͜ͱ
%JSFDUPSZϕʔεͷΫϥε໋໊SomeComponent!"" ChildA!"" ChildB#"" childB.scss#"" childB.js!"" list.scss.some-component-child-a-child-b-list
͍Ϋϥε໊ͷղܾconst CSS_ROOT = ‘some-component-child-a-child-b-list';class List extends Component {render() {return }}
͍Ϋϥε໊ͷղܾ.some-component-child-a-child-b-list {&__item { … }&__button { … }…}BlockΛলུ͢ΔͨΊ͚ͩͷωετ
1ίϯϑϦΫτ΄΅ͳ͍Ϋϥε໊͔ΒσΟϨΫτϦΛ͏ͷ͕༰қ͍ͩ͞ʜ12GoodBad
ίϯϙʔωϯτͷཻ+4ͱ$44Ͱ͕جຊʢྫ֎͋Δʣ
ίϯϙʔωϯτͷཻ+4ͷ߹ʹ߹ΘͤͯίϯϙʔωϯτΛׂ
ྫ͑5BCMFhead head head headbody body body bodybody body body bodybody body body bodybody body body bodybody body body bodybody body body body
+4ʹΜΘΓͻΕ෬͢MPPQͯ͠SFOEFS͢ΔUSͰίϯϙʔωϯτΛΔQSPQTόέπϦϨʔͷΕΛҙࣝ͢Δ͜ͱͰύϑΥʔϚϯενϡʔχϯά͕͘͢͠ͳΔར)5.-$44ͷ߹Ͱ͚ͩͰίϯϙʔωϯτͬͯɺ͏͔ͬΓ+4࣮࣌ʹελΠϧ͕+4ίϯϙʔωϯτʹΑͬͯஅ͞ΕΔͱਏ͍
)5.-ϚʔΫΞοϓͱ+4ίʔσΟϯάͰࣄલ͢Γ߹ΘͤΛ͠ͱ͘ͱͤ
JNQPSUϧʔϧ$PNQPOFOUͰ҉తʹJNQPSU͞Εͨ$44ͷదԠΛېࢭ͢Δ໌ࣔతʹJNQPSUͨ͠$44ͷΈదԠՄೳͱ͢Δ+4ͱ$44ͷͰରԠ͢Δ$44Ҏ֎ɺϞδϡʔϧ͘͠γεςϜڞ௨$44ͷΈಡΈࠐΜͰྑ͍12
҉తͳJNQPSUͷېࢭComponent#"" ChildComponent$ #"" child.scss$ !"" child.js#"" index.scss!"" index.js
҉తͳJNQPSUͷېࢭComponent#"" ChildComponent$ #"" child.scss$ !"" child.js#"" sharedComponent.scss#"" index.scss!"" index.jsڞ௨ελΠϧͷநग़
JNQPSUՄೳൣғComponent#"" ChildComponentA$ #"" childA.scss$ !"" childA.js#"" ChildComponentB$ #"" childB.scss$ !"" childB.scss#"" index.scss!"" index.js໌ࣔతͰېࢭ
JNQPSU͔ΒదԠελΠϧ͕Θ͔Δঢ়ଶΛݎक͢Δ
ωετېࢭ.some-class tr td {}.some-class__list__btn {}ཁૉ͘͠ΫϥεʹΑΔωετ#&.ͰͷΤϨϝϯτಉ࢜ͷωετωετͷൃੜίϯϙʔωϯτׂͷαΠϯ
ωετېࢭ.some-class tr td {}.some-class__list__btn {}ཁૉ͘͠ΫϥεʹΑΔωετ#&.ͰͷΤϨϝϯτಉ࢜ͷωετωετͷൃੜίϯϙʔωϯτׂͷαΠϯ.some-class__list-btnΞϦ
୭ͰΘ͔Δϧʔϧਁಁ͍͢͠
ίʔσΟϯάڥ
#SPXTFS4ZOD࣌ͷɹരNTͦͦ͜͜ͷMJWFSFMPBEͱൺ
XXXXXXFCQBDLʜ
͍XFCQBDL͍
IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL
ίϯϙʔωϯτ୯ҐͰ۠ΒΕͨαϯυϘοΫε։ൃڥ
γϯϓϧͳϏϧυઃఆ͕దԠ͞ΕΔɺ͍ࣗવͱίϯϙʔωϯτ୯ҐͰͷίʔσΟϯά͕ཁٻ͞ΕΔίϯϙʔωϯτཆΪϓεผ్ɺઐ༻4UPSZΛهड़ͨ͠+4ϑΝΠϧΛ༻ҙඞཁ͕͋Δ1GoodBadυΩϡϝϯςʔγϣϯπʔϧͱͯ͠ΈΔͱඪ४ػೳ͔ͳΓශऑΠϕϯτͷൃՐهड़Ͱ͖Δ2312
Ϗϧυ͕࣌ؒT͔ΒʙTఔͷվળ˞ͦͦͷݩͷXFCQBDLઃఆʹվળͷ༨͕͋Δ͔͠Εͳ͍͕
4UPSZͷهड़import React from ‘react';import { storiesOf, action } from '@kadira/storybook';import Button from ‘../components/Button';storiesOf('Button', module).add('with text', () => (Hello Button));
TTTTTTTTTTTTTTTTUPSZʜ
໘໘TUPSZ
> yo project:storyśŕţ
ՃBEEPOTUPSZCPPLTSFBDUTUPSZCPPLBEEPOJOGPઆ໌จͷϖʔδͷهड़ɺαϯϓϧίʔυQSPQTҰཡΛࣗಈੜ͕ՄೳUVDILTUPSZCPPLSFBENFNBSLEPXOܗࣜͷ3&"%.&ϑΝΠϧΛදࣔ12
ࠔΓࣄϝχϡʔͷ֊Խ͕Ͱ͖ͣɺ໊લͷ͚ํ̍ϖʔδʹෳ4UPSZΛهड़͢ΔͳͲͰରԠʜ
ࠔΓࣄϝχϡʔͷ֊Խ͕Ͱ͖ͣɺ໊લͷ͚ํ̍ϖʔδʹෳ4UPSZΛهड़͢ΔͳͲͰରԠʜ୭͔ڭ͍͑ͯͩ͘͞ʂ
$44ઃܭ ίʔσΟϯάڥ໎Θͳ͍໌֬ͳϧʔϧઃఆ࣮εϐʔυΛམͱ͞ͳ͍շదͳڥͷٻ
⾫ґཔओ
͋Μ͠Μ
ࠓޙͷ53:
4UZMF(VJEFӡ༻ϑϩʔͷཱ֬
4UZMF(VJEF4UPSZCPPLΛ͏3FBDUίϯϙʔωϯτΧλϩάͱσβΠϯΨΠυϥΠϯΛ౷߹ΤϯδχΞ͔ΒσβΠφʔɺϓϩδΣΫτʹؔΘΔਓͯ͢ʹͱͬͯՁͷ͋Δͷͱ͢Δ
BuildDesignΤϯδχΞ σβΠφʔ
BuildDesignΤϯδχΞ σβΠφʔHJUQVTI
BuildDesignΤϯδχΞ σβΠφʔHJUQVTI +FOLJOTͰ੩తϏϧυ
BuildDesignΤϯδχΞ σβΠφʔHJUQVTI +FOLJOTͰ੩తϏϧυ#PPLΛνΣοΫͭͭ͠σβΠϯ
BuildDesignΤϯδχΞ σβΠφʔHJUQVTI +FOLJOTͰ੩తϏϧυ#PPLΛνΣοΫͭͭ͠σβΠϯσβΠϯΛίʔσΟϯάͭͭ͠ΨΠυԽ
BuildDesignΤϯδχΞ σβΠφʔHJUQVTI +FOLJOTͰ੩తϏϧυ#PPLΛνΣοΫͭͭ͠σβΠϯσβΠϯΛίʔσΟϯάͭͭ͠ΨΠυԽҰఆظؒͷΠςϨʔγϣϯͰ܁Γฦ͢
BuildDesignΤϯδχΞ σβΠφʔٕज़తͳোͰ͖Δ͜ͱΛ͍͑ͯ͘σβΠϯͷ๏ଇੑίϯϙʔωϯτΛൃݟྫ͑Ϛʔδϯ୯ҐΑ͘ΘΕΔ৭ͳͲ
BuildDesignΤϯδχΞ σβΠφʔϒϥϯσΟϯάؚΊΑΓେ͖ͳࢹ͔ΒͷνΣοΫ
BuildDesignΤϯδχΞ σβΠφʔϒϥϯσΟϯάؚΊΑΓେ͖ͳࢹ͔ΒͷνΣοΫίϛϡχέʔγϣϯϋϒ
4UZMF(VJEFΛͬͯ౸ୡ͍ͨ͠Ϩϕϧ
σβΠφʔͷηϯεΛ໌Β͔ʹͯ͠ϊϯσβΠφʔσβΠϯʹࢀՃͰ͖Δ
σβΠϯΛεΩϧͱͯ͠ଊ͑Δ
ͨ·ʹΤϯδχΞσβΠϯͯ͠ΈΔτΧ
Atomic Design EbookϞδϡʔϧࢦͷσβΠϯΫϥΠΞϯτɾ৫ͷઆಘӡ༻ϑϩʔͷߏஙσβΠϯγεςϜͷ༗ޮੑ
Atomic Design EbookϞδϡʔϧࢦͷσβΠϯΫϥΠΞϯτɾ৫ͷઆಘӡ༻ϑϩʔͷߏஙσβΠϯγεςϜͷ༗ޮੑϞδϡʔϧ͝ͱʹϑΥʔΧεͯ͠ධՁ͢Δ·ͣԿ͕ඒ͍͠ͷ͔ʁΛΫϥΠΞϯτͱͭΊΔ
http://atomicdesign.bradfrost.com/chapter-2/
http://atomicdesign.bradfrost.com/chapter-2/ཻͷ͋Μ·͠ࡌͬͯͳ͍
http://atomicdesign.bradfrost.com/chapter-2/atomic design is not rigid dogma- Brad Forst
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
8845musign
gotok365
yui_knk
logiteca7
ayaka1230
jmatsu
naokimrmt
torounit
beberlei
77web
little_rubyist
mukky620
kinocoboy2
akosma
deanohume
tanoku
davidbonilla
mraible
62gerente
rasmusluckow
mclloyd
jonyablonski
hannesfritz
ufuk
jnunemaker