Atomic Design
現在開発中のサービスにおいて
既存のAtomic Design に沿ったコンポーネント設計をしております。
Atomic Design がよくわからなかったのでメモしていきます。
そもそもatomic Design とは
Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atomic design はデザインシステムを構築するための手段(方法論)です。大きさのレベルに応じて5つの要素に分類できます。
Atoms, Molecules, Organisms, Templates, Pages それらは Atoms, Molecules, Organisms, Templates, Pages の五つです。
つまり、Atomic DesignはUIを構成するコンポーネントを５つのコンポーネントレベルに分け、
その五つを組み合わせることで全てのUIを表現する手法のことです。
(参照: https://bradfrost.com/blog/post/atomic-web-design/)
単一責任の法則
「モジュールが持つ責務は一つにすべき」という考え方のこと。
Atomic Design でいうところの Atomに一つの責務を置き、それらを組み合わせてアプリケーションを開発する。
分割統治法
「大きな課題を小さく分割することで課題解決をしていく」という考え方。
最近コンポーネント設計をしていて、
単一責任の法則も分割統治法も「コンポーネント一つのタスクを最小限にして問題解決、リファクタしやすくする」
ための基本の考え方みたい。
哲学っぽくて面白い。。
参考
https://zenn.dev/offers/articles/20220523-component-design-best-practice
