Atomic Design(アトミックデザイン)とは
アトミックデザインとは、フロントエンドライブラリーであるAngular、Vue、Reactでコンポーネント単位で開発する際に、最も小さい単位からコンポーネントを設定し、コードの再利用を最大化する方法論です。
Atomic Designは原子（Atoms）、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）に分けられ、効果的なインターフェースシステムを作ります。
📎Atoms(原子)
- 最も小さいコンポーネントです。
- 様々なstate、つまり状態、色、フォント、アニメーションなどの抽象的な要素を含むことができます。
- 代表的なコンポーネントには、ボタン（Button）、テキスト（Text）、アイコン（Icon）などがあります。
📎Molecules(分子)
- 2つ以上の原子（Atoms）で構成されています。
- 一つの単位として共に動作するUIコンポーネントの単純なグループです。
- 代表的なコンポーネントには、入力フォーム（Input Form）、ナビゲーション（Navigation）、カード（Card）などがあります。
📎Organism(有機体)
- 分子を結合して有機体を形成します（分子にならない原子も含めることができます）。
- インターフェースがどのように見えるかを始める段階です。
- 代表的なコンポーネントには、入力フォーム（Input Form）と一緒にヘッダー（Header）を包むことや、カード（Card）を管理するグリッド（Grid）などがあります。
📎Templetes(テンプレート)
- 複数の有機体の集合です。
- デザインを確認し、レイアウトが実際に機能しているかを確認する段階です
- 代表的なコンポーネントには、複数のカードとグリッドを組み合わせたテンプレート（ヘッダー、メイン、フッターなど）があります。
📎Page(ページ)
- テンプレートを使用して配置し、コンポーネントを描いて表示します。
- 完成した1ページです。
メリット
・デザインシステムの構成においてガイドラインとして活用することができます。
・アプリケーションと分離し、コンポーネントを公開しテストすることができ、スタイルガイドのようなツールで見ることができます。
・コンポーネントの再利用性が極大化されます。
デメリット
・依存性と複雑さが厄介です。
例えば、Aで使用するヘッダーに変更が必要な場合、
- ヘッダーコンポーネントにpropsを追加して変更を適用します。
- 新しいヘッダーコンポーネントを作ります。
1つ目の方法で解決する場合、どこまでpropsを定めるべきかが不明確です。
2つ目の方法で解決する場合、コンポーネントが無限に増える可能性があり、再利用性が低下し、どのような機能をするかを明確に区別するのが難しくなります。
・分子、原子、有機体、テンプレート、ページの5段階を明確に分けるのが難しいです。
結論
全体的なUIデザインが大きく変更される可能性が低い場合、アトミックデザインを適用することが有益だと考えます。しかし、これはチームに新しい方法を導入することであり、その方法について十分な学習が必要です。正しく理解されない場合、誤解と混乱を引き起こす可能性があります。したがって、「これは原子か、分子か」といった議論よりも、コンポーネントを概念的な単位で構成し、最小単位のコンポーネントの再利用により重点を置くことが重要だと思います。
Discussion