Atomic Designの段階の分類の指針について考えていること(2020/6/10バージョン)

概要

掲題についてだらだらと考えたことを表にまとめたのでメモに残しておきます。

大筋としてはそんなに間違えていないと思いますが、兼業フロントエンジニアなのであまり信じすぎないでください…。

前提

nuxt.js

分類とその説明

分類	該当フォルダ	説明
atoms	components/atoms	原則一つのタグで表現できるもの。 標準のHTMLタグの見た目を装飾したり、 なんらかのアクションのトリガーを追加したものになる傾向が強い。
molecules	components/molecules	2つ以上のタグで構成される意味のあるまとまり。 API呼び出しやvuexの更新といった外部の状態を直接操作するような振る舞いはない。 カルーセルやバリデーション込みの入力フィールドなどが該当する。
organisms	components/organisms	2つ以上のタグで構成される意味のあるまとまり。 フォームやモーダル、テーブルが該当する。 コンポーネントを組合せて共闘動作させるための状態を持つことができる。 外部の状態を操作する振る舞いを持つことができる。 状態や振る舞いを持ってなくてもorganismsとして成立する 作成するコンポーネントをどれに分類するかで一番悩むもののはず。。
templates	components/layouts	organisms/molecules/atomsを配置する。 nuxtのlayoutsと混同しないように注意。 乱暴だが、いわゆるプレゼンテーショナルコンポーネントの考え方に近い。 単体で完結したorganismsのみで構成される場合、省略可（になるはず）
pages	pages	templateに、状態を流し込むのが役割。 これも乱暴だがコンテナコンポーネントの考え方に近い。 単体で完結したorganismsのみで構成される場合、 ただtemplatesを呼び出すだけになるのでその場合はtemplatesを省略可。

特徴と段階のマトリクス

項目	atoms	molecules	oarganisms	templates	pages	備考
振る舞い	ない	ない	ある	ない	ある	一見、moleclesに見えても振る舞い（ビジネスロジック）があるならorganismsにする
分割可否	不可	可	可	可	可	これ以上分割できないものはatoms。 ただし、他のatomsのベースになりうるatomsはあり得るかもしれない。 例えばボタンコンポーネントに共通して備えさせたいpropsを定義するためのスーパータイプなど
標準のHTMLタグの数	原則1つ	2つ以上	2つ以上	2つ以上	2つ以上
コンポーネント組合せ数	n/a	2つ以上	2つ以上	2つ以上	2つ以上