こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか/入らないか」。「抽象的か/そうでな
![Atomic Designをやめてディレクトリ構造を見直した話|食べログ フロントエンドエンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63f1e4e6e3201de0c9903fb9a476e374c8ed23ff/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F52715198%2Frectangle_large_type_2_e0128d6ff1aeec279e5f9b468be7ed4a.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)