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.3k
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
680
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
220
業務システムに必要なアクセシビリティ
8845musign
1
960
業務システム狂詩曲
8845musign
4
2k
READING The Atomic Workflow
8845musign
3
650
いまさら styled components 入門した
8845musign
3
830
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.6k
チームをかえていくこと そして、泥臭さについて
8845musign
1
1.9k
感性デザインとは?
8845musign
4
1.7k
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
役立つログに取り組もう
irof
26
8.7k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Server Driven Compose With Firebase
skydoves
0
400
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.1k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
BBQ
matthewcrist
85
9.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Into the Great Unknown - MozCon
thekraken
31
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Teambox: Starting and Learning
jrom
132
8.7k
Practical Orchestrator
shlominoach
186
10k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠