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
1.9k
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
30
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
83
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
730
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
110
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
880
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
podman_update_2024-12
orimanabu
1
260
UI State設計とテスト方針
rmakiyama
2
300
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
160
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
.NET 9 のパフォーマンス改善
nenonaninu
0
440
Qiita埋め込み用スライド
naoki_0531
0
350
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
ハイテク休憩
sat
PRO
2
120
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
210
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
1
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building an army of robots
kneath
302
44k
Building Adaptive Systems
keathley
38
2.3k
Visualization
eitanlees
146
15k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Designing Experiences People Love
moore
138
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Faster Mobile Websites
deanohume
305
30k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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ͦͷͷ σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰͳ͍ • ݱʹΑͬͯ͞Βͳ͍͜ͱ͋Δ •
ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ