調べてみた経緯 Reactを勉強して3ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ!?」って思い調べてみました。 ReactとAtomic Designの相性がかなり良いらしいす。 Atomic Designとは Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ) Atoms(原子) Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。 ToDoListのモックで例をあげると このような構成のページをAtomに分けると以下のようになります。 テキストフォー