推しフロントエンドディレクトリ構成と気をつけたいポイントの記事を読んだ

私の推しフロントエンドディレクトリ構成と気をつけたいポイント

読んだ。

ディレクトリ構成、個人的に無限に悩んで決まらないものなので、こういった形でまとめられているのは本当に参考になる。

昔からducksパターンとかre-ducksパターンとか色々見てきたけど、Reduxの採用が減ってきているっぽいのでまた別の話になってきてそう。

と思ったけど、この記事で紹介しているディレクトリ構成はre-ducksパターンに近い感じかもしれない。

Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス

この記事では、src/features/に画面ごとのディレクトリを作り、その中にcomponents、hooks、functions、api、test、storiesなどの責務別のディレクトリがあるという感じだった。

src/features/Hogeが画面で、そこにあるindex.tsxがContainer Componentみたいな役割で、さらにそこからページを構成する機能ごとにディレクトリを切っていく感じ。

つまるところpagesかなと思ったら、記事内でNext.jsだとsrc/pagesを置くという話も出ているので認識は近そう。

ページ内の機能で使うものはsrc/features/Hoge以下に配置し、アプリケーション全体で使う共通のコンポーネントなどはsrc/components/などに配置するのも分かりやすくてよさそう。

そしてここにはUnit Testもきちんと書く。複数箇所で使われるし正しい気がする。

もちろんすべてのプロダクトがこうであるみたいな必要はないけど、ブラッシュアップしていったときにこの構成に近くなるのかなという感じがするので大変参考になります。

ディレクトリ構成をAtomic Designで構成したことがある人も多いのではないでしょうか？

そして、Atomic Designがうまくいかなかったという事例もよく聞きます。しかし、私はAtomic Designは悪くなかったのではないかと思っています。Atomic Designを提唱したBrad Frost氏は元々デザイナーです。なのでBrad Frost氏はAtomic Designをデザインの段階から考えていると思います。これをエンジニアだけで踏襲し、模倣しただけになってしまったので、プロジェクトが進むにつれてmoleculesやorganismsの1つ1つの粒度が合わなくなっていくのだと私は思います。

なるほど……。

Atomic Designは若干つらいかなと思っていたけど、こう聞くと自分がうまくやれてなかっただけという気もする。

職種の違いからどんどん解釈が別のものになっていき……という感じなのだろうか。

自分も「自分がいいと思うディレクトリ構成」考えてみようかな。