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
42
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
88
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
クラウド食堂とは?
hiyanger
0
130
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
150
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.5k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.3k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.1k
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
240
E2Eテスト自動化入門
devops_vtj
1
110
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Optimizing for Happiness
mojombo
377
70k
The Invisible Side of Design
smashingmag
299
50k
We Have a Design System, Now What?
morganepeng
51
7.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Scaling GitHub
holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Applications with DynamoDB
mza
93
6.2k
Automating Front-end Workflow
addyosmani
1369
200k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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ͦͷͷ σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰͳ͍ • ݱʹΑͬͯ͞Βͳ͍͜ͱ͋Δ •
ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ