こんにちは、フロントエンドエンジニアの荒田です。 早いものでスペースマーケットに入社して半年が経ちました。毎日新しい発見があり充実した日々を送っています。 今日はAtomic Designを使ってReactコンポーネントを再設計したお話をご紹介したいと思います。 背景 今まではReactでコンポーネントを作成するにあたり、粒度に関しての指針が明文化されておらず、コンポーネントの粒度は各エンジニアがそれぞれの思想で決めていたため、担当エンジニアの違いによってコンポーネント粒度がばらばらになる課題がありました。 汎用的で、使いやすい粒度のコンポーネントを作成するためには、デザイナーがデザインを繰り返し使っている、その粒度に合わせるのがいいのでは?と感じました。 そしてそれらを解決するためにAtomic Designを導入してコンポーネントのあり方について再設計することにしました。 Atomic
![Atomic Designを使ってReactコンポーネントを再設計した話 | スペースマーケットブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bc6a50069462fb45f93fdce5e9caa069a78a4d6/height=288;version=1;width=512/https%3A%2F%2Fblog.spacemarket.com%2Fwp-content%2Fuploads%2F2018%2F04%2Fatomic_design.png)