AtomicDesignおさらい
✅ まず：Atomic Designとは？
| レイヤー | 説明 | 例 |
|---|---|---|
| Atom（原子） | 最小単位、意味を持つ1つの要素 | Button, Input, Label |
| Molecule（分子） | 複数のAtomを組み合わせた意味あるブロック | フォームラベル付きInput、アイコン付きButton |
| Organism（有機体） | MoleculeやAtomの組み合わせで構成されるセクション単位 | ヘッダー、カード一覧、記事コンポーネント |
| Template | ページの骨組み（レイアウト構成） | 2カラム構成、記事詳細ページなど |
| Page | 実データを流し込んだTemplate | /blog/1 などの本番用画面 |
✅ 疎結合を実現するAtomic Designのコツ
① コンポーネントの責務を明確に分ける
- Button は「クリックされた」ことだけを親に伝える
- Form は「値の検証」や「送信イベント」を担う
🔸 責任の境界をハッキリさせることで、再利用可能な単位で設計できる＝疎結合。
② 依存を最小限にする（子は親に依存しない）
- コンポーネント内部で直接APIを呼ばず、外から
onSubmitを受け取るなど、外部の処理はprops経由で注入
✅ これにより、どこでも使える・テストしやすい自律的な構造に。
③ 状態管理（State）はなるべく外に出す
- AtomやMoleculeは状態を持たせない or 局所状態に限定
- 状態管理はOrganismやPageレベルで行う
✅ 状態を上位で管理することで、下位はただの表示部品（View）として切り離せる。
④ PropsとEventで接続する（インターフェースで連携）
props.label,props.onClickのように、明示的なインターフェースを介してデータとイベントを渡す- コンポーネント間で密に値を直接操作し合わない
✅ これにより、**疎結合な「契約ベースの接続」**になる。
⑤ Context APIやカスタムHookはPage/Organismレベルに
- 小さいコンポーネントでグローバルなContextや状態にアクセスすると、隠れた依存関係が増えて密結合化しやすい
✅ データ提供側と消費側の分離が疎結合の鍵。
✅ まとめ：Atomic Design × 疎結合 設計の意識
| 設計ポイント | 疎結合への影響 |
|---|---|
| コンポーネントの役割分担 | 責務が明確で変更に強い |
| Props経由で注入 | 再利用可能性が高くなる |
| 状態は上位で管理 | 下位がシンプルに保てる |
| イベント伝播（onClickなど） | 下位が親に依存しない設計に |
| コンテキストは慎重に使う | 予期しない依存を防げる |