Tutorial Advent Calendar 2020 20日目、中島です。

今回はフロントエンドの設計で使われるAtomic Designについて、お伝えします。弊社のプロダクトに使われているわけではないのですが、コンポーネント設計について調べていると強く印象に残る内容だったので、自分なりに整理してこの題材を書くことにしました。

Atomic Designとは

Atomic Designは、小さなUIコンポーネントを組み合わせてより大きなコンポーネントを作っていくためのデザイン・フレームワークです。UIコンポーネントを5つの階層に分割します。分割の基準は大まかに定められていますが、具体的にはプロダクトによって開発者で決めます。

• Atoms（原子）・・・これ以上分けられないもっとも小さなUIパーツ。ボタンなど
• Molecules（分子）・・・2つ以上のatomを使用したもの。
• Organisms（有機体）・・・各ページに特化している最小単位のもの。
• Templates（テンプレート）・・・3つのコンポーネントを正しくレイアウトする雛形。
• Pages（ページ）・・・コンポーネントに対してコンテンツを与えるもの。

4つ目以降から化学用語関係なくなってる？と思ったのですが、きちんと意味があるようです。それは、「開発者だけで使う用語」と「開発者以外に対しても使う用語」の違いです。Templates以降のコンポーネントは、クライアントや経営者との会話にも使われる役割をもつことが多いため、会話に混乱が生じないようWeb用語を使うとのことでした。

分割の基準

コンポーネントを使った開発で頻出するケースのようですが、「このコンポーネントはどのレベルに属するのか」という問題です。例えば、「かなり具体的な意味を持つコンポーネントだけどAtomsやMoleculesなど子コンポーネントを持たない」といった場合、具体的な意味を持つのでAtomsには属せそうにありません。しかし子コンポーネントを持っておらず、Moleculesなどの上の階層には属せないことになるため、どうするべきか非常に迷うことになってしまいます。個人開発でしかAtomic Designを使えていないのですが、自分なりのルールで基準を設けています。（細かい部分はほとんど感覚ですが、、）

実務では、開発に着手する前に下記のようなガイドラインを定めて、運用することが必須のようです。

• 具体的な意味を持っていても、子コンポーネントを持っていなければAtomsにする
• 子コンポーネントを持っていなくてもMolecules / Organismsに属することができるようにする
• 特殊コンポーネントのカテゴリを作る
• 状態管理はAtoms / Molecules で行わず、自己完結させる
• 外部APIへのアクセスはpagesのみが担当する

Robotic CrowdのUIをAtomic Designの基準で分割してみると、こんなイメージでしょうか。

再利用できる部分が多そうに見えますが、プロダクトコード全体を見るとかなり苦労しそうです。ただし新機能ができた際に、小さなコンポーネントを寄せ集めるだけで、より統一感のあるUIが容易にできるのは魅力的だと思いました。

メリット

1. コンポーネント再利用性が高まり、デザインや機能で統一性が生まれる

特定のコンポーネントをたくさん使い回すため、一からコードを書く必要がなくコンポーネントを埋め込むだけで済みます。新規で作成しないといけないコンポーネントでも同じ層のコンポーネントを参考にコーディングできると思います。

2. 変更に強くなる

各層のコンポーネントが疎結合になっているため、特定のコンポーネントに変更が生じる場合でも、コンポーネントの責務がしっかりしているため柔軟に対応しやすいです。

デメリット

1. ソースファイルが多くなる

コンポーネントを細かく分けていくことになるので、その数はかなり多くなりそれに合わせてjsファイル、cssファイルなど個々に必要なファイルも増えます。メリットであげたコンポーネントの再利用である程度の数を抑えることは可能です。（Moleculesを再利用できるようにUI設計するなど）

2. データの受け渡しが追いにくくなる

5階層に分かれるため親子間でデータの受け渡しが頻繁に行われ、プロパティのバケツリレーの回数は増えてしまいます。（pages -> templates -> organisms -> molecules -> atoms）

おわり

今回の記事作成を通して、コンポーネント設計の在り方やそれぞれの責務について、より深く知りたいと思いました。作成にあたり参考にした書籍はこちらです。本屋に並んでいるのをよく見かけるので、興味のあるかたは是非手にとってみてください。

Atomic Design ~堅牢で使いやすいUIを効率良く設計する [著：五藤 佑典]