自分たちに役立つものを開発せよ！　初のチーム開発

# はじめに


アプレンティス6期生の課題としてチーム開発を行いました。 初めての経験であり、完遂したとは言えない仕上がりでしたが、学んだ事や良かった事を中心に記載します。

---


メンバーは3名で、開発のお題は「自分たちに役立つものを開発せよ！」とのことでした。　アイデア出しから要件定義、デザイン、素の言語を用いて実装（フレームワークの使用は不可）を約一ヶ月の期間で行いました

---


### 【アイデアだし】　


当初の決定したアイデアは学習曲線に基づいて復習タイミングの通知をリマインダーでお知らせする、学習と復習に向けたアプリでした。しかし学習曲線が復習のベストタイミングを示すグラフではなく、復習にかかるコストを示すもと判明。　急遽路線変更して、復習のリマインダー設定が簡単に行えるアプリになりました。

![team_dev_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833739/c414b797-6565-5a64-304b-00e0656af8bf.png)


---

### 【開発の過程】
要件定義や各種タスクに関してはnotionを用いて管理しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833739/a8b2b373-bd9d-e379-7fc7-43d6445b1be7.png)


### 【実装】
途中メンバーが一人開発に参画できなくなり、実質二人で実装を行いました。正直に告白すると、タスクだしや詳細な設計は端折りました。他の課題を同時並行で取り組まなければならず時間的に厳しいスケジュールになると思い、早い段階から私が先回りしてdockerを用いた環境構築を行いNginxとrubyのwebrickを使用したバックエンドを勢いで書き上げました。

## docker-compose.yml
```


services:
  db:
    image: mysql:5.7
    container_name: mysql
    platform: linux/amd64
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: root_password 
      MYSQL_DATABASE: team_dev_db
      MYSQL_USER: team_user
      MYSQL_PASSWORD: user_password
      MYSQL_INITDB_SKIP_TZINFO: 1
    # ports:
    #   - "127.0.0.1:3306:3306" #ポートフォアディングをローカルホスト内に指定。
    expose:
      - "3306"

    volumes:
      # - db_data:/var/lib/mysql 
      - ./app/domain/repository/my.conf:/etc/mysql/conf.d/my.cnf
      - ./app/domain/repository/init.sql:/docker-entrypoint-initdb.d/init.sql
      
    restart: always #コンテナが停止したら自動的に再起動
    healthcheck:
      test: ["CMD", "mysqladmin","ping","-h","127.0.0.1", "-proot_password"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 30s

  api:
    build: 
      context: ./app
      dockerfile: Dockerfile
    container_name: api
    volumes: 
      - ./app:/app
      - ./html:/app/statics
    # ports:
    #   - "127.0.0.1:3000:3000" #ポートフォアディングをローカルホストに指定。
    expose:
      - "3000"
    depends_on:
      db:
        condition: service_healthy
    healthcheck:
      test: ["CMD", "curl","-f","http://localhost:3000"]
      interval: 30s
      timeout: 10s
      retries: 5
      
      
    environment:
      - WAIT_HOSTS=db:3306

  nginx:
    image: nginx:1-alpine
    container_name: nginx
    ports:
      - "127.0.0.1:8080:80"
      - "127.0.0.1:8443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./nginx/certs:/etc/nginx/certs:ro  # 証明書ファイルをマウント
      - ./statics:/usr/share/nginx/statics
    depends_on:
      - api
    restart: always #コンテナが停止した場合に自動的の再起動



```

・nginxではHTTPS通信（オレオレ証明書）を行い、画像やJs・Html・cssファイルを配信し、APIとのリバースプロキシとして構築しました。


---

ディレクトリ構成はバックエンドとフロントエンドで分けて開発したかったので、下記の構成にしました。

## ディレクトリ構成
```
team_dev_1
├─app　#APIサーバーディレクトリ
│  └─domain
│     ├─endpoints　#URLのルーティングとコントローラーの役割を担うクラスを定義
│     └─repository #Mysqlの初期化ファイルとMysqlと接続するためのクライアントクラスを定義
├─nginx　#webサーバーのディレクトリ　certsの中に自己証明書や設定ファイルを記載
│  └─certs
└─statics　#webサーバーが配信する静的ファイルを記載
    ├─css
    ├─html
    ├─images
    │  ├─icon
    │  ├─references
    │  └─tree
    └─js
        ├─apis
        ├─ImageFunction
        ├─three
        ├─timeManage
        ├─todoForm
        └─todoList
```

・ApiのendpointsディレクトリはwebrickのWEBrick::HTTPServlet::AbstractServletを継承し、主にルーティングやcontrollerの役割となるメソッドを定義しました。


相方のメンバーにはフロントエンドの実装やその他もろもろお願いし、各々できる事をがむしゃらにやる！そんな気合ごり押しの開発でした。

### 【チーム開発で苦労した事・良かった事】

メンバー同士のコミュニケーションが一番難しいと感じました。初学者同士の開発なのでお互い遠慮してしまい、具体的に詳細を決めていく段階では話がまとまらない、会話が続かない場面が多々ありました。半面、趣味の話で盛り上がり開発から脱線するミーティングの日もありました。開発自体も楽しい時間でしたが（実際は登山に似た苦行でした笑）談笑してた時間が開発中の一番の楽しさでした。