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
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
2
560
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
構文解析器入門
ydah
7
2k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
Jakarta EE Meets AI
ivargrimstad
0
570
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
リッチエディターを安全に開発・運用するために
unachang113
1
350
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Language of Interfaces
destraynor
158
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
185
16k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
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