勘違いの Atoms

Atomic Design でコンポーネント構成を考えるとき、『Molecules と Organisms の使い分けってどーすんの?』的な話が多くて、Atoms に関しては『UIの最小単位です』みたいに軽く流されることが多い。

でもこの『最小単位』ってなかなか難しい。
ちょっとテキトーな説明だと『要はHTMLのタグです』みたいに書かれたりしてるんだけど、これ正しいんですかね?
なんか勘違いのような気がするんですよね。

まあ原著で例として挙げてるのも “LABEL”、”INPUT”、”BUTTON” とかHTMLの要素ばかりなので、そういう説明になっちゃうのもわかる気もする。
でもこれを鵜呑みにして Atoms を作ろうとすると、Vue だったらこんなものを想像しちゃうわけです。

<templates>
  <p>
    <slot/>
  </p>
</templates>

けどホントに Atoms がこういうものなら、コンポーネントなんか作らないで <p> タグ書いておけばよくない?

<input> とかだったらイベントハンドラがあるしコンポーネント化する意味があるんじゃないか。というのも考えるけど、Atoms って個別のロジックは上位コンポーネントからもらって $emit(‘event’) するように作るのが定石のはず。

なので <input> を Atoms として作ったときのイベントハンドラってこんな感じになるかと。

methods: {
  handler(event) {
    this.$emit('eventName', event);
  }
}

これもうコンポーネントに固める意味ないよね。
<input> タグ書いて直接イベントハンドラ渡しときゃいいじゃん。

なんでこうなるのかって言うと『要はHTMLのタグです』てのが間違いなんじゃないかなと。
あんま英語強くないので間違っているかもだけど、原著に書いているのは

『HTMLのタグはAtomの条件に合致する』

ということであって、

『内包する要素が単一のHTML要素であるべき』

という話ではないんじゃないかと。
外側から見て『機能を満たす最小単位』であるべきだ。ということかなと思ってます。

If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

http://atomicdesign.bradfrost.com/chapter-2/#atoms

当たり前じゃないかと言われそうだし、そう指摘されてもその通りなんだけど、これが原著だとちょっとわかりにくいなーと思った次第。

コメントを残す

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