調べてみた経緯 Reactを勉強して3ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ!?」って思い調べてみました。 ReactとAtomic Designの相性がかなり良いらしいす。 Atomic Designとは Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ) Atoms(原子) Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。 ToDoListのモックで例をあげると このような構成のページをAtomに分けると以下のようになります。 テキストフォー
![Atomic Design について調べて見た - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1b26ef6560964b7d77eced89094c2dfc312cd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9QXRvbWljJTIwRGVzaWduJTIwJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU4JUFBJUJGJUUzJTgxJUI5JUUzJTgxJUE2JUU4JUE2JThCJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNjA2NzMyZmJiYTE1YTAyYzk3NmZlMDNlNTAwNzk2OA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweW9zaGltbzEyMyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTllMTRmNWQ4ZTc1YzkyYTZjOTIxYzlhYjg1ODM4Nzc%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1037b1d9e6d78ba9617a56665e1ad799)