Atomic Design風コンポーネント設計の可視化サンプル

取り組みの背景

Atomic Design は概念としては理解しやすい一方で、実際のコンポーネント設計をどう切り分けるかは感覚的になりがちです。そこで「粒度の違いがひと目でわかるサンプルがあったら便利かも」と思い、React で小さな実例を作りました。

ねらい

• Atoms / Molecules / Organisms / Pages の関係性が視覚的に追えるようにする
• どの粒度で責務を持たせるか、ざっくり把握できる状態にする

リポジトリ

実装は以下にまとめています。何かの参考になったらうれしいです。
https://github.com/s-soya2421/frontend-design/tree/main/react/atomic-design-sample