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と刺さらない現場/Atomic Design and it fit ...
Search
果物リン
July 31, 2019
Technology
3
2k
Atomic Designと刺さらない現場/Atomic Design and it fit to Project or not
コンポーネント設計の話といえばAtomic Design一強な印象だけど、
Atomic Design、うまくいってますか?
果物リン
July 31, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
81
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
370
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
250
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
AWS IoT 超入門 2025
hattori
0
290
Git in Team
kawaguti
PRO
3
330
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
600
社内お問い合わせBotの仕組みと学び
nish01
1
540
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Designing for Performance
lara
610
69k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
The World Runs on Bad Software
bkeepers
PRO
71
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Faster Mobile Websites
deanohume
310
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GitHub's CSS Performance
jonrohan
1032
470k
Designing Experiences People Love
moore
142
24k
Transcript
Atomic Designと 刺さらない現場 ՌϦϯ@FruitRiin גࣜձࣾΏΊΈ 2019/07/31 Roppongi.vue #2
Atomic Designͬͯ·͔͢ʁ
Atomic Design ͏·͍ͬͯ͘·͔͢ʁ
自己紹介 • ՌϦϯ@FruitRiin • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • ϦʔυΤϯδχΞΒ͍͠ •
Vue͍͍ͧ • Ionic/Vue࠷ۙਪ͠
Atomic Designといえば Α͘ݟΔͭ
ϞμϯϑϩϯτΤϯυઃܭ ʹ͍͍ͩͨAtomic Designઆʁ
None
Atomic Designとは • σβΠϯΛݪࢠ͔ΒΈཱͯΔ • ڞ௨Ͱ͑Δࢠɾ༗ػମͱͯ͠࠶ར༻͕ಛ • શମͱͯ͠ͷ౷ҰײΛੜΈग़͢ σβΠϯγεςϜͷͻͱͭ
デザインシステム? “σβΠϯγεςϜͱɺσβΠϯͷݪଇɺ֓೦ɺΨΠυɺίϯ ϙʔωϯτͳͲɺσβΠϯʹؔ͢Δ͋ΒΏΔϧʔϧΛఆΊͨͷ ͷ͜ͱΛݴ͍·͢ɻ” “ελΠϧΨΠυίϯϙʔωϯτϥΠϒϥϦʢύλʔϯϥΠϒϥ ϦʣσβΠϯελΠϧͷҰ෦ʹ͋ͨΓ·͢ɻ” σβΠϯγεςϜΛਖ਼͘͠ཧղ͠Α͏ɻ࡞Γํɾࢀߟࣄྫͷ·ͱΊ ʕʕ8FC%FTJHO5SFOET
デザインシステムのメリット • Ұ؏ͨ͠σβΠϯΛ࡞ΕΔΑ͏ʹͳΔ • νʔϜͰͷσβΠϯ੍࡞ΛεϜʔζʹ • σβΠφʔҎ֎ͷਓͱڞ௨ೝࣝΛ࣋ͭ
ຊདྷɺΤϯδχΞͷͨΊͷͷͰͳ͍ ʢΤϯδχΞʹͱ͍͍ͬͯ͢ͷͰ͋Δʣ
࣮Atomic DesignͷݪஶͰ… • ࣮ʢσʔλϩδοΫͷʣʹ৮Ε͍ͯͳ͍ • ͨ·ͨ·ίϯϙʔωϯτͱ૬ੑ͕ྑ͔͚ͬͨͩ
刺さる現場 • ܧଓ։ൃɺن͕େ͖͍ • σβΠφʔ͞Μͱͷ ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ • σβΠφʔ͞Μ͕ ίʔυΛར༻ͯ͠σβΠϯ͢Δ
刺さらない現場 • ܧଓ͠ͳ͍ɺن͕খ͍͞ • σβΠφʔͱΤϯδχΞͷڑ͕ԕ͍ • σβΠφʔ͕Atomic DesignΛ࠾༻ͯ͠ͳ͍
刺さらない時どうすべきか? • Atomic DesignΛ࠾༻͠ͳ͍ • ࣗͰίϯϙʔωϯτΛ͚Δ • ͍ճ͞ͳ͍ͱ͖ີʹͭͬͯ͘ྑͦ͞͏ • ͍·Θͨ͘͠ͳͬͨΒΓग़ׂͭͭ͠
• ݟ௨͕͠ѱ͘ͳͬͨΒΓग़ׂͯ͠ • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷׂͱศར
Appendix:私のディレクトリ分け • ΈͲ͜Ζ • ڞ௨ͳͭͱີ݁߹ͳ͚ͭΔʁ • ̎͘Β͍ωετͨ͠΄͏͕͚͍͢ʁ
まとめ • Atomic Designͦͷͷ σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰͳ͍ • ݱʹΑͬͯ͞Βͳ͍͜ͱ͋Δ •
ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ