はじめに
業務でAtomic Designを採用していたのでまとめ
Atomic Designとは
Brad Frost氏が提唱したページデザインの設計方法
Frost氏は書籍の内容全てをWebに公開している
あくまでもコード設計ではなく、UI設計の考え方であると本書に書かれている
（その考え方がコードの設計にも影響してくると書かれているが）
その特徴は、UIデザインをパーツ単位で設計することで、
UIの構成要素を
・Atoms（原子）
・Molecules（分子）
・Organisms（有機体・生体）
・Templetes（テンプレート）
・Peges（ページ）
の5段階に分けて考える
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Brad Frost氏は構成要素を原子論に当てはめて提唱した
それぞれの要素ごとにUIを設計・作成し、これらを組み合わせることによって最終的なページデザインを決定していくという手法
Atoms（原子）
アトミックデザインで作成するUIにおいて最小単位となるデザインパーツ
明確に定義されているわけではないが、大体はこれ以上分解できないもの、文字列やinput、buttonなどの最小のhtmlタグで表示されるものを指す
これ以上分解できないものなのでAtoms（原子）と表現したのだろうか
多くのAtomsを組み合わせていくことによって、Atomic Designによる設計を作り上げていく
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Molecules（分子）
複数のAtomsが組み合わさって構成されているもの
具体的には、label・input・buttonを組み合わせることでフォームとして成り立つように、複数のhtmlタグがひとまとまりになったもの
原子の集合体にUIとして意味づけを行ったり、Molecules単位での使い回しを可能にするといった目的でこの要素が存在する
再利用可能な単位としては、この5要素の中では一番汎用性が高いといえる（かも）
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Organisms（有機体・生体）
AtomsとMoleculesを組み合わせたもので、それ単体でwebページの構成要素となり得る
ヘッダーなど、特定の機能を持っているものを主に指し、Moleculesより他の用途には再利用しづらくなっている
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Templates（テンプレート）
Atoms、Molecules、Organismsを組み合わせた、基本となるページレイアウトのこと
この段階で既に最低限の機能を持っているが、実際のコンテンツは適用されていないので完成形とはいえない
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Pages（ページ）
Templatesに実際のコンテンツを適用させて、独自性を持たせたもの
ユーザー側に表示される最終的な画面で、Templatesまでの実装漏れなどにここで気づく場合もある
出典元：https://atomicdesign.bradfrost.com/chapter-2/
Atomic Designのメリット
作成したものの再利用がしやすい
AtomsやMoleculesといった小さい単位からデザインを設計していくため、一度作成したものを保存しておけば要素の再利用がしやすい
再利用することによって、ページ作成の時間短縮に繋げる事ができる
また、そのまま再利用できずとも、AtomsやMoleculesを少し修正するだけなどで、新たな要素を作成することも可能
デザイン変更が容易
前述の「再利用できずとも少しの修正で新たな要素を作成可能」と関連して、
Atoms、Molecules、Organismsのどれかを修正すればデザイン変更のコストが最小限になる
しかし、AtomsやMolecules時点でのデザインが統一されていなければ、変更コスト削減にはつながらないので注意
また、それらの小さい要素の入れ替えが多いOrganismsやTemplatesでなければ、意味をなさない場合がある
要素の役割が明確になる
何度も述べているように、細かい単位でページデザイン・機能を設計していくため、それぞれがどの役割・機能を持つかが明確になる
複数人で開発している場合の要素の役割の認識違いなどを防ぐことができる
（これも複数人で開発していない場合、メリットが薄れることがある）
Atomic Designのデメリット
大規模になるとコンポーネントの数が増えすぎる
コンポーネントを流用してページの作成効率を上げるという名目だが、大規模な開発になってくると増えすぎて把握できなくなる可能性がある（かも）
1画面しか使わないコンポーネントも作りがちなので、これに拍車がかかる気がする
どこまでコンポーネント化するかというチーム内の取り決めがあれば解消できそう
データの受け渡しが難しい
実践してみて、コンポーネント間でのデータの受け渡しが一番苦労した
特にAtomsやMoleculesは流用することが多いので、Templatesからデータを受け渡されることだけ（依存関係を減らす）ことに注力しないといけない点が難しくしているぽい
そもそもUIデザインの手法なので、開発に活かすには工夫が必要になってくる気がする
（調査していたらこれに関するtipsが割とあったのでそのうち追記します)
まとめ
あくまでもUIデザインの手法ということを意識する必要があると思った
開発初期はこの手法の意義が見えにくそうだが、開発期間が長くなっていき、コンポーネントの数を充実させていくことによって、よりメリットが発生するようだ
参考文献