【未経験】ポートフォリオ開発の記録(Rails/React/Docker/AWS/CircleCI)

0.　はじめに

こんにちは！
この記事では実務未経験者が学習・ポートフォリオ開発を進める中で感じたことや学習方法を中心に記載しています。
これからプログラミングを始める方の参考になれば嬉しいです。

自己紹介

• 1998年生まれの23歳男（2022年6月現在）です。
• 国立高専卒で、現在は清涼飲料の製造工場で働いています。
• プログラミング経験は学生の時にC++を少しだけ。
  あとはVBAがギリ読める程度です。

1.　ポートフォリオ概要

↓こちらに記載しています。
GitHub
https://github.com/z63d/Photudio

インフラ構成図

使用技術概略

• Back End: Ruby on Rails ( APIモード / Puma ), Nginx
• Front End: React ( TypeScript )
• Infra: Docker / Docker-Compose, AWS ( ECS Fargate / ECR / ALB / RDS / S3 / CloudFront / Route53 ), CircleCI
• Third Party API: Google Maps Platform(Maps JavaScript API / Geocoding API/Places API)

使用技術詳細

Back End

• Ruby 3.1.2
• Ruby on Rails　6.1.5
• Nginx

主要gem

• devise / devise_token_auth : トークン認証
• carrierwave / aws-fog : AWSへのファイルアップロード
• rspec : テストフレームワーク
• rubocop : Lintツール

Front End

• React 17.0.2
• TypeScript
• creat-react-app

主要パッケージ

• MUI V5 : UIコンポーネントライブラリ
• React Router V6 : UIとURLを同期
• Axios: PromiseベースのHTTPクライアント
• React Google Maps Api : GoogleマップAPIのバインディング
• react-geocode : 地理的情報を緯度・経度の地理座標値に変換

Google Maps Platform

• Maps JavaScript API / Geocoding API / Places API : Googleマップの使用

Infra

Docker / Docker Compose

開発環境をコンテナ化（Rails,Nginx,MySQL,React）

AWS

• ECS Fargate: Rails&Nginxのコンテナを実行
• ECR: Rails&Nginxのコンテナイメージを保存
• ALB: コンテナの負荷分散
• RDS (MySQL): DBエンジンはMySQLを使用
• S3: Reactのホスティング、画像の保存
• CloudFront: .html、.css、.js、イメージファイル等の配信
• Route53: 独自ドメインでのアクセス

CircleCI

CI/CDパイプライン構築
ビルド、テスト、デプロイを全自動化

• テスト・Lint
  • rspec
  • rubocop
• デプロイ（フロント）
  • Reactのビルド
  • S3へビルドしたファイルをアップロード
• デプロイ（バック）
  • ECRへイメージプッシュ（Rails,Nginx）
  • ECSのサービスアップデート

機能一覧

• アカウント作成、ログイン、ログアウト機能
• ゲストログイン機能
• プロフィール編集機能
  • プロフィール画像登録
  • 現在地登録
  • 外部リンク登録
• 投稿作成機能
• 投稿削除機能
• 投稿並べ替え機能（設定日時順、距離が近い順）
• 投稿絞り込み機能（日時）
• マップ機能
  • 投稿の位置情報を元にマップにマーカー表示
  • 表示するマーカー絞り込み（日時）
• チャット機能
  • メッセージ送信
  • 画像送信
  • 画像保存
• リアクション機能
  • リアクションの通知
• ローディング画面（スケルトンスクリーン）
• レスポンシブ対応

2.　学習記録

2.1 プログラミング学習開始（2021年11月〜）

Progateで学習を開始しました。HTML、CSS、Railsなど1日30分〜1時間ほど学習していたと思います。
この頃は継続して学習する癖をつけるために、少ない時間でも毎日パソコンと向き合うようにしていました。

Progate
https://prog-8.com/

2.2 JavaScript（2022年1月上旬〜）

ドットインストールで素のJavaScriptを中心に３週間ほど学習しました。（ゲームっぽいものとか、今ではMUIにおまかせになってるモーダルなどを作りました。）
数日で終わらせておけばよかったと後悔……
ポートフォリオをつくるだけならこのステップはいらなかったかもしれません。
しかし、これはこれで面白かったです。笑

ドットインストール
https://dotinstall.com/

2.3 React（2022年1月下旬〜）

本格的に学習を開始したのはこの頃です。この時、フロントエンドへの関心が大きかったためReactの学習を開始。
フレームワーク（Reactはライブラリらしい）はVueとの２択でかなり迷いました。Reactを選定した理由は、世界的に見てVueよりもシェアがある&Typescriptと相性が良い（私がその時調べた範囲では）などです。
Angularも有名ですが、初学者がポートフォリオに組み込むには難易度が高そうでしたので候補からは外れました。
日本語教材はVueの方が豊富だと思います。(TechpitはRails+Vueが結構あります。Nuxtもありました。)
下記のUdemy教材で学習しました。神講座です。
この頃から学習時間を大幅に増やして1日3時間、休日は8時間ほど学習していました。

モダンJavaScriptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner/
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
https://www.udemy.com/course/react_stepup/

2.4 Git（2022年2月中旬〜）

ここでGitの知識がマストだと気づいたため学習開始。
山浦さんの講座は初心者にも分かりやすくてオススメです。

Git： もう怖くないGit！チーム開発で必要なGitを完全マスター
https://www.udemy.com/course/unscared_git/

2.5 Firebase（2022年2月中旬〜）

Firebaseを使えばバックエンド不要でお手軽に開発できるらしい！ということでFirebase+Reactの講座を受講。結果的にポートフォリオで使うことはありませんでしたがMUIでのデザインやチャット機能の実装はポートフォリオに生かすことが出来ました。

Firebase未経験者のためのReactで作るチャットアプリ開発入門！最速最短でゴール到達！
https://www.udemy.com/course/react-firebase/

2.6 TypeScript（2022年2月下旬〜）

2.3のReactの講座でTypeScriptには軽く触れていましたが、さらに理解を深めるためにTypeScriptの講座を受講しました。どちらで学習しても大差はないかと思いますが、ポートフォリオにReactを導入する目的だけなら「ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門」の方がReactのセクションが充実しているため個人的にはオススメです。

【世界で7万人が受講】Understanding TypeScript 日本語版
https://www.udemy.com/course/understanding-typescript-jp/
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
https://www.udemy.com/course/ts-for-js-developers/

2.7 Rails+React（2022年3月上旬〜）

この頃に、未経験&フロントエンドオンリーだと就職が厳しいのではないかと感じ始め、Railsを再度学習することに。Djangも少し気になっていたため２択で迷いましたが、Progateで学習済であった+より学習しやすいであろうRailsを選択しました。
Progateで学習していたことを思い出しながらUdemyの教材で学習し直しました。

また、Rails(APIモード)+Reactの教材をTechpitで発見したためこちらも活用しました。
Rails+Reactの日本語教材はほぼ見つからなかった気がします。

はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう
https://www.udemy.com/course/the-ultimate-ruby-on-rails-bootcamp/
RailsとReactでUberEats風SPAアプリケーションをつくってみよう！
https://www.techpit.jp/courses/138

2.8 AWS（2022年3月中旬〜）

ポートフォリオにAWSを導入するため受講しました。
個人的には「AWSで作るWEBアプリケーション 実践講座」の方が好みでした。

AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
https://www.udemy.com/course/aws-and-infra/
AWSで作るWEBアプリケーション 実践講座
https://www.udemy.com/course/webapplication-on-aws/

2.9 Docker（2022年3月下旬〜）

ここで開発環境にDockerを導入しました。「米国AI開発者がゼロから教えるDocker講座」はDockerに加えてCI/CDについても学習できます。
また、ポートフォリオではFargateを利用することにしたためECSでのコンテナ運用を学べる講座を受講しました。コンパクトに纏まっていて分かりやすかったです。
同時期にLinuxの講座も受講しました。これはもう少し早い段階で学習しておいた方がよかったかもしれません。

米国AI開発者がゼロから教えるDocker講座
https://www.udemy.com/course/aidocker/
AWSでDockerを本番運用！AmazonECSを使って低コストでコンテナを運用する実践コース
https://www.udemy.com/course/ecsfargate/
もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう
https://www.udemy.com/course/unscared_linux/

2.10 ポートフォリオ（2022年4月〜5月）

ポートフォリオ開発に必要な技術をある程度学習し終えたわけですが、ECSをはじめとしたインフラ構築に不安がありました。そこで、5月頭くらいにMENTAでメンターさんを探してインフラ周りをメインに相談しました。
インフラをメインで実装していた期間は1日4〜5時間、休日10〜12時間くらい開発に充てていました。
設計〜CI/CD構築までは２ヶ月かからないくらいでした。

開発順序は以下の通りです。

1. アプリ設計
2. Dockerで開発環境構築
3. 基本的な機能の実装
4. AWSでインフラ構築
5. 機能の追加・改善(4と並行)
6. CircleCIでCI/CDパイプライン構築

2.10.1 アプリ設計

draw.ioを使用してインフラ構成図、ER図、ワイヤーフレームを作成しました。

2.10.2 Dockerで開発環境構築

Rails+MySQL+Reactで環境構築を行いました。
ここでつまずいたためしばらくの間Dockerなしで開発を進めていました。

2.10.3 基本的な機能の実装

ある程度機能を実装してからインフラへ。

2.10.4 AWSでインフラ構築

Udemyの講座を見返す､ググる、メンターさんに相談しながら進めました。
思っていた通りfargateでかなり苦戦しました。
エラーの連続でしたので、メンターさんがいらっしゃらなかったら相当厳しかったと思います。

2.10.5 機能の追加・改善

インフラで行き詰まったらこっちで気分転換してました。

2.10.6 CircleCIでCI/CDパイプライン構築

Orbs（circleci/aws-ecr）の最新バージョンを使おうとしたためエラーにかなり悩まされました。
メンターさんの助けもあり、解決までもう少しのところまでいったのですが、
結局バージョンを下げることで解決しました。（最初からそうすればよかった笑）
ここもAWSと同じく、ひたすらトライアンドエラーでした。

3.　学習のまとめ

私はUdemyを頻繁に利用していましたが書籍を利用している方もいらっしゃるようですので、そちらも検討するのもありだと思います。
ちなみにUdemyの講座は楽天リーべイツ経由で買うと少しお得です！

MENTAはめちゃくちゃオススメです。初学者が完全独学となると場合によってはかなり厳しいものがあるように感じます。スクールよりも圧倒的に安価で学習ロードマップを提示してサポートしてくれるようなプランもありましたので、1度調べてみても良いかと思います。
ググるだけでは得られないこと（例えば、エラー解決までのプロセスなんかは非常に参考になります）も多いと思います。
また、私自身の公式ドキュメントを読む力の低さを感じました。メンターさんは公式ドキュメントを引用したうえでの問題解決方法を提案してくださることが多かったです。
ググり力＋公式ドキュメント読解力が大切なのだと感じました。

反省点

• 教材ちょいやりすぎた
  これはよく言われていることだと思うのですが、インップットよりアウトプットが重要だということです。基礎を固めたいという思いから教材をひたすらやっていました。教材よりもポートフォリオに時間を割けばよかったと後悔しています。
  あとは、当たり前ですが学習計画はしっかり立てないといけないですね。私はそこが曖昧でした。独学だと学習を進めていく中で何が必要か気づくことが多かったため、仕方ない部分もあったかもしれませんが。。。

• GitHub
  教材で学習している時にほぼGitHubを使っていませんでした。また、GitHubにプッシュしたコードもしばらくしたら邪魔だったので消していました_______。
  学習の記録になるので残した方がいいです。
  私はポートフォリオ開発中盤くらいからこまめにプッシュするようになりました。（遅い）

4.　さいごに

ポートフォリオはまだ追加したい機能や改善すべき点が残っており、現在も開発の途中です。今後は就活と並行して進めていく予定です。
→ 自社開発企業から内定をもらい、１０月からエンジニアとして働いています。

何か気になる点やご指摘などございましたら、是非コメントお願いいたします！
ご覧いただきありがとうございました！

この記事を執筆する際に参考にさせていただいた記事
【未経験開発 Rails/React/AWS/Docker/CircleCI】独学＋メンターでここまで出来た！Web知識ゼロからモダンな技術アプリ開発までに利用した5つのサービス