【Ruby/Rails/Docker/AWS(EC2 / VPC / RDS/ Route53)】ポートフォリオ~Target~

## 1.はじめに

今回はポートフォリオとして開発したアプリについて紹介したいと思います。

## 2.開発アプリ

### 開発したアプリ

- アプリ名　「**Target**」

- **Herokuでのデプロイ**↓
- https://fierce-escarpment-22267.herokuapp.com/
- **AWS(EC2 / VPC / RDS/ Route53)でのデプロイ**↓
- http://target-01.work/

![スクリーンショット 2021-08-04 13.38.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/c83c9ffc-682d-793b-45e1-9def05517bf0.png)


- このアプリは、自分が抱えているtodoが部署のどの案件とリンクしているかを明確にできます。
- その他にも、会社、部署の月間目標及び年間目標の確認ができます。
- ログインユーザーには、CompanyLogin（会社責任者）、DepartmentLogin（各部署責任者）、UserLogin（社員） の３種類が用意されています。
- 各ユーザーが確認できる項目は、CompanyTarget(会社目標)、DepartmentTarget(部署目標)、ToDoTarget(部署の案件)、ToDoになります。

### アプリの使い方

#### ゲストログイン

- ゲストログインしていただければ、ゲストユーザーとしてアプリを使用できます。ちなみにゲストログインは、株式会社guestの部署：開発に所属する社員としてログインできます。

- 社員のホーム画面には、自分が抱えるToDoが一覧として表示されます。

![スクリーンショット 2021-08-03 19.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/8213d8f8-8c6d-79f0-cb39-5ae34635b3d1.png)

ToDo一覧には、ToDoの内容と各ToDoとリンクしている部署の案件内容が表示されています。

#### ToDoの新規作成

- ページ上部の新規作成ボタンでToDoを作れます。
- ToDoの新規作成時は所属部署が抱える案件が選べるようになっています。

![スクリーンショット 2021-08-05 14.46.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/3638134a-36f5-598e-5185-ab6db49ecf67.png)

#### ToDoの編集、削除

- ToDo一覧画面の内容部分をクリックすると編集画面に遷移します。

![スクリーンショット 2021-08-05 15.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/e3e01af6-6a96-07e2-8176-5c23225d2201.png)



#### CompanyTarget（会社目標）閲覧時

- メニュータグからCompanyTarget（会社目標）とDepartmentTarget（部署目標）、ToDoTarget（所属部署の案件一覧）を選択できます。

![スクリーンショット 2021-08-03 19.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/5a2144da-172f-ecdd-f1a0-f36dc7ac7d94.png)

#### DepartmentTarget（部署目標）閲覧時

![スクリーンショット 2021-08-03 19.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/686fbc5c-a867-808a-14df-95a50e705271.png)

#### ToDoTarget（案件一覧）閲覧時

![スクリーンショット 2021-08-05 15.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/553f682a-c205-a908-f78f-9ea88393dffa.png)

## 3.工夫した点

- 会社責任者、部署責任者の視点を考えて開発しました。
- ログインユーザーによって表示画面を変えました。

### Company（会社責任者）の表示画面

#### DepartmentTarget
![スクリーンショット 2021-08-04 11.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/b6b4920b-4306-3fd2-96c1-0e1262714074.png)

- 全部署の目標一覧が表示されます

#### ToDoTarget
![スクリーンショット 2021-08-05 17.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/f8d4dc10-7a8e-52e5-ee41-58e9fa694e16.png)

- 全部署の案件一覧が表示されます。

### Department（部署責任者）の表示画面

#### DepartmentTarget
![スクリーンショット 2021-08-03 19.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/6a6cc976-4abe-9521-8c76-52637890e43a.png)

- 部署の目標一覧が表示されます

#### ToDoTarget

![スクリーンショット 2021-08-05 15.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/6349195e-0e9d-426f-0a58-4bc853235f72.png)

- 部署の案件一覧が表示されます。


## 4.開発の背景

- **業務量が多くなったときにToDoのが明確になっていた方が仕事が捗りやすい。**抱えている業務量が多くなると、思いこみや勘違いにより仕事をしてしまい、ミスに繋がりやすいが、ToDo作成の時点で目的が明確にしておけば、ミスを減らせる。

- **部署が抱えている案件を把握できていた方が、上司の指示を待つことなく、できる範囲の仕事を積極的にできる。**言われなくてもできるがベストだとは思いますが、やはり明確になっていた方が仕事はやりやすいですし、何より思いこみや勘違いによるミスを減らせると考えました。

- **目標が把握できていれば、目標達成のためにどの位のペースで仕事すればいいか逆算しやすい。**正直なところ、会社の目標が社員にとっては飾りになりがちな状況はあると思います。それを解消したいと考えました。

## 5.開発環境

- Ruby 2.7.2
- Rails 6.1.4
- Docker
- MySQL
- CircleCI

## 6.主要Gem

- `Devise` : ユーザーの新規登録、ログイン、ログアウト、ゲストユーザー機能の実装
- `RSpec` : 単体テスト（model）、結合テスト（request spec）で使用
- `FactoryBot` : RSpecのテスト実装時、使用
- `Faker` : RSpecのテスト実装時、使用
- `RuboCop` : Rubyの静的コード解析
- `bootstrap` : フロントエンド実装
- `capistrano` : デプロイ時使用

## 7.ER図

![スクリーンショット 2021-08-04 15.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/7131393d-a8b8-1d27-5c7c-0c36cac70d9c.png)

## 8.インフラ構成図

~~Herokuサービスを使用~~
AWS(EC2 / VPC / RDS/ Route53)を使用したデプロイ←8/18追記
![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1536072/27d0e770-adba-dc61-1bd8-be6d6bbc8278.png)


## 9.アピールポイント

- **RSpecによるテストコードの実装**
- **Dockerによるデータベース運用**
- **RuboCopの導入**
- **circle CIによるRSpecとRuboCopの自動化**　←8/6追記
- **AWS(EC2 / VPC / RDS/ Route53)でのデプロイ** ←8/18追記

## 10.まとめ

今回はポートフォリオとして作成したアプリの紹介でした。
~~現在は、~~

~~circle CIによるRSpecとRuboCopの自動化~~

~~に取り組んでいます。~~ 8月6日circleCI導入済み

独学なので、エラー対応に格闘する毎日であります。

転職活動頑張りたいと思います。

エンジニア転職を目指す方は、お互い頑張りましょう！

もし指摘等あればコメントの方よろしくお願いします。