Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React沼CSSArchitect
Search
8845musign
May 25, 2017
Programming
2
3.4k
React沼CSSArchitect
2017/05/25 【React】Goodpatch×TeamSpirit Meetup
Architect -> Architectureです正しくは
8845musign
May 25, 2017
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
810
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
230
業務システムに必要なアクセシビリティ
8845musign
1
1k
業務システム狂詩曲
8845musign
4
2k
READING The Atomic Workflow
8845musign
3
680
いまさら styled components 入門した
8845musign
3
870
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2k
感性デザインとは?
8845musign
4
1.8k
Other Decks in Programming
See All in Programming
Learning Kotlin with detekt
inouehi
1
260
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
920
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.2k
Rubyと自由とAIと
yotii23
6
2k
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
4
1.1k
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
830
10년 개발한 프로젝트. 애자일 업무 조직에서 모듈화 했던 경험을 공유합니다.
winterlovedev
PRO
0
550
Duke on CRaC with Jakarta EE
ivargrimstad
0
830
SREチームのタスク優先度と向き合う Road to SRE NEXT@札幌
nealle
0
120
はじめての Go * WASM * OCR
sgash708
1
150
Boost Your Web Performance with Hyperdrive
chimame
1
210
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
380
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Facilitating Awesome Meetings
lara
53
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
590
Code Reviewing Like a Champion
maltzj
521
39k
Building Adaptive Systems
keathley
40
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Transcript
@8845musign React Numa CSS Architect
ෲےϩʔϥʔͷྗΛ৴͡Ζ @8845musign
Anova Frontend Engineer
Anova Frontend Engineer ϩʔετϏʔϑΛ࡞͖ͬͯ·ͨ͠ʂʂʂ
None
σϞϯετϨʔγϣϯ͚6* ࢼ༻ظؒʹ͖߱ͬͯͨ
6*ϚʔΫΞοϓಘҙʂ Ϙλϯ ϓϧμϯ
6*ͳΒ͓ͯͷͷ Ϙλϯ ϓϧμϯ śŘʙŕţʙʂʂʂ ͔͠͠ɺ͍ͭ͜Β͕͍ͨ śŨŜƀŕţʙʂ
ࢥͬͨҎ্ʹεϐʔυͰͳ͍ʜ
পʹ·ͬͨɺͨͬͨ̐ͭͷεςοϓ
ऴɹΘɹͬɹͨɹʁ ⾫ґཔओ
ґཔओ͕͜Ε͔͠ݴΘͳ͘ͳͬͨ ※ωλͰ͢
$44ͷίϯϙʔωϯτΛΔલʹ ΅͘ͷΫϏ͕ΒΕͦ͏ ※͕͢͞ʹωλͰ͢
1 ͦ͜ʹنͳ͍̍ຕͷେͳ4BTT͕͕͍ͬͯͨɻপͩͬͨ ࠷ޙʹ$44+4ίϯϙʔωϯτཻͷপ͕͍ͬͯͨ ࣍ʹίϯύΠϧεϐʔυͷপʹΛऔΒΕͨ ϓϩδΣΫτʹ·ͣ3FBDU͕͋ͬͨɺ3FBDU্Ͱॻ͖ग़ͨ͠ 2 3 4
$44ͷίϯϙʔωϯτΛΔલʹ ΅͘ͷΫϏ͕ΒΕͦ͏ ࢼ༻ظ͚ؒͩͳΜͱ͔ΓΕʂʂʂʂ ※ωλͰͬͯ͢ʂʂʂ
$44ઃܭ ίʔσΟϯάڥ ̎ͭͷଆ໘͔ΒվળΛ͢Δ
$44ઃܭ
Ͳ͜ʹ࡞༻͢Δ͔Λ໌֬ʹ͍ͨ͠
ٕज़తʹ$44Λղܾ͢ΔΞϓϩʔν
طଘͷ4BTT͔ΒͷҠߦʁ ֶशίετ͕͔͔Γͦ͏ අ༻ରޮՌʁ νʔϜશһ͕͍ͭ͑ΔΑ͏ʹͳΔʁ
ઃܭʹΑΔΞϓϩʔν https://en.bem.info/
1 ಛఆͷٕज़ʹϩοΫΠϯ͞Εͳ͍ ωετΛపఈతʹഉআ͢Δɺͱ͍͏ࢥૉΒ͍͠ Ϋϥε໊Λߟ͑Δ͜ͱ͕͍͠ 1 2 Good Bad
πʔϧઃܭΛղܾͯ͘͠Εͳ͍
୯७Ͱ୭ͰཧղͰ͖Δઃܭ $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 <div className={`${CSS_ROOT}`} /> } }
͍Ϋϥε໊ͷղܾ .some-component-child-a-child-b-list { &__item { … } &__button { …
} … } BlockΛলུ͢Δ ͨΊ͚ͩͷωετ
1 ίϯϑϦΫτ΄΅ͳ͍ Ϋϥε໊͔ΒσΟϨΫτϦΛ͏ͷ͕༰қ ͍ͩ͞ʜ 1 2 Good Bad
ίϯϙʔωϯτͷཻ +4ͱ$44Ͱ͕جຊʢྫ֎͋Δʣ
ίϯϙʔωϯτͷཻ +4ͷ߹ʹ߹ΘͤͯίϯϙʔωϯτΛׂ
ྫ͑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
ྫ͑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
+4ʹΜΘΓͻΕ෬͢ MPPQͯ͠SFOEFS͢ΔUSͰίϯϙʔωϯτΛΔ QSPQTόέπϦϨʔͷΕΛҙࣝ͢Δ͜ͱͰ ύϑΥʔϚϯενϡʔχϯά͕͘͢͠ͳΔར )5.-$44ͷ߹Ͱ͚ͩͰίϯϙʔωϯτͬͯɺ͏͔ͬΓ +4࣮࣌ʹελΠϧ͕+4ίϯϙʔωϯτʹΑͬͯஅ͞ΕΔͱਏ͍
)5.-ϚʔΫΞοϓͱ+4ίʔσΟϯά Ͱࣄલ͢Γ߹ΘͤΛ͠ͱ͘ͱͤ
JNQPSUϧʔϧ $PNQPOFOUͰ҉తʹJNQPSU͞Εͨ$44ͷదԠΛېࢭ͢Δ ໌ࣔతʹJNQPSUͨ͠$44ͷΈదԠՄೳͱ͢Δ +4ͱ$44ͷͰରԠ͢Δ$44Ҏ֎ɺϞδϡʔϧ͘͠ γεςϜڞ௨$44ͷΈಡΈࠐΜͰྑ͍ 1 2
҉తͳ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 ͍
None
IUUQTHJUIVCDPNTUPSZCPPLTTUPSZCPPL
ίϯϙʔωϯτ୯ҐͰ۠ΒΕͨ αϯυϘοΫε։ൃڥ
None
γϯϓϧͳϏϧυઃఆ͕దԠ͞ΕΔɺ͍ ࣗવͱίϯϙʔωϯτ୯ҐͰͷίʔσΟϯά͕ཁٻ͞ΕΔ ίϯϙʔωϯτཆΪϓε ผ్ɺઐ༻4UPSZΛهड़ͨ͠+4ϑΝΠϧΛ༻ҙඞཁ͕͋Δ 1 Good Bad υΩϡϝϯςʔγϣϯπʔϧͱͯ͠ΈΔͱඪ४ػೳ͔ͳΓශऑ ΠϕϯτͷൃՐهड़Ͱ͖Δ 2
3 1 2
Ϗϧυ͕࣌ؒ 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', () => ( <Button onClick={action(‘clicked')}> Hello Button </Button> ));
TTTTTTTTTTTTTTTTUPSZʜ
໘ ໘ TUPSZ
> yo project:story śŕţ
ՃBEEPO TUPSZCPPLTSFBDUTUPSZCPPLBEEPOJOGP આ໌จͷϖʔδͷهड़ɺαϯϓϧίʔυ QSPQTҰཡΛࣗಈੜ͕Մೳ UVDILTUPSZCPPLSFBENF NBSLEPXOܗࣜͷ3&"%.&ϑΝΠϧΛදࣔ 1 2
ࠔΓࣄ ϝχϡʔͷ֊Խ͕Ͱ͖ͣɺ໊લͷ͚ํ ̍ϖʔδʹෳ4UPSZΛهड़͢ΔͳͲͰରԠʜ
ࠔΓࣄ ϝχϡʔͷ֊Խ͕Ͱ͖ͣɺ໊લͷ͚ํ ̍ϖʔδʹෳ4UPSZΛهड़͢ΔͳͲͰରԠʜ ୭͔ڭ͍͑ͯͩ͘͞ʂ
$44ઃܭ ίʔσΟϯάڥ ໎Θͳ͍ ໌֬ͳϧʔϧઃఆ ࣮εϐʔυΛམͱ͞ͳ͍ շదͳڥͷٻ
⾫ґཔओ
͋Μ͠Μ
ࠓޙͷ53:
4UZMF(VJEFӡ༻ϑϩʔͷཱ֬
4UZMF(VJEF 4UPSZCPPLΛ͏ 3FBDUίϯϙʔωϯτΧλϩάͱσβΠϯΨΠυϥΠϯΛ౷߹ ΤϯδχΞ͔ΒσβΠφʔɺϓϩδΣΫτʹؔΘΔਓͯ͢ʹ ͱͬͯՁͷ͋Δͷͱ͢Δ
Build Design ΤϯδχΞ σβΠφʔ
Build Design ΤϯδχΞ σβΠφʔ HJUQVTI
Build Design ΤϯδχΞ σβΠφʔ HJUQVTI +FOLJOTͰ੩తϏϧυ
Build Design ΤϯδχΞ σβΠφʔ HJUQVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠ σβΠϯ
Build Design ΤϯδχΞ σβΠφʔ HJUQVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠ σβΠϯ σβΠϯΛίʔσΟϯά ͭͭ͠ΨΠυԽ
Build Design ΤϯδχΞ σβΠφʔ HJUQVTI +FOLJOTͰ੩తϏϧυ #PPLΛνΣοΫͭͭ͠ σβΠϯ σβΠϯΛίʔσΟϯά ͭͭ͠ΨΠυԽ
ҰఆظؒͷΠςϨʔγϣϯͰ܁Γฦ͢
Build Design ΤϯδχΞ σβΠφʔ ٕज़తͳোͰ͖Δ͜ͱ Λ͍͑ͯ͘ σβΠϯͷ๏ଇੑ ίϯϙʔωϯτΛൃݟ ྫ͑Ϛʔδϯ୯ҐΑ͘ΘΕΔ৭ͳͲ
Build Design ΤϯδχΞ σβΠφʔ ϒϥϯσΟϯάؚΊΑΓ େ͖ͳࢹ͔ΒͷνΣοΫ
Build Design ΤϯδχΞ σβΠφʔ ϒϥϯσΟϯάؚΊΑΓ େ͖ͳࢹ͔ΒͷνΣοΫ ίϛϡχέʔγϣϯϋϒ
4UZMF(VJEFΛͬͯ౸ୡ͍ͨ͠Ϩϕϧ
σβΠφʔͷηϯεΛ໌Β͔ʹͯ͠ ϊϯσβΠφʔσβΠϯʹࢀՃͰ͖Δ
σβΠϯΛεΩϧͱͯ͠ଊ͑Δ
ͨ·ʹ ΤϯδχΞσβΠϯͯ͠ΈΔτΧ
Atomic Design Ebook ϞδϡʔϧࢦͷσβΠϯ ΫϥΠΞϯτɾ৫ͷઆಘ ӡ༻ϑϩʔͷߏங σβΠϯγεςϜͷ༗ޮੑ
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠