Yuri's Blog | ロードマップ形式のTodoアプリを作る（設計編 Part.3）

こんにちは、Yu_riです。
今回は本アプリケーションのディレクトリ構成についてです。

全体像は以下のように考えています。
※具体的なファイル名は追々追記します。
※3/22時点の構想のため今後変わる可能性は十分にあります。

roadmap-todo-app/
├── frontend
│    ├── components/
│    │    └── 〇〇.tsx
│    ├── libs/
│    │    └── axios.ts 
│    ├── pages/
│    │    └── 〇〇.tsx
│    ├── types/
│    │    └── index.ts
│    ├── utils.ts
│    ├── App.tsx
│    ├── index.css
│    ├── main.tsx
│    ├── vite-env.d.ts
│    ├── package.json
│    ├── package-lock.json
│    ├── postcss.config.js
│    ├── tailwind.config.js
│    ├── tsconfig.json
│    ├── tsconfig.node.json 
│    └── vite.config.ts
└── backend/
      ├── main.go
      ├── go.mod 
      ├── go.sum
      ├── controllers/
      │    └── 〇〇_controller.go
      ├── services/
      │    └── 〇〇_services.go
      ├── repositories/
      │    └── 〇〇_repositories.go
      ├── middlewares/
      │    └── 〇〇_middlewares.go
      ├── models/
      │    └── 〇〇.go
      ├── infra/
      │    └── 〇〇.go
      ├── migrations/
      │    └── migrations.go
      ├── dto/ 
      │    └── 〇〇_dto.go
      ├── .air.toml
      ├── .env
      └── docker-compose.yaml

以下主要なディレクトリの説明を記載します。

Front-end

components
- 主にpageディレクトリで使用するコンポーネント群を格納
libs
- ライブラリのファイル群を格納（ファイル内で初期化とかを行う想定）
pages
- URLと対になるページコンポーネント群を格納
types
- 型定義を記述したファイル群を格納

Back-end

controllers
- リクエストのハンドリング、レスポンスの設定を行うファイル群を格納
services
- ビジネスロジックを実装するファイナル群を格納
repositories
- GORMを使用したデータベースとのやり取りを行うファイナル群を格納
middlewares
- リクエスト処理の前後の処理を行うファイル群を格納
models
- モデル定義（= ほぼテーブル設計）を行うファイル群を格納
infra
- 環境変数の読み込みやDBのセットアップを行うファイル群を格納
migrations
- DBのマイグレーションを行うファイルを格納
dto
- クライアントから送られてくるJSONデータを受け取るための構造体を定義するファイル群を格納

ロードマップ形式のTodoアプリを作る（設計編 Part.3）

Front-end

Back-end

参考