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
43k
株式会社Lang-8 会社案内資料 / We are hiring 2023
lang8
0
750
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
180
悲劇のエース スタルヒン
lang8
1
1.7k
Taiwan (weird) Superstition
lang8
0
1.7k
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
180
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
100
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.8k
Rubyと自由とAIと
yotii23
6
1.8k
PEPCは何を変えようとしていたのか
ken7253
3
290
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Navigating Team Friction
lara
183
15k
Music & Morning Musume
bryan
46
6.4k
Code Reviewing Like a Champion
maltzj
521
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Speed Design
sergeychernyshev
27
810
Become a Pro
speakerdeck
PRO
26
5.2k
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