Atomic Design

[pandanoir]

Atom → Molecules → Organism → Template → Page

Web componentはatomか。

Template自体にはコンテンツは入ってない。コンテンツを入れて実際に表示されるのがpage。つまり、(Atom → Molecules → Organism → Template) → Pageという感じ。MoleculesとOrganismは割と曖昧で場合によるきがする。そこまではっきりとした境目はなさそう。

ちなみに、ページを実際に作るときは Page -> Template -> Organism -> Molecules -> Atom の順に分割するほうが自然だから、Atomic Design ではなく HTML Parts を使おうという主張もある

[pandanoir]

https://frasco.io/atomic-design-molecules-organisms-dc937b5989

やっぱりmoleculesとorganismを明確に分ける方針なんてなさそう。ただし、この記事のなかでは「独立できるもの」は典型的なorganism(バナーなど)、「それ単体では意味をなさないもの」は典型的なmolecule(ナビゲーションやシェアボタン一覧など)としている。

[pandanoir]

https://a-suenami.hatenablog.com/entry/2019/04/29/173415

Atomとmoleculeの間では迷う必要ないと思っていたが、デザイナの視点とFEエンジニアの視点だと違うっぽいな。個人的にはatomはそれ以上分割できないReactコンポーネント(あるいはweb component)みたいな感覚だけどちゃうのかも。