Atomic Design

Atomic Design はデザインシステムを作るための１つの手段。  
UIコンポーネントの粒度をカテゴリーに明確に分ける手法。

コンポーネント分割で必要になってくるのが、このコンポーネントの役割は何なのかを意識しながら記述していくこと。

Atomの作成

Atomsには基本的なスタイルだけを指定し、色やpadding、widthなどは変更できるように作成する。  
atomフォルダの中で、もしボタンを作成するなら更にbuttonフォルダを作成して、その中にPrimaryButton.jsxとSecondaryButton.jsx、そして、それらの大本、枠組みとなるBaseButton.jsxを作成する。

import styled from "styled-components";
import { BaseButton } from "./BaseButton";

export const PrimaryButton = (props) => {
 const { children } = props;
 return <SButton>{children}</SButton>;
};

const SButton = styled(BaseButton)`
 background-color: #40514e;
`;

BaseButtonを読み込む際には、今まで「styled.button」のように記述していた箇所を「styled(継承したいコンポーネント)」のように記述する。

Moleculesの作成

moleculesフォルダの中で、ファイルを作成し、その中でatomで作成したパーツを組み合わせてmoleculesを作成する。  
使っているAtomsの色やpadding、width、marginを指定する。  

ただ、Moleculesは汎用的に使うことができるよう、Molecules自体のwidthやmarginなどは（基本的には）ここでは指定しないようにする。

Organismの作成

organismフォルダの中で、ファイルを作成し、その中でatomとmoleculesで作成したパーツを組み合わせてorganismを作成する。  
使っているMoleculesのmarginやwidthはここで指定する。  
また、Atomsを直接使う場合には色やpadding、width、marginを指定する。  

ただ、Organismsは汎用的に使うことができるよう、Organisms自体のwidthやmarginなどは（基本的には）ここでは指定しない。

Templateの作成

Templateは、中身のないレイアウトのテンプレート。  
コンテンツの横幅（width）や、サイドバーがあった場合のコンテンツの横幅などが含まれる。

Pageの作成

これまでのコンポーネントに実際のテキストや画像を流しこみ用のもの。  
このページ特有のOrganismsのmarginなどはここで指定する。  
今までのような汎用的につくることは意識しない。

Atomic Designに取り組む時のポイント

あくまでベース

Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。

初めから分けない

慣れないうちにコンポーネントを分けようとすると難しい。まずは書いて定期的にリファクタリングする。

要素の関心を意識する

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