JavaScript

AtomicDesignの概念を電卓を使って理解しよう!

みなさん、こんにちは。どんぶラッコです。

今日は AtomicDesign の概念についてご紹介します!

AtomicDesign は Vue.jsなどの近代フレームワークでよく使われる概念ですね!

ということで、 Atomic Design の概念を例え話を交えながら理解していきましょう!

Atomic Design とは?

まずは Atomic Design とは?

設計思想の一つ。
Pagesはコンポーネントの集合体であるという思想。

単位が大きい順に
Templates > Organisms > Molecules > Atoms

…まあこれだけだとわかりづらいですよね。

ということで、電卓を例にしてみなさんとAtomicDesignの考え方を学んでいきましょう!

電卓を例にAtomic Designを理解する

まず、ここになんの変哲もない電卓があります。

これを要素で分類してみましょう!

すると、「計算結果を表示する画面」と「キーパッド」の2種類に分類できますよね

こんな風に「意味毎に分類」をしていってみましょう!

次にどんな風に意味毎に分類ができるか?と考えるとキーパッドを

  • 数字のキーパッド郡
  • 計算式のキーパッド郡

に分類できますよね

さらに、それぞれのキーパッド郡は一つひとつのキーに分解できますよね

はい、ここで全体の概念図をお見せしちゃいます!

このように、分解できない最小単位がAtomsであり、Atomsの集合体はMolecules, Moleculesの集合体はOrganisms, そしてOrganismsの集合体はTemplatesです。

そしてこれら一つひとつの総称が Component(コンポーネント)と呼ばれるわけです。


概念が理解できたでしょうか?

概念さえ抑えておけば、理解が進むと思います!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です