コンポーネント分割（Atomic Design）

Atomic Designとは

• 画面要素を5段階に分け、組み合わせることでUIを実現
• コンポーネント化された要素が画面を構成しているという考え方
• React用ではなく、もともとはデザインの考え方
• モダンjavascript（コンポーネント）と相性が良い

■ATOMS：最小でそれ以上分解できない要素　
例）ボタン/入力テキストボックス/アイコン 等 |

■MOLECULES：Atomの組み合わせで意味を持つデザインパーツ　
例）アイコン+メニュー名/プロフィール画像+テキストボックス/アイコンセット 等 |

■ORGANISMS：AtomやMoleculeの組み合わせで構成される、単体である程度の意味を持つ要素群　
例）入力エリア/サイドメニュー 等 |

■TEMPLATES：ページのレイアウトのみを表現する要素（実際のデータは持たない）　
例）ヘッダー、サイドメニュー、コンテンツエリア等のレイアウト情報　等

■PAGES：最終的に表示される1画面　
例）ページ遷移毎に表示される各画面 |

まとめ

あくまでベース

Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。
Atomic Designをすることが目的になってはいけない。
プロジェクトの初期段階でチーム内で取り決めるのがベターである。

はじめから無理して分けない

慣れないうちに無理にコンポーネントに分けようとするとしんどい。
まずは書いて定期的にリファクタリング（コンポーネント分割）する。

要素の関心を意識

「何に関心があるコンポーネントなのか」を意識しながら分割したり、Propsを定義したりする。