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
AtomicDesignの説明と所感
Search
kubo-hide-kun
September 20, 2019
Programming
0
1.6k
AtomicDesignの説明と所感
CyberAgent様のインターン中の勉強会で使用した資料です。
特別に許可をいただき公開に至りました。
kubo-hide-kun
September 20, 2019
Tweet
Share
More Decks by kubo-hide-kun
See All by kubo-hide-kun
CA BASE NEXT でスクロールに 連動したUIを構築した話
kubo_programmer
1
400
ハイレベルな環境こそが最高である 科学的なお話
kubo_programmer
0
130
SQL Injection
kubo_programmer
0
76
IPアドレスとは何か?
kubo_programmer
0
2.3k
クライアント/サーバーシステム
kubo_programmer
0
7.4k
DHCPサーバ
kubo_programmer
0
2k
How to make Readable Slide
kubo_programmer
0
67
Moonblock入門
kubo_programmer
2
790
TCP/UDPの違い
kubo_programmer
4
3.2k
Other Decks in Programming
See All in Programming
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
document.write再考
brn
5
2.5k
Open Source Swiftc Workshop
kitasuke
1
180
受託開発でGitLab CI を活用していく
xiombatsg
1
120
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
A designer walks into a library…
pauljervisheath
199
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Rails Girls Zürich Keynote
gr2m
91
13k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Six Lessons from altMBA
skipperchong
19
2.9k
GraphQLとの向き合い方2022年版
quramy
28
12k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Transcript
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
ࣗݾհ भۀߴઐֶߍੜ࢈σβΠϯֶՊใγεςϜίʔε̐ੜ ຊ໊ʮۼాल࠸ ΫϘλώσϠ ʯ ٕज़7VF 3FBDU 5XJUUFS*%LVCP@QSPHSBNNFS $"UFDIKPCΠϯλʔϯ
My Hobby ・コンピュータ研究部 ・コン研と略称で呼ばれることが多い ・部員数: 57名 ・活動 ・プログラミング班 (開発,競プロ,ハッカソン,etc) ・イラスト班
(ディジタルイラスト,デザイン,etc)
My Assignment Unistore Preact
My Assignment Unistore Preact 念願の Qiitaのトレンド入り
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
免責事項 "UPNJD%FTJHOͰ͕͢ɺ ࣗͦΕΛͬͨϓϩδΣΫτʹճ͔͠ ΞαΠϯ͞Εͨܦݧͳ͍ͷͰ ٕज़తͳϛε͕͋ΔՄೳੑ͕ߴ͍Ͱ͢
What is Atomic Design
What is Atomic Design Atoms
(アトム/原子) Molecules (モルキュール/分子) Organisms (オーガニズム/組織) Templates (テンプレート) Pages (ページ)
What is Atoms Atoms (アトム/原子)
What is Molecules Molecules (モルキュール/分子)
What is Organisms Organisms (オーガニズム/組織)
What is Templates & Pages Templates & Pages
What is Features 限定的 汎用的
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
What are the merits ? 再利用性が高まる
デザインが統一される デザイナーに優しい 保守性が高まる
再利用性が高まる 自明
デザインに統一感が生まれる 複数の人がバラバラで作成しても使用する部品は同じ (規模が大きいほど有用そう)
デザイナーに優しい デザイナーじゃないから分かんない()
保守性が高まる コンポーネントを修正した場合、 その修正がそれを依存しているコンポーネントにも伝播
個人的な使い方
Story book を導入する ページに反映させるまでの手順が多いので これがないとコンポーネントの変更の確認が困難
Templates を使っていない 個人的には使う理由は見つかりませんでした. そもそもあれって何を実装するんですかね?
複雑になっても汎用性を重要視する props地獄になるので Atomsに機能や状態を持たせたい気持ちも分かるが そうすると汎用性がなくなりAtmicDesignの意味がなくなる
短期的な開発ではAtomicDesign使わない 実装量が大幅に増えるので 長期的なプロジェクトでのみ使用
My Important point
My Important point 汎用性のあるコンポーネントを作成し再利用
My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢
My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢 実装量が多くなるのでそれに見合うのかを考える
Thank you!! भߴઐֶߍ ۼాल࠸(@kubo_programmer)