みなさん、こんにちは。どんぶラッコです。
今日は AtomicDesign の概念についてご紹介します！
AtomicDesign は Vue.jsなどの近代フレームワークでよく使われる概念ですね！
ということで、 Atomic Design の概念を例え話を交えながら理解していきましょう！
Atomic Design とは？
まずは Atomic Design とは？
設計思想の一つ。
Pagesはコンポーネントの集合体であるという思想。
単位が大きい順に
Templates > Organisms > Molecules > Atoms
…まあこれだけだとわかりづらいですよね。
ということで、電卓を例にしてみなさんとAtomicDesignの考え方を学んでいきましょう！
電卓を例にAtomic Designを理解する
まず、ここになんの変哲もない電卓があります。
これを要素で分類してみましょう！
すると、「計算結果を表示する画面」と「キーパッド」の２種類に分類できますよね
こんな風に「意味毎に分類」をしていってみましょう！
次にどんな風に意味毎に分類ができるか？と考えるとキーパッドを
- 数字のキーパッド郡
- 計算式のキーパッド郡
に分類できますよね
さらに、それぞれのキーパッド郡は一つひとつのキーに分解できますよね
はい、ここで全体の概念図をお見せしちゃいます！
このように、分解できない最小単位がAtomsであり、Atomsの集合体はMolecules, Moleculesの集合体はOrganisms, そしてOrganismsの集合体はTemplatesです。
そしてこれら一つひとつの総称が Component(コンポーネント)と呼ばれるわけです。
概念が理解できたでしょうか？
概念さえ抑えておけば、理解が進むと思います！
