Atomic Designについて勉強してみた② (Atoms)

今回は、Atomic designのとりわけ重要な要素であるAtomsについて書いていきたいと思います。

概要

Atomsとは、Atomic Designの5つの粒度の中でも、最小のコンポーネントです。

出典元：https://atomicdesign.bradfrost.com/chapter-2/　

例としては
・テキスト
・ボタン
・テキストボックス
などが挙げられます。
これを組み合わせて、MoleculesやOrganismsなど、より大きいコンポーネントを作成していきます。
Atoms単体では、ユーザーの関心ごとに対しての機能は持ちません。

役割

再利用性の高いコンポーネントとしてAtomsを定義し、共通で使用することによってデザインの統一を行うことができます。
再利用性を高めるためには
・propsで要素を受け取れるようにしておく
・なるべく特定箇所依存のスタイルを指定しない
等が考えられます。

分割の基準

自分たちのプロジェクトでは、Element-Plus( https://element-plus.org/en-US/ )というコンポーネントライブラリを使用していたため、1つのAtomsに1つ以上のタグは書かない、という分け方をしていました。
他には、
・ビジネスロジックを書かない(emit等でアクションを親コンポーネントに受け渡しするだけ)
などの基準を設けるとわかりやすいかと思います。

Atomsを作る際に気をつけなければいけないのは、UIとして最低限の機能を失わせないことです。
テキストを例に挙げてみます。
「プログラミング」
という単語をこれ以上分割してしまうと、文字としては成立しますが、意味自体は失われてしまうはずです。
それと同じように、UIとしての意味が成立するように注意する必要があります。

参考文献

• 五藤佑典, 「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」, 技術評論社, 2018

• Atomic Design by Brad Frost https://atomicdesign.bradfrost.com/