AtomicDesignの説明と所感

Atomic Design の説明と所感 ๺۝भߴ౳ઐ໳ֶߍ೥ ۼాल࠸(@kubo_programmer)

ࣗݾ঺հ ๺۝भ޻ۀߴ౳ઐ໳ֶߍੜ࢈σβΠϯ޻ֶՊ৘ใγεςϜίʔε̐೥ੜ ຊ໊͸ʮۼాल࠸ ΫϘλώσϠ ʯ ٕज़7VF 3FBDU 5XJUUFS*%LVCP@QSPHSBNNFS $"UFDIKPCΠϯλʔϯ

My Hobby ・コンピュータ研究部・コン研と略称で呼ばれることが多い  ・部員数: 57名・活動・プログラミング班  (開発,競プロ,ハッカソン,etc) ・イラスト班
(ディジタルイラスト,デザイン,etc)

My Assignment Unistore Preact

My Assignment Unistore Preact 念願の Qiitaのトレンド入り

免責事項 "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 限定的汎用的

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)

AtomicDesignの説明と所感

AtomicDesignの説明と所感

kubo-hide-kun

More Decks by kubo-hide-kun

Other Decks in Programming

Featured

Transcript