More than 1 year has passed since last update.

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

Last updated at 2022-04-20Posted at 2021-12-28

0. はじめに

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

ターゲット: 誰に対する記事か

未経験でエンジニア転職するために、プログラミング学習をしている方。
未経験でエンジニア転職するために、ポートフォリオを作成しようとしている方。

コンテンツ: 何がわかるか

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

1. 概要

1.1 サービス概要

人と人との繋がりのあるべき姿を実現する、半匿名型SNSです。
Twitterと似ていますが、以下の2点で異なります。

フォロワーの投稿が匿名化されるため、誰によって投稿されたかわからない。
週に1度、投稿を1つだけ匿名化解除できる。
これらの機能により、自由な発信と、その発信に対して共感を持つ人の特定が可能になり、人と人との繋がりのあるべき姿を実現しています。
サービス概要や背景の詳細はこちらに

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

詳細はこちらに

1.3 インフラ構成

1.4 ER図

1.5 機能一覧

ユーザー利用機能

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

非ユーザー利用機能

Docker による開発環境の完全コンテナ化
CircleCI によるCI実施
- Front-end: ESLint&prettier
- Back-end: RSpec, rubocop

2. 開発手順

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

2.1 開発の流れ

開発の流れは以下のとおりです。

サービス内容構想
要件定義 & テーブル設計
ペーパープロトタイピング
デザイン
実装
インフラ構築(AWS)
Docker導入
CircleCI導入

2.2 具体的な作業内容

2.2.1 サービス内容構想

自分自身が強く興味を持つこと、課題感を抱くことをサービス化しました。
私の場合は本サービスの他に、以下のようなものが有りました。

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

具体的には以下のように行いました。

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

2.2.2 要件定義 & テーブル設計

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

2.2.3 ペーパープロトタイピング

ここまでくると、自分の中でサービスのイメージができてきていると思います。
この工程でそれを具体的なデザインに落とし込みます。
いきなりデザインツールを使ってデザインを決めてもいいと思いますが、実際行おうとするとデザイン作成の自由度が高すぎて手が動かない方も多いのではないかと思います。
そのような方は、紙に大まかなデザインを書き出して、イメージをより具体化してからデザインツールでデザインを行うと、作業がスムーズになると思います。