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.7k
エンジニアからみた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
41k
株式会社Lang-8 会社案内資料 / We are hiring 2023
lang8
0
690
Lang-8_12th_Anniversary
lang8
3
1k
Lang-8会社案内資料 / We are hiring
lang8
14
410k
OSSを作って公開した話
lang8
1
1.7k
個人開発のススメ
lang8
0
1.7k
メイプルストーリーMの課金ポイントまとめ
lang8
0
170
悲劇のエース スタルヒン
lang8
1
1.6k
Taiwan (weird) Superstition
lang8
0
1.7k
Other Decks in Programming
See All in Programming
offers_20241022_imakiire.pdf
imakurusu
2
360
qmuntal/stateless のススメ
sgash708
0
120
Tuning GraphQL on Rails
pyama86
2
1k
役立つログに取り組もう
irof
26
8.7k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
Piniaの現状と今後
waka292
5
1.5k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Documentation Writing (for coders)
carmenintech
65
4.4k
Designing for Performance
lara
604
68k
For a Future-Friendly Web
brad_frost
175
9.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Writing Fast Ruby
sferik
626
61k
Fireside Chat
paigeccino
32
3k
Teambox: Starting and Learning
jrom
132
8.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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