# TASCHOLA 開発

## ディレクトリ構造

.
├── README.md
├── backend
│   ├── Dockerfile
│   ├── controllers
│   ├── db
│   ├── go.mod
│   ├── main.go
│   ├── models
│   └── router
├── db
│   └── Dockerfile
├── docker-compose.yml
├── frontend
│   ├── Dockerfile
│   ├── README.md
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   └── yarn.lock
└── wait-for-it.sh


一番TOPレベルの構成は以下

.
├── README.md
├── backend
├── db
├── docker-compose.yml
├── frontend
└── wait-for-it.sh

どこのフォルダ(ディレクトリ)がどのような責務を負うのかについて分かりやすいように`backend`, `frontend`, `db`で分けた。

`wait-for-it.sh`は`docker-compose up`コマンドでdockerコンテナをスタートする際に、バックエンドのGo GinがMySQLの立ち上がりを待つようにするために導入する予定（3Qの先生の構成ではこれが使われていないので、もう少し調査が必要）

`dokcer-compose.yml`: frontend, backend, dbが正しく`docker-compose up`コマンドだけでたちがある用にYAMLファイルを書く（仮版は以下）

version: "3.9"
services:
  api:
    container_name: backend
    build:
      context: .
      dockerfile: ./backend/Dockerfile
    volumes:
      - ./backend:/app/backend
    ports:
      - "8000:8000"
    tty: true
    depends_on:
      - db
    command:
      - wait-for-it.sh
      - db:3306
      - --timeout=120
      - --strict
      - --
      - air
      - -c
      - .air.toml
    environment:
      DB_HOST: db
      DB_PORT: 3306
      DB_USER: developer
      DB_PASSWORD: password
      DB_NAME: TASCHOLA

  web:
    container_name: frontend
    build:
      context: .
      dockerfile: ./frontend/Dockerfile
    volumes:
      - ./frontend:/app/frontend
    ports:
      - "3000:3000"
    tty: true

  db:
    container_name: db
    build:
      context: .
      dockerfile: ./docker/development/db/Dockerfile
    platform: linux/x86_64
    volumes:
      - ./docker/development/db/sql:/docker-entrypoint-initdb.d
      - ./docker/development/db/data:/var/lib/mysql
    ports:
      - "3306:3306"
    tty: true
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: TASCHOLA
      MYSQL_USER: developer
      MYSQL_PASSWORD: password
      TZ: Asia/Tokyo

現状では、開発ポートは

- DB: 3306
- Backend(Gin): 8000
- Frontend(React): 3000

別にこのポート番号にする合理性はないので、変更してもOK
(単にフロントエンドだと3000, Backendだと8000か8080が主流なだけで、かぶらなければ全然OK)

### Backend

Ruby On Railsなどに代表されるMVCモデル（ソフトウェア開発と品質でちょこっと出たやつ）を基本としたいと思います

├── backend
│   ├── Dockerfile
│   ├── controllers
│   ├── db
│   │   ├── conn.go
│   │   └── entity.go
│   ├── go.mod
│   ├── main.go
│   ├── models
│   └── router
│       └── router.go

すなわち、ビジネスロジックと言われるような、どんな処理をするかについては`controllers`で行い、データベースにアクセスしたり、DBのEntity(Tasks とか Usersとか)の定義は`db`で行い...のように役割ごとにディレクトリを分ける構成です。

それらを`main.go`で呼び出すことで見通しを良くすることができると思っています。（もちろん開発途中で変更することはあると思います）

開発途中でなんどもリロードするのは面倒だと思うので、Airというホットリロードツールを入れる予定です。

### Frontend

実は Reactを生で使うのか、Next.jsのような React Framework(ReactはJavascriptでフロントエンドを作るためのライブラリ)を使うほうが楽かなとか迷っています...

どちらがいいですかね？書き方はほぼ変わらずなのですが...

構成は、基本的に

https://ja.reactjs.org/docs/getting-started.html

ここにあるような基本構成を取ろうと考えていますが、コンポーネントの分け方は

Atomic Design: [Atomic Design: ](https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B)

と呼ばれるものをベースにしようかなと考えています（何かルールがあった方が開発しやすいかなと）