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
エンジニアからみたAtomic Designとコンポーネント指向開発
Search
Lang-8
April 19, 2019
Programming
0
1.8k
エンジニアからみたAtomic Designとコンポーネント指向開発
Lang-8
April 19, 2019
Tweet
Share
More Decks by Lang-8
See All by Lang-8
株式会社Lang-8 会社案内資料 / We are hiring 2022
lang8
2
44k
株式会社Lang-8 会社案内資料 / We are hiring 2023
lang8
0
800
Lang-8_12th_Anniversary
lang8
3
1.1k
Lang-8会社案内資料 / We are hiring
lang8
14
410k
OSSを作って公開した話
lang8
1
1.7k
個人開発のススメ
lang8
0
1.8k
メイプルストーリーMの課金ポイントまとめ
lang8
0
190
悲劇のエース スタルヒン
lang8
1
1.7k
Taiwan (weird) Superstition
lang8
0
1.8k
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
15
4.6k
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
Porting a visionOS App to Android XR
akkeylab
0
680
AIともっと楽するE2Eテスト
myohei
8
3k
NPOでのDevinの活用
codeforeveryone
0
900
効率的な開発手段として VRTを活用する
ishkawa
0
160
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
460
140k
For a Future-Friendly Web
brad_frost
179
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Done Done
chrislema
184
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.7k
Transcript
ΤϯδχΞ͔ΒΈͨAtomic Designͱ ίϯϙʔωϯτࢦ։ൃ ࠇాֶਓ - Manato Kuroda
ࣗݾհ
ࠇాֶਓ - Manato Kuroda Rails Developer Frontend / Design /
React.js / Vue.js / Angular / Functional Programming ... Black Mirror / Into to Wild / The weeknd / Ոܥ ϥʔϝϯ / ਂಛٸ / ͷͷ͚ඣ ...
͓͢Δ͜ͱ • Atomic Designͬͯͳʹ • ίϯϙʔωϯτࢦ։ൃͬͯͳʹ • Atomic Design &
ίϯϙʔωϯτࢦ։ൃͬͯΈͨΒͲ͏ͩͬͨͷ
Atomic Designͬͯͳʹ
Web։ൃͷݱͰى͖ͯͨ
“ͳΜ͔ͩ࠷ۙɺUIͷόά͕ଟ͍ͳ͊”
“͜ͷϘλϯͱ͜ͷϘλϯݟͨಉ͚ͩ͡Ͳɺ࣮͕ඍົʹҧ ͏Μ”
ͳʹ͕͓͖͔ͯͨ
• σβΠφʔಉ࢜ͰUIίϯϙʔωϯτͷύλʔϯτϯϚ φ͕ඍົʹҧ͏ • ΤϯδχΞಉ࢜ͰUIίϯϙʔωϯτΛॏෳ࣮ͨ͠Γɺ ׂͷํ͕ҧ͏
Ͳ͏ͳΔ͔ʁ
• UIͷҰ؏ੑ͕ࣦΘΕΔ • σβΠϯͱ࣮ʹ༨ܭʹ͕͔͔࣌ؒΔ • ಉ͡Α͏ͳίʔυ͕େྔੜ࢈
ղܾ͢ΔͨΊʹɺతΛܾΊΔ
• ෳͷσβΠφʔ & ΤϯδχΞ͕͍ͯҰ؏ੑͷ͋ΔσβΠϯΛఏڙ͢Δ • ຖճ࣮͢ΔͷͰͳ͘ɺ࠶ར༻ੑͷ͋ΔUIΛ࡞࣮ͬͯεϐʔτΛ͋͛ Δ Ұ؏ੑͷ͋ΔUIɺσβΠϯΛఏڙ͢Δ
Atomic Design
Atomic Designͱখ͍͞UIίϯϙʔωϯτΛΈ߹ΘͤͯΑΓ େ͖ͳίϯϙʔωϯτΛ࡞͍ͬͯͨ͘ΊͷσβΠϯɾϑϨʔϜ ϫʔΫ
5ͭͷߏཁૉ͔ΒͳΔ
None
• Atoms ◦ ButtonɺFontͱ͔͜ΕҎ্ׂͰ͖ͳ͍࠷খ୯Ґ • Molecules ◦ 2ͭҎ্ͷAtoms͔Βߏ͞ΕΔίϯϙʔωϯτ • Organisms
◦ AtomsͱMolecules͔Βߏ͞ΕɺͦΕࣗମͰ݁͢ΔίϯςϯπΛఏڙ • Templates ◦ ϖʔδͷܗɻ۩ମతͳίϯςϯπͨͳ͍ • Pages ◦ TemplatesʹίϯςϯπΛ͋ͯΊͨͷ
None
None
None
త
• Ұ؏ੑͷ͋ΔUIΛఏڙ͢Δ • UIίϯϙʔωϯτͷཻͷڞ௨ೝࣝΛ͢Δ ◦ ڞ௨ೝࣝΛͭ͜ͱͰίϛϡχέʔγϣϯ͕ԁʹ
ίϯϙʔωϯτࢦ։ൃͬͯͳʹ
ίϯϙʔωϯτࢦͱ
ϓϩάϥϜͷ෦ΛΈ߹ΘͤͯιϑτΣΞΛ։ൃ͢ΔελΠϧ
ͳͥίϯϙʔϯωϯτࢦͰ։ൃ͢Δͷ͔
• ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ • ෆ۩߹ͷϦεΫɾϙΠϯτΛݮΒ͢͜ͱ͕Ͱ͖Δ • ϝϯςφϯε͕͘͢͠ͳΔ • ղܾ͢Δ͕খ͘͞ͳΔ
ίϯϙʔωϯτઃܭͷجຊ
• ΧϓηϧԽ͞Ε͍ͯΔ • ஔ͖͑Մೳ • ࠶ར༻ੑ͕͋Δ • ίϯϙʔωϯτͱผͷίϯϙʔωϯτΛΈ߹ΘͤΔ͜ ͱ͕Ͱ͖Δ
Atomic Design & ίϯϙʔωϯτ ࢦ։ൃͬͯΈͨΒͲ͏ͩͬͨ ͷ
Ͳ͏͔ͬͨ
• React.js • Flow ◦ ܕΛఆٛͯ͠ɺ͢PropsΛ໌֬ʹ • CSS in JS
◦ Styled-componentͰ҆શͳείʔϓཧ • Atomic Design ◦ AtomɺMoleculeɺOrganism·ͰͰ͚Δ • StoryBook ◦ Sample
Α͔ͬͨ͜ͱ
• มߋʹڧ͍UIίϯϙʔωϯτΛ࡞Εͨ • ৽نը໘ͷ࣮εϐʔυ্͕͕ͬͨ • ςετ͕͍͢͠ͷͰϝϯςφϒϧʹͳͬͨ • cssΒͳͯ͘αΫοͱ៉ྷͳUI࡞ΕΔΑ͏ʹͳͬͨ
ͭΒ͔ͬͨ͜ͱ
• ύλʔϯ͕૿͑ग़͢ͱɺؔ৺ͷ͕͘͠ͳΔ ◦ ୯ҰͷݪଇΛकΔ͜ͱ (Single Responsibility Principle) • ModulesͱOrganisms૪ •
มͳ࣮ʹ͢Δͱ٧Ή • σʔλΛड͚͢ωετߏ͕ਂ͘ͳΔ (Reactͷ͓)
Atomic DesignΛݫີʹकΔඞཁͳ͍
“ڞ௨ೝࣝΛͭ͜ͱͰίϛϡχέʔγϣϯΛԁ ʹɻࣗͨͪͰΞϨϯδͯ͠Α͍”
·ͱΊ
៉ྷͳUIΛఏڙ͢Ε Ϣʔβʔhappy