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.5k
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
990
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
240
業務システムに必要なアクセシビリティ
8845musign
1
1k
業務システム狂詩曲
8845musign
4
2.1k
READING The Atomic Workflow
8845musign
3
710
いまさら styled components 入門した
8845musign
3
900
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2.1k
感性デザインとは?
8845musign
4
1.8k
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
310
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
効率的な開発手段として VRTを活用する
ishkawa
0
140
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
ニーリーにおけるプロダクトエンジニア
nealle
0
840
5つのアンチパターンから学ぶLT設計
narihara
1
170
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
880
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Hack Claude Code with Claude Code
choplin
4
2.1k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
830
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Producing Creativity
orderedlist
PRO
346
40k
Code Review Best Practice
trishagee
69
18k
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Being A Developer After 40
akosma
90
590k
Bash Introduction
62gerente
613
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Gamification - CAS2011
davidbonilla
81
5.4k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠