アトミックデザインと構成ルール：ReactのUI設計を整える
Reactでの開発が進むにつれて、「どこに何を置くべきか分からない問題」が出てくる。
特にチーム開発になると、誰が書いたどのコンポーネントを使えばいいのか混乱する。
そんな問題を解決してくれるのが、アトミックデザイン。
アトミックデザインってなに？
UIを5つのレイヤーに分けて整理する設計手法：
- Atoms：ボタン・テキストフィールドなど最小単位
- Molecules：Atomsの組み合わせ（例：フォーム）
- Organisms：ページ内のセクション単位（例：ヘッダー）
- Templates：レイアウト骨格
- Pages：最終的なページとして使う部分
これを守っておけば、どんな規模でも設計が破綻しにくくなる。
各レイヤーの役割と実装イメージ
🧬 1. Atoms（原子）
UIの最小構成単位。基本的には「何の責務も持たない部品」。
tsx
<TextInput label="ユーザー名" value={username} onChange={handleChange} />
<PrimaryButton onClick={handleSubmit}>ログイン</PrimaryButton>
- 再利用性重視
- 状態を持たない
- MUIのラッパーやカスタムスタイルをよく置く
⚛️ 2. Molecules（分子）
複数のAtomsを組み合わせて、ちょっとした機能を持った部品にしたもの。
tsx
<LoginForm onSubmit={handleLogin} />
- 入力フォームなど
- 状態やバリデーションを含んでもOK
- イベントハンドラを受け取る形が多い
🧠 3. Organisms（有機体）
アプリケーションにおける機能ブロック単位。
tsx
<Header isLoggedIn={true} onLogout={handleLogout} />
<Footer />
- 複数のMoleculesやAtomsを統合
- 見た目にも機能にもそれなりのサイズがある
- 多くの場合、ドメイン固有の意味を持つ（例：ProductList, ArticleCard）
🧩 4. Templates（テンプレート）
ページレイアウトの骨格を定義するレイヤー。
tsx
<MainTemplate isLoggedIn={isLoggedIn} onLogout={handleLogout}>
{children}
</MainTemplate>
- 共通の構造（ヘッダー＋メイン＋フッターなど）を提供
- 各ページでの使い回しが前提
- 状態をあまり持たず、propsで受け取る
📄 5. Pages（ページ）
最終的にルーティングに使われるページ単位のコンポーネント。
tsx
<LoginPage />
- 状態管理、データ取得なども含んでOK
- ビジネスロジックの集約地点
- Templatesを使ってレイアウトする
ディレクトリ構成のルール例
bash
src/
├── components/
│ ├── atoms/
│ ├── molecules/
│ ├── organisms/
│ └── templates/
└── pages/
ここまできたら、「ファイルを置く場所に迷わない」。
チーム内でもルールが明確になるので、他人のコードもすぐに追えるようになる。
実装で気をつけること
✅ 責務の分離
- Atomsはデザインだけ、Molecules以上から機能が乗ってくる
- 状態やロジックをどの階層に持たせるか意識
✅ 粒度の調整
- 小さくしすぎて逆に読みにくくなるパターンもある
- 「再利用したいかどうか」「汎用性があるか」で判断するのが◎
✅ 型定義とprops設計
- 各レイヤーでpropsの型をしっかり定義しておくと安心
- イベント関数や状態は親から明示的に渡す（バケツリレーに注意）
アトミックデザイン導入のメリット
- コンポーネントの粒度が揃う
- UIの再利用性が爆上がり
- ディレクトリ構成が明確で管理しやすい
- チーム開発がやりやすくなる
まとめ
- アトミックデザインは「部品→機能→構造→ページ」へ段階的にUIを組む設計思想
- 責任と役割が明確になることで、保守しやすいアプリが作れる
- ファイルや責務の整理で悩む時間が減る
- 実務でもかなり導入されている手法なので、覚えておいて損なし
👇 サンプル：アトミックデザイン採用ログイン画面