アトミックデザインとは
アトミックデザインは、Brad Frostによって提唱されました。彼の考え方は、自然界の原子から生命体への進化をヒントに、UIもまた小さな部品から構築すべきだというものです。
5つのレベルについて
Atoms (原子)
これはUIの最も基本的な部分です。例としては、ボタンやテキスト、アイコンなどが考えられます。それ自体ではあまり役に立たないことも多いですが、他の原子と組み合わせることで役立ちます。
Molecules (分子)
2つ以上のAtomsを組み合わせて作られるUIの部品です。例えば、テキストフィールドとそのラベル、ボタンなどからなる検索フォームがこれに該当します。
Organisms (有機体)
MoleculesやAtomsを組み合わせて、より複雑なUI部品を構築します。例としては、ヘッダーやフッター、サイドバーなどが考えられます。
Templates (テンプレート)
実際のコンテンツを持たない、ページのレイアウトや骨組みを示す部分です。ここでページの全体的な流れや構造を確認できます。
Pages (ページ)
Templatesに実際のコンテンツやデータです。実際のページの見た目や動作を確認することができます。
メリットとデメリット
メリット
- 一貫性: 同じコンポーネントを再利用することで、UIの一貫性を保つことが容易になります。
- 効率性: 一度作成したコンポーネントは、他の場面でも再利用することができます。
- 保守性: 小さな部品ごとに修正や更新ができるため、変更が容易です。
デメリット
- 設計の難しさ: 最初からしっかりとした設計が必要となります。
- 過剰な抽象化: あまりに細かく分けると、かえって複雑性が増すことも。
実際の実装例
アトミックデザインはReactやVueなどのフロントエンドフレームワークでの実装に適しています。コンポーネントベースの設計とアトミックデザインは非常に相性が良いです。
# Atomの例: Buttonコンポーネント
def Button(text):
return f"<button>{text}</button>"
# Moleculeの例: Formコンポーネント
def Form(label_text, button_text):
return f"<label>{label_text}</label><input type='text'><button>{button_text}</button>"
アトミックデザインを採用するべき時
大規模なプロジェクトや、再利用の必要が多いプロジェクトでは、アトミックデザインの採用を検討する価値があります。また、チーム開発の際にも一貫性を保つために役立ちます。
まとめ
ある程度学習すればそこまで難しい概念ではなさそう
挙動はどこで制御すれば良いのだろうか、より詳しく調べていきたい。