コンポーネント指向

Vue であろうと React であろうと、コンポーネント指向という開発手段が主流になっています。コンポーネント指向とは一つの様々な機能やデザインからなるサイトが、同じ機能もしくはデザインの部分を一つの部品とし、それらの部品を組み立てることによって構成される開発のことです。

バックエンドではオブジェクト指向が主流だと思いますが、フロントエンドだと見た目から直感的に切り分けやすいコンポーネント指向が開発の効率を大幅に上げることが可能です。

Atomic Design

その中で、コンポーネント指向の一つの設計方法として Atomic Design が上げられます。

Atomic Design は UI の要素を

原子（Atoms）

分子（molecules）

有機体（organisms）

テンプレート（Templates）

ページ（Pages）

の5つの階層に分け、最終的なUIとUIの基礎となるものを同時に作成する設計方法で、アメリカのWebデザイナーブラッド・フロスト氏によって提唱されました。

イメージとして以下の図がわかりやすいと思います。

（出典：https://qiita.com/croco_works/items/e34d1b0c0e50b37031d7）

ここで一つの疑問が思い浮かぶと思います。それぞれどの粒度が atoms、molecules、organisms、templates、pages になるのか?

粒度の決め方

実際には Atomic Design のそれぞれの階層の粒度に関して明確な定義があるわけではない。言い換えれば、これから進めるプロジェクトの粒度は自分もしくはチーム自身で決めることができます。

ゆえに、Atomic Design で開発を進めるときは最初の段階でデザイナーとプログラマーが一緒に話し合って、お互いの納得のいくような階層の粒度にして設計書を作るのが最も効率的である。

とはいえ、指標がないとなかなか決めるのも難しいですので、僕からそれぞれの階層の定義をここで提示して、粒度決めに役立てればいいなっと思っています。こちらはあくまでも自分がネットで情報を収集して、自分で考えて定義したものなので、一つの考え方として受け止めてください。

原子（Atoms）　　　　　　　それ以上UIとしての機能性を破壊しない最小要素

分子（molecules）　　　　　複数の atoms が一緒になり最小限の機能を構成するグループ

有機体（organisms）　　　　インターフェイス上明確な区分を形成するために複数の molecules が集まったグループ

テンプレート（Templates）　データを流し込む前の organisms から構成されるサイトの枠組み

ページ（Pages）　　　　　　templatesにデータを流し込んだサイトの完成品