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
870
業務システムの銀の弾丸? メモ機能を考察する
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
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.5k
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
240
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
400
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
690
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
450
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.1k
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.1k
Optimizing JRuby 10
headius
0
350
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
State of Namespace
tagomoris
4
1.8k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.5k
Rails Girls Zürich Keynote
gr2m
94
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Language of Interfaces
destraynor
157
25k
Statistics for Hackers
jakevdp
798
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
Gamification - CAS2011
davidbonilla
81
5.2k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠