思想：コロケーション

Place code as close to where it's relevant as possible

コードはできるだけ関連性のある場所に配置する

この筆者はコードベースをチームメンバー、未来のメンテナー、そして半年後の自分自身にも扱いやすい状態に保ちたいと考えている

コードコメントをどこに配置するかについて焦点を当てたいと思います。私たちは一般的に、可能な限りコメントが説明しているコードに近い場所にコロケーション

(例)

(blog)/blog/page.tsというファイルがある場合、このページで使用するコンポーネント類は(blog)/blog/内に配置するのが理想的

つまり、特定の機能に基づくファイル群を構成する

ふくえもん

個人的には、まだ一つの階層にまとめるというのは落とし込めなかった。
componentsディレクトリは継続して使っていこうと思う

ふくえもん

Next.jsのルーティング

用語

Tree: 階層構造を視覚化するための全体像
SubTree: 新しいルート (最初) で始まり、葉 (最後) で終わるツリーの一部。
Root: ルートレイアウトなど、ツリーまたはサブツリー内の最初のノード。
Leaf: URL パスの最後のセグメントなど、子のないサブツリー内のノード。

URL セグメント: スラッシュで区切られた URL パスの一部。
URL パス: ドメインの後に続く URL の一部 (セグメントで構成される)

ふくえもん

デザインパターン：コンテナ・プレゼンテーション

ビューとロジックの分離を図る手法

コンテナコンポーネント: 何のデータがユーザーに表示されるかを管理するコンポーネント。
APIフェッチで取得したDBやStateを受け取り.プレゼンテーションに渡す
プレゼンテーションコンポーネント: データがユーザーにどのように表示されるかを管理するコンポーネント。
原則としてこのコンポーネントで受け取るのはPropsのみ
(UIに関する状態などは含んでもよい)

ふくえもん

構成を変えてみた

src/app
├── _components
│   ├── Common //共通のViewコンポーネント
│   │   ├── BottomNavbar
│   │   │   └── index.tsx
│   │   ├── List
│   │   └── Navbar
│   │       ├── Back
│   │       │   └── index.tsx
│   │       ├── hooks
│   │       └── index.tsx
│   └── Form //Form関連のコンポーネント
│       ├── DatePicker
│       │   └── index.tsx
│       └── InputButtonCombo
│           └── index.tsx
├── favicon.ico
├── layout.tsx
├── page.tsx
├── post // 投稿関連
│   ├── [postid] //投稿詳細
│   │   ├── _components
│   │   │   └── DetailPost
│   │   │       └── index.tsx
│   │   └── page.tsx
│   ├── _components
│   │   ├── Card
│   │   │   ├── Header
│   │   │   │   └── index.tsx
│   │   │   └── index.tsx
│   │   ├── ModelViewer // 3Dモデルの表示
│   │   │   ├── DynamicModelViewer.tsx
│   │   │   └── index.tsx
│   │   └── Shop
│   ├── create //投稿作成
│   │   ├── _components
│   │   │   └── CreatePost
│   │   │       └── index.tsx
│   │   └── page.tsx
│   └── page.tsx
├── profile // プロフィール関連
│   ├── _components
│   │   ├── Header
│   │   │   └── index.tsx
│   │   ├── Post
│   │   │   └── index.tsx
│   │   ├── Profile
│   │   │   └── index.tsx
│   │   └── TabBar
│   │       └── index.tsx
│   └── page.tsx
└── shop // 店舗関連
    └── search // 店舗検索
        ├── _components
        │   ├── Item
        │   │   └── index.tsx
        │   └── Search
        │       ├── hooks
        │       │   ├── useLocation.ts
        │       │   └── useQueryString.ts
        │       └── index.tsx
        └── page.tsx