汎用モジュールと非汎用モジュールを分ける
#ソフトウェアアーキテクチャ（主にReact）について
Atomic Design のデメリット
「粒度」でコンポーネントを分類しがち
「コンポーネント」「フック」「どちらでもない関数」「定数」「型宣言」みたいな分類もデメリットがある
atoms/ や hooks/ のような「分類のための分類」の問題点
実装する上では、「汎用モジュール」と「非汎用モジュール」を分けるべき
[* 汎用モジュールだけが、_utils/ _components/ のような「分類のための分類」の対象とするべき]
非汎用モジュールは、feature、カテゴリごとに分ける(コロケーション)べき
❌小さいから _components/atoms に置く
⭕『記事作成ボタン』見た目の粒度は小さいが、特定の場所に設置されるモノなのでfeature寄りに置くべき
例: _posts/ の下に置く
Atomic Redesign https://zenn.dev/takepepe/articles/atomic-redesign
「粒度」ではなく「依存」に基づいた分類の提案
_hooks/ も要らない
ドメイン知識を持っているモノはコロケーション or 「真のレイヤー」で分けるべき
1. コロケーション
例: usePostsQuery (swr や TanStack Query 等でGET リクエストでデータを取ってくる)
2. 「真のレイヤー」
例: usePostsQuery は「データを取得するためのコード」と分類して _repositories/ に置く
❌ /_hooks : これは実装方法でしかない。「データ取得のため」という目的で分けるべき
ドメイン知識を持たないもの(例: DOM や React の機能だけを使う)フックのみが /utils 直下、または _utils/(hooks|dom) みたいな場所に入れられる
App Router での実装例
app/
posts/
投稿一覧およびその下の階層のページの中で使われるモジュール群を入れる
_features/posts or _posts/
「投稿記事」関連のモジュール群を入れる
特定のディレクトリ限定でなく、複数のページから使われうる場合はこちら
_ui or _components/
ここには汎用的なコンポーネントだけを入れる
例えば「MUI (or Chakra UI, Mantine UI)を使ってるなら、ここに入るコンポーネントはわずか」ってノリ
モノレポに抜き出してもいいかも
_utils/
ここには汎用的な関数（だけでなく定数、型も）を、カテゴリで分類して入れる