atoms/ や hooks/ のような「分類のための分類」の問題点

Atomic Design をそのまんま落とし込んだディレクトリは以下のようになるが、これは好ましくない。

🗂️ src/

📂components/

atoms/

molecules/

etc.

📂 hooks/

📂 utils/

---

じゃあどうすればいい？

👉️「コロケーション」原則に従ったほうが良い。

「レイヤー」的な分割は、本当にそうすることで複雑さが低減する箇所でのみ採用する。

ほかは基本的に関連性とかカプセル化を意識して「コロケーション」分割する）

良いディレクトリ構造の例:

🗂️ src/app/

📂 _ui/

form/

input.tsx, checkbox.tsx, select.tsx, etc.

dialog/

etc.

📂 _utils/

フックはこの中に置く。hooks は不要。

📂 posts/

posts-search.tsx (ページ内の検索ボックス。organism 相当)

layout.tsx

page.tsx