Atomic Designを用いたReactのコンポーネント設計

1. Atomic Designとは
2. コンポーネント設計について
3. 各コンポーネントの分割基準について
4. まとめ

Atomic DesignとはUIデザインシステム一つです。

UIデザインシステムって何？ってなったので、ググったらこのように記述されていました。

つまり、UIをデザインをするためのルールがあり、そのルールの一種がAtomic Designといニュアンスですかね。

ReactではUIを構築する際に、コンポーネントを作って開発を進めます。 ここで言うコンポーネントとは、UIを構築するためのパーツです（例えばボタンやヘッダーなど）。 コンポーネントの開発をAtomic Designの考え方に従って設計・実装し、このコンポーネントを組み合わせて各画面を構築していくことで効率の良い開発を行うことができます。

Atomic Designを用いたコンポーネントベースの開発では、例えば以下のようなメリットがあります。

• コンポーネントの再利用により、実装量を軽減できる
• コンポーネント単位でのテストが可能
• メンテナンスを行いやすい
• デザインに統一性が出る
• 機能別でUIを実装していくため、平行実装が可能

Atomic Designでは、コンポーネントを科学の原子に見立てて設計していきます。 コンポーネントは以下のようになります。

• Atoms（原子）
• Molecules（分子）
• Organisms（有機体）
• Templates（テンプレート）
• Pages（ページ）

また上記のコンポーネントの粒度と依存の関係は以下の図になります。 ※参考書籍：Atomic Design 〜堅牢で使いやすいUIを効率よく設計する〜

小さい部品を使って大きなコンポーネントを構築していくので、大きい部品は小さい部品に依存する形になります。

各コンポーネントの分割基準と例は下記のような形です。

• Atoms
  • 最小単位のコンポーネント
  • 例) ボタン
• Molecules
  • AtomsやMoleculesを組み合わせたもの
  • 例) 検索フォーム（入力エリアとボタンを組み合わせたもの）
• Organisms
  • AtomsやMoleculesを組み合わせたもの
  • 例) SNSの投稿部分（アイコン、ユーザー名、テキスト、各種ボタンなど）
• Templates
  • ページのレイアウトに対する関心を持つもので、具体的なコンテンツは持たないもの
  • 例) ヘッダーやフッターなどを配置したレイアウト
• Pages
  • Templatesに実際のコンテンツを配置したもの
  • 実際のデータを取得して各コンポーネントに流したり、ルーティングと繋げたりする
  • 例) 各画面

個人的に、MoleculesとOrganismsの切り分けが難しいと思うのですが、

Moleculesは

• ユーザーの関心ごとに対して機能を提供するもの
• 独立して存在できるコンポーネントではなく、他のコンポーネントのヘルパー的な意味合いが強い

Organismsは

• コンポーネントで完結できるコンテンツを提供する
• 独立して存在できるコンポーネント

先ほど挙げた例でいうと、検索フォーム（Molecules）はそれ単体では何の検索を行うかはわからないが、Organismsレベルのコンポーネントに組み込まれて、初めて何の情報を検索するかというかがわかるという感じです。

Reactでは再利用を考えたコンポーネント設計を行うことが多いと思います。 Atomic Designはそのような設計をする際のルールの指標の一つとして優れていると思います。 実際の開発では、コンポーネントの粒度や分け方にアレンジを加えたりしてる場合もあるので、今回取り上げた設計が必ずしも正しいというわけではありません。 でも根底の考えとしては通ずるものがあると思います。 もっと良いやり方あるよって方がいれば、ぜひ教えていただけると嬉しいです！