【未経験開発 Rails/React(TypeScript)/AWS/Docker/CircleCI】モダンな技術でポートフォリオを作成する方法

# 0. はじめに
モダンな自社開発企業でよく用いられている技術(Rails, React(TypeScript), AWS, Docker, CircleCI)を使用してポートフォリオを作成しました。
本記事のターゲットやコンテンツは以下のとおりです。

## ターゲット: 誰に対する記事か
- 未経験でエンジニア転職するために、プログラミング学習をしている方。
- 未経験でエンジニア転職するために、ポートフォリオを作成しようとしている方。

## コンテンツ: 何がわかるか
- 最終的にどの程度学習すればいいのかの全体感。
- Rails, React(TypeScript), AWS, Docker, CircleCIを使ったポートフォリオの作成方法の概要。

# 1. 概要
## 1.1 サービス概要
人と人との繋がりのあるべき姿を実現する、半匿名型SNSです。
Twitterと似ていますが、以下の2点で異なります。
1. フォロワーの投稿が匿名化されるため、誰によって投稿されたかわからない。
2. 週に1度、投稿を1つだけ匿名化解除できる。
これらの機能により、自由な発信と、その発信に対して共感を持つ人の特定が可能になり、人と人との繋がりのあるべき姿を実現しています。
[サービス概要や背景の詳細はこちらに](https://github.com/Ken0806/Pllizm#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%A6%82%E8%A6%81%E3%81%A8%E8%83%8C%E6%99%AF)
![image](https://user-images.githubusercontent.com/79041840/143382156-8240ea9b-80ae-48b2-89b1-b472d53f2aca.png)
URL: https://www.pllizm.com (現在停止中)
GitHub: https://github.com/Ken0806/Pllizm

## 1.2 使用技術
- フロントエンド
  - TypeScript
  - React ( create-react-app / Redux / Material-UI / ESLint / Prettier )
- バックエンド
  - Ruby 2.7.1
  - Ruby on Rails ( APIモード / RSpec / rubocop ) 6.1.4
  - Nginx
- インフラ
  - AWS ( Route53, Amplify, ALB, VPC, EC2, RDS, S3, CloudFront, ACM )
  - Docker, Docker-compose
  - CircleCI

[詳細はこちらに](https://github.com/Ken0806/Pllizm#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93%E8%A9%B3%E7%B4%B0)

## 1.3 インフラ構成
![image](https://user-images.githubusercontent.com/79041840/143372739-fa599880-b9f6-42ed-b089-5a2acf9921b2.png)

## 1.4 ER図
![image](https://user-images.githubusercontent.com/79041840/144173080-63295412-0664-41bd-acc6-7a0db3cd79ca.png)

## 1.5 機能一覧
### ユーザー利用機能
- 認証機能
- アカウント情報変更・削除機能
- フォロー機能
- 投稿作成機能
- 投稿削除機能
- いいね機能
- 投稿ロック機能: リフラクト(投稿の非匿名化)されないようにする機能
- リプライ作成機能
- 投稿表示機能
- ユーザー検索機能
- リフラクト機能: バッチ処理, 週に1度、投稿を1つだけ非匿名化できる
- 通知機能: 投稿がいいねされたりリフラクト(投稿の非匿名化)されたりした場合に、通知が表示される
- Route53による独自ドメイン + SSL化

### 非ユーザー利用機能
- Docker による開発環境の完全コンテナ化
- CircleCI によるCI実施
  - Front-end: ESLint&prettier
  - Back-end: RSpec, rubocop

# 2. 開発手順
本記事はあくまでポートフォリオ作成の全体感の把握を意図したものです。
実際に行った詳細な作業内容や、つまづいたポイントなどについては別途発信していく予定です。
記事やブログ投稿時には[Twitter](https://twitter.com/ken1min86)でお知らせをするのでよければフォローしてください！

## 2.1 開発の流れ
開発の流れは以下のとおりです。
1. サービス内容構想
2. 要件定義 & テーブル設計
3. ペーパープロトタイピング
4. デザイン
5. 実装
6. インフラ構築(AWS)
7. Docker導入
8. CircleCI導入

## 2.2 具体的な作業内容
### 2.2.1 サービス内容構想
自分自身が強く興味を持つこと、課題感を抱くことをサービス化しました。
私の場合は本サービスの他に、以下のようなものが有りました。

- シーシャ屋版食べログ。
- 中古の本の値段を簡単に比較できるサイト。
- あらゆる物事のロードマップを様々の人と作成する、ロードマップ版Wikipediaのようなもの。
- Web上の情報の中で、後で確認したい情報を保管できるアプリ。

具体的には以下のように行いました。
1. 自分が関心を持つ事柄を書き出す(e.g. 中古の本の購入, シーシャ...)
2. 1の中から自分が最も強く関心を持つものをピックアップ(e.g. 中古の本の購入)
3. 2の中で課題を見つける(e.g. 中古の本で最安値を調査するのが面倒)
4. 3を解決するための具体的な手順を考える(e.g. 主要なECサイトの中古の本を比較するWebサービス)
5. 課題や課題解決の手段の筋が良いかを確認する(e.g. 勝てない競合はいないか, 自分が顧客となったときに心から使いたいと思えるか)

### 2.2.2 要件定義 & テーブル設計
要件定義では、課題を細分化し、"それぞれの課題に対する解決方法"="機能"を決定します。
それと同時に、テーブルの設計を行います。
要件定義のイメージとしては、こちらの機能名をすべて埋めるような感じです( https://crystal-tank-263.notion.site/API-91d6991b3939434ebbc7a6b947bc60ab )。
テーブル設計では、こちらのようにテーブル名と属性の定義を行います( https://crystal-tank-263.notion.site/API-91d6991b3939434ebbc7a6b947bc60ab )。

### 2.2.3 ペーパープロトタイピング
ここまでくると、自分の中でサービスのイメージができてきていると思います。
この工程でそれを具体的なデザインに落とし込みます。
いきなりデザインツールを使ってデザインを決めてもいいと思いますが、実際行おうとするとデザイン作成の自由度が高すぎて手が動かない方も多いのではないかと思います。
そのような方は、紙に大まかなデザインを書き出して、イメージをより具体化してからデザインツールでデザインを行うと、作業がスムーズになると思います。
![E0B392B5-48AF-4F0D-B3D9-1D12F517C936_1_102_o.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965739/bb908f3d-2634-477f-f8aa-1dafb7945dd2.jpeg)  

### 2.2.4 デザイン
デザインツールを用いてデザインを行います。
私はAdobeXDを用いましたが、現在はFigmaのほうがシェアが高いためFigmaを使ったほうがいいかもしれません。
具体的には以下のように行いました。
1. 使用する色を決める。
2. ロゴを作成する。
3. 各画面のデザインを行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965739/802e4f3f-c3b1-328f-c03f-0762c13197ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965739/57158bf0-268d-79f7-1535-1cb1b46a176b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965739/e1d15984-766b-668e-327b-aca394b76cc8.png)

### 2.2.5 実装
バックエンド→フロントエンドの順で実装をします。
フロント側でバックエンドのデータを受け取る必要があるためです。
バックエンドはAPIの設計を行ってから実装をします。
フロントエンドはデザインしたとおりに実装をします。

### 2.2.6 インフラ構築(AWS)
以下のようにインフラ構成を考えてから、インフラの構築を行います。
![EA0E3C20-3A0C-4FBB-822D-E985D78B8B09_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965739/1abe48c7-277e-01cd-7461-e18ce192fd05.jpeg)

### 2.2.7 Docker導入
基礎的な知識を学習すれば、特に問題なく導入できると思います。

### 2.2.8 CircleCI導入
基礎的な知識を学習すれば、特に問題なく導入できると思います。

# 3. 学習教材
各作業を行うにあたり、主に参考にした学習教材を紹介します。
## 3.1 サービス内容構想
マーケティングの基礎知識をつけるために使用しました。

- [100円のコーラを1000円で売る方法](https://www.amazon.co.jp/%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E7%89%88-100%E5%86%86%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%A9%E3%82%921000%E5%86%86%E3%81%A7%E5%A3%B2%E3%82%8B%E6%96%B9%E6%B3%95-%E4%B8%AD%E7%B5%8C%E2%98%86%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-%E6%B0%B8%E4%BA%95-%E5%AD%9D%E5%B0%9A-ebook/dp/B00B1ND2Z0/ref=sr_1_3_sspa?crid=1WCMTLB2Z7ZRK&keywords=100%E5%86%86%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%A9%E3%82%921000%E5%86%86%E3%81%A7%E5%A3%B2%E3%82%8B%E6%96%B9%E6%B3%95&qid=1640689880&sprefix=100%E5%86%86%E3%81%AE%2Caps%2C312&sr=8-3-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEyWkEyRTFFTURIV0syJmVuY3J5cHRlZElkPUEwODgwMjYyQTVZRTZMS0RUSU43JmVuY3J5cHRlZEFkSWQ9QTJVUzlNNDhPSUhTVTMmd2lkZ2V0TmFtZT1zcF9hdGYmYWN0aW9uPWNsaWNrUmVkaXJlY3QmZG9Ob3RMb2dDbGljaz10cnVl)
- [ドリルを売るには穴を売れ](https://www.amazon.co.jp/%E3%83%89%E3%83%AA%E3%83%AB%E3%82%92%E5%A3%B2%E3%82%8B%E3%81%AB%E3%81%AF%E7%A9%B4%E3%82%92%E5%A3%B2%E3%82%8C-%E4%BD%90%E8%97%A4-%E7%BE%A9%E5%85%B8/dp/4413036239/ref=sr_1_1?keywords=%E3%83%89%E3%83%AA%E3%83%AB%E3%82%92%E5%A3%B2%E3%82%8B%E3%81%AB%E3%81%AF%E7%A9%B4%E3%82%92%E5%A3%B2%E3%82%8C&qid=1640689914&sprefix=%E3%83%89%E3%83%AA%E3%83%AB%E3%82%92%2Caps%2C200&sr=8-1)

## 3.2 要件定義 & テーブル設計
- [達人に学ぶDB設計 徹底指南書](https://www.amazon.co.jp/%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6DB%E8%A8%AD%E8%A8%88-%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8-%E3%83%9F%E3%83%83%E3%82%AF-ebook/dp/B00EE1XPAI/ref=sr_1_1?crid=1JM8AZLSDHUGF&keywords=%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6db%E8%A8%AD%E8%A8%88+%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8&qid=1640690201&sprefix=%E9%81%94%E4%BA%BA%E3%81%AB%2Caps%2C198&sr=8-1)

## 3.4 デザイン
- [ノンデザイナーズ・デザインブック](https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557/ref=sr_1_1?keywords=%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA+%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF&qid=1640690284&sprefix=%E3%81%AE%E3%82%93%E3%81%A7%E3%81%96%E3%81%84%E3%81%AA%2Caps%2C188&sr=8-1)
- [Adobe XDではじめるWebデザイン＆プロトタイピング](https://www.amazon.co.jp/Adobe-XD%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%EF%BC%86%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0-%E4%B8%80%E6%AD%A9%E5%85%88%E8%A1%8C%E3%81%8F%E7%8F%BE%E5%A0%B4%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB-%E6%9D%BE%E4%B8%8B-%E7%B5%B5%E6%A2%A8-ebook/dp/B086MHH7NB/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=XAY44D384K21&keywords=adobe+xd&qid=1640690315&sprefix=adobexd%2Caps%2C195&sr=8-3)

## 3.5 実装
React, Redux, TypeScript

- [新・日本一わかりやすいReact入門](
https://www.youtube.com/playlist?list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k)
- [日本一わかりやすいReact-Redux入門](
https://www.youtube.com/playlist?list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr)
- [Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版](
https://www.udemy.com/course/react_stepup/)
- [日本一わかりやすいTypeScript入門](https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad)

Ruby, Rails, RSpec

- [たのしいRuby](https://www.amazon.co.jp/%E3%81%9F%E3%81%AE%E3%81%97%E3%81%84Ruby-%E7%AC%AC6%E7%89%88-Informatics-IDEA-%E9%AB%98%E6%A9%8B/dp/4797399848/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=B6A7EMJKFVGS&keywords=%E3%81%9F%E3%81%AE%E3%81%97%E3%81%84Ruby&qid=1640690648&sprefix=%E3%81%9F%E3%81%AE%E3%81%97%E3%81%84ruby%2Caps%2C292&sr=8-2)
- [プロを目指す人のためのRuby入門](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E6%94%B9%E8%A8%822%E7%89%88-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design/dp/4297124378/ref=sr_1_1_sspa?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=JL1FYS6MEI77&keywords=%E3%83%97%E3%83%AD%E3%82%92+Ruby&qid=1640690670&sprefix=%E3%83%97%E3%83%AD+ruby%2Caps%2C259&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUExSlRHUTE3Wk1POThQJmVuY3J5cHRlZElkPUEwMDkzODI2MUlLSEpLUlhPMlJJUyZlbmNyeXB0ZWRBZElkPUFSUUY0UFdUNjFSVjImd2lkZ2V0TmFtZT1zcF9hdGYmYWN0aW9uPWNsaWNrUmVkaXJlY3QmZG9Ob3RMb2dDbGljaz10cnVl)
- [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)
- [現場で使える Ruby on Rails速習実践ガイド](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1NPI520LABQFI&keywords=Ruby+on+Rails%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89%5D&qid=1640690827&sprefix=%E3%83%97%E3%83%AD+ruby%2Caps%2C194&sr=8-2)
- [Web API: The Good Parts](https://www.amazon.co.jp/Web-API-Parts-%E6%B0%B4%E9%87%8E-%E8%B2%B4%E6%98%8E/dp/4873116864/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3TZ01C9A29XHS&keywords=web+api&qid=1640690864&sprefix=web+api%2Caps%2C200&sr=8-1)

## 3.6 インフラ構築(AWS)
- [ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得] (https://www.udemy.com/course/aws-and-infra/)

## 3.7 Docker導入
- [ゼロから始めるDockerによるアプリケーション実行環境構築](https://www.udemy.com/course/docker-k/)

## 3.8 CircleCI導入
- [公式ドキュメント](https://circleci.com/docs/)