Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ

こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな

[hkmn]

これに限らずアーキテクチャ全般に言えることは「やりすぎない」だと思っている 手段が目的になりがちなので

[empitsu88]

書きました。Atomic Design導入の経緯ややめた理由、そして新旧のディレクトリ構造を紹介しています！ Reactのディレクトリ構造に悩んでる方の参考に少しでもなれば幸いです。

[boomerangj]

Atomic Designを最初に知った時に多くの人が感じてそうな大仰やな〜という感想が、しっかりやってみてもそう感じるものだったんだな。ありがたい経典が出てきてもある程度自分の違和感みたいなものも大事にしていきたい

[k2wanko]

守破離って感じでいいと思う

[cowai5]

もっとプログラマティックな仕組みにしたい。コンポーネント作る班とレイアウト組む班が分かれてたら問題なさそうだけど 運用チームやデザイナーの感想も聞きたい。エンジニアだけで突っ走ることもあると思うので。

[atico]

AtomとMoleculesの使い分ける利点は、下位レイヤーから上位レイヤーを参照することがないので、Moleculesの修正がAtomに影響がないことが確定できる。Atomも最小単位なので自身の修正が他のAtomに影響を与えることがない点。

[nilab]

Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ｜note

[efcl]

Atomic Designのカテゴリライズをuiparts/projects/pageへとシンプルにした感じ

[d4-1977]

食べログさん、フロントエンドを作り直し続けているイメージがあります。フロントが作り直し出来る構造なのイイ！けれど、ずっと工事中な気もしていて、いいけれどプロダクトにどんないい事あったのかも気になります

[shimarisugi]

atomic designは難しくて辞めた。いくら現実を模倣したって人間は誤った化学式を作るからな。人間にとって分かりやすい構造を作るのが大事

[tsuwatch]

何事もアーキテクチャはそのまま導入するものではないしいい話

[ptpadan]

よさそう

[yasu-log]

【B!】Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ｜note / 食べログさんの記事はいつも有益

[wwweric]

食べログ規模のサービスでさえAtomic Designの分類細かすぎたのか

[uxlayman]

だいたいこうなるよね。Atomic Designいいけど、ドメインをどこで扱うべきか書いてないのが意味わからんかった。目的そこやろって

[akymrk]

“Reactをページ上に部分導入しているため、ReactDOM.createPortal()をこのレイヤーで呼び出しています。”

[seal2501]

若干Reactに引っ張られてるのが気になるけどそんなもんかね

[nakamura-kenichi]

ある程度完成したら後は回すだけになって、何かっちゃあ理由をつけてスクラップ＆ビルドをしていかないと存在理由がなくなっちゃうからねえ。理論やスキームはマウント取りたい後発がいくらでも生み出してくるから。

[Cherenkov]

事業会社はじっくり腰を据えてデザイナとコミュニケーション取りながらできて楽しそうね 食べログ

[forrest-gump]

確かにAtomic Designちゃんとやろうとすると難しい atom、molecularどっちだっけってなるし molecularは綴りわからなくなりがち

[nunulk]

"したがって、エンジニアやデザイナー間でコンポーネントの責任範囲を決める際は、Atomic Designという言葉を使わなくても、（略）という先程の観点のみ気にしておけば問題ないのではと考えました。"

[nasust]

開発ではAtomic Designをアレンジして導入する場合が多い気がする。

[ikkitang1211]

Frontのディレクトリ構造難しいからこういうのめちゃくちゃ参考になる

[nc44v-134-nvtyqfgq]

ブログ公開！Reactなプロジェクトのディレクトリ構造色々悩んだ末にこうなった